Perspective Card

1"use client";
2
3import { PerspectiveCard } from "@/registry/ui";
4import { cn } from "@/lib/utils";
5
6const demoImage =
7  "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2064&auto=format&fit=crop";
8
9export type PerspectiveCardStylePreset =
10  | "default"
11  | "custom-styling"
12  | "custom-colours"
13  | "tailwind-colours"
14  | "combined";
15
16export type PerspectiveCardPlaygroundProps = {
17  title?: string;
18  description?: string;
19  image?: string;
20  className?: string;
21  rotationIntensity?: number;
22  disableTilt?: boolean;
23  stylePreset?: PerspectiveCardStylePreset;
24};
25
26const STYLE_PRESETS: Record<
27  PerspectiveCardStylePreset,
28  {
29    className?: string;
30    slots?: {
31      image?: string;
32      overlay?: string;
33      header?: string;
34      content?: string;
35    };
36  }
37> = {
38  default: {},
39  "custom-styling": {
40    className: "rounded-xl border-none",
41    slots: {
42      header: "pb-2",
43      content: "italic",
44    },
45  },
46  "custom-colours": {
47    className: "bg-emerald-500/20",
48    slots: {
49      header: "text-red-500",
50      content: "text-blue-400",
51    },
52  },
53  "tailwind-colours": {
54    className: "bg-blue-500 border-yellow-500 border-2",
55    slots: {
56      header: "text-yellow-300 font-bold",
57      content: "text-white",
58    },
59  },
60  combined: {
61    className: "rounded-none border-4 border-indigo-500 bg-indigo-50",
62    slots: {
63      image: "h-32",
64      header: "pb-1 text-indigo-700 font-bold",
65      overlay: "from-indigo-900/70",
66    },
67  },
68};
69
70export function PerspectiveCardPlaygroundExample({
71  title = "Card Title",
72  description = "Card description",
73  image = demoImage,
74  className = "",
75  rotationIntensity = 10,
76  disableTilt = false,
77  stylePreset = "default",
78}: PerspectiveCardPlaygroundProps) {
79  const preset = STYLE_PRESETS[stylePreset];
80
81  return (
82    <PerspectiveCard
83      title={title}
84      description={description}
85      image={image}
86      rotationIntensity={rotationIntensity}
87      disableTilt={disableTilt}
88      className={cn(preset.className, className)}
89      slots={preset.slots}
90    />
91  );
92}