Comparison 01

1import { cn } from "@/lib/utils";
2import { Check, X } from "lucide-react";
3 
4type FeatureValue =
5  | string
6  | boolean
7  | { type: "colors"; values: string[] }
8  | { type: "percentage"; value: number };
9 
10interface Product {
11  name: string;
12  img?: string;
13  icon?: React.ReactNode;
14  featured?: boolean;
15}
16interface Feature {
17  name: string;
18  values: FeatureValue[];
19}
20interface Comparison01Props {
21  label?: string;
22  title?: string;
23  description?: string;
24  products?: Product[];
25  features?: Feature[];
26  className?: string;
27}
28 
29const FeatureValueCell = ({ value }: { value: FeatureValue }) => {
30  if (typeof value === "boolean")
31    return value ? (
32      <Check className="size-5 text-foreground" />
33    ) : (
34      <X className="size-5 text-muted-foreground/40" />
35    );
36  if (typeof value === "object" && value.type === "colors")
37    return (
38      <div className="flex items-center gap-1.5">
39        {value.values.map((color, i) => (
40          <div
41            key={i}
42            className="size-5 rounded-full border border-border"
43            style={{ backgroundColor: color }}
44          />
45        ))}
46      </div>
47    );
48  if (typeof value === "object" && value.type === "percentage")
49    return <span className="text-sm">{value.value}%</span>;
50  return <span className="text-sm">{value}</span>;
51};
52 
53const Comparison01 = ({
54  label = "Why choose us",
55  title = "Not all creams are created equal",
56  description = "See how our formula compares to the competition.",
57  products = [
58    {
59      name: "Basic Cream",
60      img: "https://www.shadcnship.com/images/placeholders/product-design-1.webp",
61    },
62    {
63      name: "Lumière Pro",
64      featured: true,
65      img: "https://www.shadcnship.com/images/placeholders/product-design-2.webp",
66    },
67    {
68      name: "Other Brands",
69      img: "https://www.shadcnship.com/images/placeholders/product-design-3.webp",
70    },
71  ],
72  features = [
73    { name: "Hydration duration", values: ["4 hours", "72 hours", "8 hours"] },
74    { name: "Dermatologist tested", values: [false, true, false] },
75    { name: "Fragrance-free", values: [false, true, false] },
76    { name: "For sensitive skin", values: [false, true, "Partial"] },
77    { name: "SPF protection", values: [false, true, false] },
78    { name: "Natural ingredients", values: ["Partial", true, false] },
79    { name: "Vegan & cruelty-free", values: [false, true, false] },
80    { name: "Price", values: ["$12", "$48", "$65"] },
81  ],
82  className,
83}: Comparison01Props) => {
84// … truncated