Book

1import type React from 'react';
2import type { CSSProperties } from 'react';
3import '@/registry/styles/book.css';
4import { cn } from '@/lib/utils';
5import { VercelLogoIcon } from '@radix-ui/react-icons';
6 
7const defaultIllustration = (
8  <svg
9    fill="none"
10    height="56"
11    viewBox="0 0 36 56"
12    width="36"
13    xmlns="http://www.w3.org/2000/svg"
14  >
15    <path
16      clipRule="evenodd"
17      d="M3.03113 28.0005C6.26017 23.1765 11.7592 20.0005 18 20.0005C24.2409 20.0005 29.7399 23.1765 32.9689 28.0005C29.7399 32.8244 24.2409 36.0005 18 36.0005C11.7592 36.0005 6.26017 32.8244 3.03113 28.0005Z"
18      fill="#0070F3"
19      fillRule="evenodd"
20    />
21    <path
22      clipRule="evenodd"
23      d="M32.9691 28.0012C34.8835 25.1411 36 21.7017 36 18.0015C36 8.06034 27.9411 0.00146484 18 0.00146484C8.05887 0.00146484 0 8.06034 0 18.0015C0 21.7017 1.11648 25.1411 3.03094 28.0012C6.25996 23.1771 11.7591 20.001 18 20.001C24.2409 20.001 29.74 23.1771 32.9691 28.0012Z"
24      fill="#45DEC4"
25      fillRule="evenodd"
26    />
27    <path
28      clipRule="evenodd"
29      d="M32.9692 28.0005C29.7402 32.8247 24.241 36.001 18 36.001C11.759 36.001 6.25977 32.8247 3.03077 28.0005C1.11642 30.8606 0 34.2999 0 38C0 47.9411 8.05887 56 18 56C27.9411 56 36 47.9411 36 38C36 34.2999 34.8836 30.8606 32.9692 28.0005Z"
30      fill="#E5484D"
31      fillRule="evenodd"
32    />
33  </svg>
34);
35 
36const Book = ({
37  title,
38  enableTexture,
39  width = 196,
40  variant = 'stripe',
41  color = '#e79d13',
42  textColor = '#ffffff',
43  illustration,
44}: {
45  title: string;
46  enableTexture?: boolean;
47  variant?: 'stripe' | 'simple';
48  width?: number;
49  color?: string;
50  textColor?: string;
51  illustration?: React.ReactNode;
52}) => {
53  return (
54    <div
55      className="book-perspective"
56      style={{ '--book-width': width } as React.CSSProperties}
57    >
58      <div
59        className={cn('book-rotate-wrapper book-color', {
60          'book-stripe': variant === 'stripe',
61          'book-simple': variant === 'simple',
62        })}
63        style={
64          {
65            '--book-color': color,
66            '--book-text-color': textColor,
67          } as React.CSSProperties
68        }
69      >
70        <div
71          className="stack-stack stack book-book"
72          data-version="v1"
73          style={
74            {
75              '--stack-flex': 'initial',
76              '--stack-direction': 'column',
77              '--stack-align': 'stretch',
78              '--stack-justify': 'flex-start',
79              '--stack-padding': '0px',
80// … truncated