1export function Book({
2 isStatic = false,
3 className = "",
4 cover,
5 coverColor,
6}) {
7 return (
8 <div
9 className={clsx(
10 "[perspective:800px]",
11 "z-10 group py-8 my-4",
12 "flex items-center justify-center w-full rounded-lg",
13 "bg-gray-50/80 dark:bg-[#101014]",
14 "border dark:border-gray-600/20",
15 className,
16 )}
17 >
18 <div
19 style={{
20 width: "140px",
21 transition: "transform 500ms ease",
22 }}
23 className={clsx(
24 "relative [transform-style:preserve-3d] aspect-[3/4]",
25 "shadow-lg dark:shadow-black/80",
26 "rounded-md",
27 isStatic
28 ? "[transform:rotateY(-30deg)]"
29 : "[transform:rotateY(0deg)] group-hover:[transform:rotateY(-24deg)]",
30 )}
31 >
32 <div
33 className={clsx(
34 "absolute inset-y-0 overflow-hidden size-full left-0",
35 "text-white flex flex-col justify-end p-6",
36 "bg-gradient-to-tr bg-cover bg-center",
37 "from-gray-900 to-gray-700",
38 "rounded-md",
39 )}
40 style={{
41 transform: "translateZ(25px)",
42 backgroundSize: "contain",
43 backgroundImage: `url('${cover}')`,
44 }}
45 >
46 <div
47 className="absolute left-0 top-0 h-full"
48 style={{
49 minWidth: "8.2%",
50 background:
51 "linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 12%, hsla(0, 0%, 100%, .25) 29.25%, hsla(0, 0%, 100%, 0) 50.5%, hsla(0, 0%, 100%, 0) 75.25%, hsla(0, 0%, 100%, .25) 91%, hsla(0, 0%, 100%, 0)), linear-gradient(90deg, rgba(0, 0, 0, .03), rgba(0, 0, 0, .1) 12%, transparent 30%, rgba(0, 0, 0, .02) 50%, rgba(0, 0, 0, .2) 73.5%, rgba(0, 0, 0, .5) 75.25%, rgba(0, 0, 0, .15) 85.25%, transparent)",
52 opacity: 0.2,
53 }}
54 />
55 </div>
56 <div
57 className="absolute top-[3px] bottom-[3px] w-[48px] left-0 bg-white"
58 style={{
59 transform: "translateX(112px) rotateY(90deg)",
60 background:
61 "linear-gradient(90deg, hsla(0, 0%, 100%, 1) 50%, hsla(0, 0%, 98%, 1) 50%)",
62 }}
63 />
64 <div
65 className={clsx(
66 "absolute inset-y-0 overflow-hidden size-full left-0",
67 "text-white flex flex-col justify-end p-6",
68 "rounded-md",
69 )}
70 style={{
71 transform: "translateZ(-25px)",
72 backgroundColor: coverColor,
73 }}
74 />
75 </div>
76 </div>
77 );
78}