Book

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { useReducedMotion } from "motion/react";
5import type { ReactNode } from "react";
6 
7export type BookVariant = "stripe" | "simple";
8 
9export interface BookProps {
10  /** Additional CSS classes */
11  className?: string;
12  /** Cover accent color (CSS color value) */
13  color?: string;
14  /** Custom illustration for the stripe area (stripe variant only) */
15  illustration?: ReactNode;
16  /** Logo or icon displayed at the bottom of the content area */
17  logo?: ReactNode;
18  /** Title text color override */
19  textColor?: string;
20  /** Book title text displayed on the cover */
21  title: string;
22  /** Visual variant of the book */
23  variant?: BookVariant;
24  /** Book width in pixels */
25  width?: number;
26}
27 
28const BOOK_DEPTH = "29cqw";
29const BOOK_BORDER_RADIUS = "6px 4px 4px 6px";
30const DEFAULT_WIDTH = 196;
31const DEFAULT_COLOR = "#e5a00d";
32 
33const BG_SHADOW =
34  "linear-gradient(90deg, #fff0 0%, #fff0 12%, #ffffff40 29.25%, #fff0 50.5%, #fff0 75.25%, #ffffff40 91%, #fff0 100%), linear-gradient(90deg, #00000008 0%, #0000001a 12%, #0000 30%, #00000005 50%, #0003 73.5%, #00000080 75.25%, #00000026 85.25%, #0000 100%)";
35 
36const Book = ({
37  title,
38  variant = "stripe",
39  color = DEFAULT_COLOR,
40  textColor,
41  width = DEFAULT_WIDTH,
42  illustration,
43  logo,
44  className,
45}: BookProps) => {
46  const shouldReduceMotion = useReducedMotion();
47  const bookWidth = `${width}px`;
48 
49  return (
50    <div
51      className={cn("inline-block w-fit", className)}
52      style={{
53        perspective: "900px",
54        // CSS custom properties for internal use
55        ["--book-width" as string]: bookWidth,
56        ["--book-color" as string]: color,
57        ["--book-text-color" as string]: textColor || "var(--color-foreground)",
58        ["--book-depth" as string]: BOOK_DEPTH,
59        ["--book-border-radius" as string]: BOOK_BORDER_RADIUS,
60        ["--bg-shadow" as string]: BG_SHADOW,
61      }}
62    >
63      {/* Rotate wrapper - handles 3D rotation on hover */}
64      <div
65        className={cn(
66          "relative w-fit",
67          "[transform-style:preserve-3d]",
68          "[container-type:inline-size]",
69          !shouldReduceMotion && [
70            "transition-transform duration-[250ms] ease-out",
71            "hover:[transform:rotateY(-20deg)_scale(1.066)_translateX(-8px)]",
72          ]
73        )}
74        style={{
75          aspectRatio: "49 / 60",
76          minWidth: bookWidth,
77        }}
78      >
79        {/* Front cover */}
80        <div
81// … truncated