Perspective Book

1"use client";
2 
3import React from "react";
4import { cn } from "@/lib/utils";
5 
6const sizeMap = {
7  sm: { width: "150px", spineTranslation: "122px" },
8  default: { width: "196px", spineTranslation: "168px" },
9  lg: { width: "300px", spineTranslation: "272px" },
10};
11 
12interface PerspectiveBookProps {
13  size?: "sm" | "default" | "lg";
14  className?: string;
15  children: React.ReactNode;
16  textured?: boolean;
17}
18 
19export function PerspectiveBook({
20  size = "default",
21  className = "",
22  children,
23  textured = false,
24}: PerspectiveBookProps) {
25  const defaultColorClasses =
26    'bg-neutral-100 dark:bg-[#1f1f1f] dark:before:content-[""] dark:before:bg-gradient-to-b dark:before:from-[#ffffff1a] dark:before:to-transparent dark:before:absolute dark:before:inset-0 dark:before:rounded-[inherit] text-primary';
27 
28  return (
29    <div
30      className={`z-10 group [perspective:900px] w-min h-min`}
31    >
32      <div
33        style={{
34          width: sizeMap[size].width,
35          borderRadius: "6px 4px 4px 6px",
36        }}
37        className={`transition-transform duration-300 ease-out relative [transform-style:preserve-3d] [transform:rotateY(0deg)] group-hover:[transform:rotateY(-20deg)] group-hover:scale-[1.066] group-hover:-translate-x-1 aspect-[49/60]`}
38      >
39        {/* Front Side */}
40        <div
41          className={cn(
42            `absolute inset-y-0 overflow-hidden size-full left-0 flex flex-col p-[12%] after:content-[''] after:absolute after:inset-0 after:shadow-[0_1.8px_3.6px_#0000000d,_0_10.8px_21.6px_#00000014,_inset_0_-.9px_#0000001a,_inset_0_1.8px_1.8px_#ffffff1a,_inset_3.6px_0_3.6px_#0000001a] after:pointer-events-none after:rounded-[inherit] after:border-[#00000014] after:border after:border-solid`,
43            className || defaultColorClasses,
44          )}
45          style={{
46            transform: "translateZ(25px)",
47            borderRadius: "6px 4px 4px 6px",
48          }}
49        >
50          <div
51            className="absolute left-0 top-0 h-full opacity-40"
52            style={{
53              minWidth: "8.2%",
54              background:
55                "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)",
56// … truncated