Layered Card

1/* eslint-disable react-refresh/only-export-components */
2import * as React from 'react'
3import { cva, type VariantProps } from 'class-variance-authority'
4import { cn } from '@/lib/utils'
5 
6const layeredCardVariants = cva('relative', {
7  variants: {
8    layers: {
9      single: '',
10      double: '',
11      triple: '',
12    },
13    offset: {
14      sm: '',
15      default: '',
16      lg: '',
17    },
18    layerColor: {
19      default: '',
20      primary: '',
21      secondary: '',
22      accent: '',
23      muted: '',
24    },
25  },
26  defaultVariants: {
27    layers: 'double',
28    offset: 'default',
29    layerColor: 'default',
30  },
31})
32 
33export interface LayeredCardProps
34  extends React.HTMLAttributes<HTMLDivElement>,
35    VariantProps<typeof layeredCardVariants> {
36  /** Make the card interactive with hover effects */
37  interactive?: boolean
38}
39 
40const LayeredCard = React.forwardRef<HTMLDivElement, LayeredCardProps>(
41  ({ className, layers, offset, layerColor, interactive = false, children, ...props }, ref) => {
42    // Calculate offsets based on size
43    const offsetSizes = {
44      sm: 6,
45      default: 8,
46      lg: 12,
47    }
48    const offsetPx = offsetSizes[offset || 'default']
49 
50    // Get layer count
51    const layerCount = layers === 'single' ? 1 : layers === 'triple' ? 3 : 2
52 
53    // Get background color class for layers
54    const colorClasses = {
55      default: 'bg-muted',
56      primary: 'bg-primary',
57      secondary: 'bg-secondary',
58      accent: 'bg-accent',
59      muted: 'bg-muted',
60    }
61    const layerBg = colorClasses[layerColor || 'default']
62 
63    return (
64      <div
65        ref={ref}
66        className={cn(layeredCardVariants({ layers, offset, layerColor }), className)}
67        {...props}
68      >
69        {/* Layer 3 (furthest back) */}
70        {layerCount >= 3 && (
71          <div
72            className={cn(
73              'absolute inset-0 border-3 border-foreground',
74              layerBg,
75              'opacity-50'
76            )}
77            style={{
78              transform: `translate(${offsetPx * 3}px, ${offsetPx * 3}px)`,
79            }}
80          />
81        )}
82 
83        {/* Layer 2 */}
84        {layerCount >= 2 && (
85          <div
86            className={cn(
87              'absolute inset-0 border-3 border-foreground',
88              layerBg,
89              'opacity-70'
90            )}
91            style={{
92              transform: `translate(${offsetPx * 2}px, ${offsetPx * 2}px)`,
93            }}
94          />
95        )}
96 
97        {/* Layer 1 */}
98        {layerCount >= 1 && (
99// … truncated