Holographic Card

1import * as React from 'react';
2import { cn } from '@/lib/utils';
3import './holographic-card.css';
4 
5export interface GlitchTextProps extends React.HTMLAttributes<HTMLHeadingElement> {
6  text: string;
7  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
8  theme?: {
9    c1?: string;
10    c2?: string;
11  };
12}
13 
14export const GlitchText = React.forwardRef<HTMLHeadingElement, GlitchTextProps>(
15  ({ className, text, as: Comp = 'h1', theme, style, ...props }, ref) => {
16    const customStyle = {
17      ...(theme?.c1 ? { '--holo-c1': theme.c1 } : {}),
18      ...(theme?.c2 ? { '--holo-c2': theme.c2 } : {}),
19      ...style,
20    } as React.CSSProperties;
21 
22    return (
23      <Comp
24        ref={ref}
25        className={cn('holographic-glitch', className)}
26        data-text={text}
27        style={customStyle}
28        {...props}
29      >
30        {text}
31      </Comp>
32    );
33  }
34);
35GlitchText.displayName = 'GlitchText';
36 
37export interface HolographicCardProps extends Omit<
38  React.HTMLAttributes<HTMLDivElement>,
39  'title'
40> {
41  title?: React.ReactNode;
42  description?: React.ReactNode;
43  buttonText?: string;
44  buttonHref?: string;
45  theme?: {
46    c1?: string;
47    c2?: string;
48    c3?: string;
49  };
50}
51 
52export const HolographicCard = React.forwardRef<
53  HTMLDivElement,
54  HolographicCardProps
55>(
56  (
57    {
58      className,
59      title,
60      description,
61      buttonText,
62      buttonHref,
63      children,
64      theme,
65      style,
66      ...props
67    },
68    ref
69  ) => {
70    const customStyle = {
71      ...(theme?.c1 ? { '--holo-c1': theme.c1 } : {}),
72      ...(theme?.c2 ? { '--holo-c2': theme.c2 } : {}),
73      ...(theme?.c3 ? { '--holo-c3': theme.c3 } : {}),
74      ...style,
75    } as React.CSSProperties;
76 
77    return (
78      <div className='holographic-card-wrapper flex h-full w-full items-center justify-center p-8'>
79        <div
80          ref={ref}
81          className={cn(
82            'holographic-card w-full max-w-[420px] p-10 text-white',
83            className
84          )}
85          style={customStyle}
86          {...props}
87        >
88          {title && <h2 className='mb-4 text-2xl font-bold'>{title}</h2>}
89 
90          {description && (
91            <p className='leading-relaxed opacity-85'>{description}</p>
92          )}
93 
94          {children}
95 
96          {buttonText && (
97            <a
98              href={buttonHref || '#'}
99              className='holographic-btn mt-8 px-7 py-3 text-sm'
100            >
101              {buttonText}
102            </a>
103          )}
104        </div>
105      </div>
106// … truncated