Css Box Demo

1import { useRef } from "react"
2 
3import CSSBox, { CSSBoxRef } from "@/components/fancy/blocks/css-box"
4 
5export default function CSSBoxDemo() {
6  const boxRef = useRef<CSSBoxRef>(null)
7 
8  // Example text face component
9  const TextFace = ({
10    texts,
11    className,
12  }: {
13    texts: string[]
14    className?: string
15  }) => (
16    <div className={`flex flex-col ${className || ""}`}>
17      {texts.map((text, i) => (
18        <div key={i} className="text-[#0015ff] font-bold tracking-wider">
19          {text}
20        </div>
21      ))}
22    </div>
23  )
24 
25  return (
26    <CSSBox
27      ref={boxRef}
28      width={200}
29      height={200}
30      depth={200}
31      perspective={600}
32      stiffness={100}
33      damping={30}
34      faces={{
35        front: (
36          <TextFace
37            texts={["YOU CAN", "JUST", "DO THINGS"]}
38            className="text-right justify-end items-end h-full w-full p-2 select-none"
39          />
40        ),
41        back: (
42          <TextFace
43            texts={["MAKE THINGS", "YOU WISH", "EXISTED"]} 
44            className="text-left justify-end h-full w-full p-2 select-none"
45          />
46        ),
47        right: (
48          <TextFace
49            texts={["MAKE THINGS", "YOU WISH", "EXISTED"]}
50            className="text-left justify-end h-full w-full p-2 select-none"
51          />
52        ),
53        left: (
54          <TextFace
55            texts={["BREAK", "THINGS", "MOVE", "FAST"]}
56            className="items-end w-full h-full p-2 select-none"
57          />
58        ),
59        top: (
60          <TextFace
61            texts={["YOU CAN", "JUST", "DO THINGS"]}
62            className="text-right justify-end items-end h-full w-full p-2 select-none" 
63          />
64        ),
65        bottom: (
66          <TextFace
67            texts={["BREAK", "THINGS", "MOVE", "FAST"]}
68            className="items-end w-full h-full p-2 select-none"
69          />
70        ),
71      }}
72      className="text-3xl"
73    />
74  )
75}