Book Variant Demo

1import { Leaf } from 'lucide-react';
2import Book from '../bucharitesh/book';
3 
4const BookDemo = () => {
5  return (
6    <div className="grid w-full grid-cols-1 gap-8 rounded-xl bg-white p-6 md:grid-cols-2">
7      <Book title="The user experience of the Frontend Cloud" />
8      <Book
9        title="The user experience of the Frontend Cloud"
10        variant="simple"
11        width={196}
12      />
13      <Book
14        color="#9D2127"
15        title="How Vercel improves your website's search engine ranking"
16        enableTexture={true}
17      />
18      <Book
19        color="#7DC1C1"
20        textColor="white"
21        title="Design Engineering at Vercel"
22        variant="simple"
23        enableTexture={true}
24      />
25      <Book color="#FED954" title="The user experience of the Frontend Cloud" />
26      <Book
27        illustration={
28          <svg
29            fill="none"
30            height="149"
31            viewBox="0 0 197 149"
32            width="197"
33            xmlns="http://www.w3.org/2000/svg"
34          >
35            <rect fill="#FED954" height="149" width="197" />
36            <path
37              d="M147 48.4995H172C185.531 48.4995 196.5 59.4685 196.5 72.9995V148.427"
38              stroke="#ECAF14"
39            />
40            <path
41              d="M0 48.5H24.5C38.031 48.5 49 37.531 49 24V0"
42              stroke="#ECAF14"
43            />
44            <path
45              d="M147.5 48.5H172C185.531 48.5 196.5 37.531 196.5 24V0"
46              stroke="#ECAF14"
47            />
48            <path
49              d="M0 48.5H24.5C38.031 48.5 49 59.469 49 73V98"
50              stroke="#ECAF14"
51            />
52            <path
53              d="M146 48.5H73.5C59.969 48.5 49 37.531 49 24V0"
54              stroke="#ECAF14"
55            />
56            <path
57              d="M196 48.5H122.5C108.969 48.5 98 37.531 98 24V0"
58              stroke="#ECAF14"
59            />
60            <path
61              d="M97 48.5H73.5C59.969 48.5 49 59.469 49 73V99.5"
62              stroke="#ECAF14"
63            />
64            <path
65              d="M98 132.5H122.5C136.031 132.5 147 121.531 147 108V98.9512"
66              stroke="#ECAF14"
67            />
68            <path
69              d="M196 132.5H171.5C157.969 132.5 147 121.531 147 108V48.5"
70              stroke="#ECAF14"
71            />
72            <path
73              d="M147 48.5H122.5C108.969 48.5 98 59.469 98 73V132"
74              stroke="#ECAF14"
75            />
76            <path
77              d="M98 132.5H73.5C59.969 132.5 49 121.531 49 108V98.9512"
78// … truncated