"use client"; import { motion } from "framer-motion"; import { CheckIcon, EuroIcon } from "lucide-react"; import React, { useState } from "react"; import { cn } from "#/src/utils/cn"; type BilledType = "monthly" | "annually"; const pricingData: OfferCardProps[] = [ { title: "Starter", description: "For small teams", price: { monthly: 19, annually: 9, }, features: ["10 users included", "2 GB of storage", "Email support"], infos: ["30 users included", "15 GB of storage", "Phone and email support"], }, { title: "Pro", description: "For medium-sized businesses", price: { monthly: 39, annually: 29, }, features: [ "20 users included", "10 GB of storage", "Priority email support", ], infos: ["30 users included", "15 GB of storage", "Phone and email support"], isBestValue: true, }, { title: "Enterprise", description: "For large businesses", price: { monthly: 59, annually: 49, }, features: [ "30 users included", "15 GB of storage", "Phone and email support", ], infos: ["30 users included", "15 GB of storage", "Phone and email support"], }, { title: "Enterprise", description: "For large businesses", price: { monthly: 59, annually: 49, }, features: [ "30 users included", "15 GB of storage", "Phone and email support", ], infos: ["30 users included", "15 GB of storage", "Phone and email support"], }, ]; export default function ManyOffersVariant1() { const [selectedBilledType, setSelectedBilledType] = useState("monthly"); function handleSwitchTab(tab: BilledType) { setSelectedBilledType(tab); } return (

{pricingData.map((offer) => ( ))}

); } type OfferCardProps = { title: string; description: string; price: { monthly: number; annually: number; }; features: string[]; infos?: string[]; isBestValue?: boolean; }; const OfferCard = ({ title, description, price, features, infos, isBestValue, selectedBilledType, }: OfferCardProps & { selectedBilledType: BilledType; }) => { function getAnnualPrice() { return price.annually * 12; } return (

{title}

{description}

{price[selectedBilledType]}

{selectedBilledType === "monthly" ? "billed monthly" : `${getAnnualPrice()}€ billed annually`}

This plan include :

{feature}

{infos && ( <>

{feature}

)}

); }; export function SelectOfferTab({ handleSwitchTab, selectedBilledType, }: Readonly<{ handleSwitchTab: (tab: BilledType) => void; selectedBilledType: BilledType; }>) { const OfferList = ["monthly", "annually"] as const; return (

{OfferList.map((button, index) => ( ))}

); }

Pricing with many offers