"use client" import { Fragment } from "react" // shadcn import { Card, CardContent } from "@/components/ui/card" import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle, } from "@/components/ui/item" import { Separator } from "@/components/ui/separator" // third-party import { cn } from "cn" // assets import { CreditCard, Gift, MessageCircleMore, Truck } from "lucide-react" // constants const features = [ { id: "1", title: "Packaging", subtitle: "97% positive", icon: Gift, iconClass: "text-purple-500 dark:text-purple-400", }, { id: "2", title: "Fast Delivery", subtitle: "Start From $10", icon: Truck, iconClass: "text-emerald-500 dark:text-emerald-400", }, { id: "3", title: "Great Feedback", subtitle: "97% positive", icon: MessageCircleMore, iconClass: "text-amber-500 dark:text-amber-400", }, { id: "4", title: "Secure Payment", subtitle: "100% secured", icon: CreditCard, iconClass: "text-blue-600 dark:text-blue-400", }, ] // types interface Ecommerce19Props { /** "card" = coloured icons inside a raised card, "plain" = monochrome icons in outlined circles, no card */ variant?: "card" | "plain" } // ------------------------------ | E - COMMERCE 19 | ------------------------------ // export default function Ecommerce19({ variant = "card" }: Ecommerce19Props) { const plain = variant === "plain" const grid = (

{features.map((feature, index) => ( {index > 0 && ( )} {plain ? ( ) : ( )} {feature.title} {feature.subtitle} ))}

) return (

{plain ? (

{grid}

) : (

{grid}

)}

) }