Folder Component

1"use client";
2 
3import React, { useState } from "react";
4import { motion } from "motion/react";
5import { cn } from "@/lib/utils";
6 
7const themes = {
8  black: {
9    backFill: "black",
10    backInsetColor: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.37 0",
11    backInsetShadow: "inset 0 0 6px 2px rgba(255,255,255,0.37)",
12    flapFill: "#292929",
13    flapFillOpacity: 0.25,
14    flapStroke: "#979797",
15    flapInsetColor: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0",
16    cardFill: "#F1F1F1",
17    cardStroke: "#E0E0E0",
18    cardLineFill: "#D4D4D4",
19    cardInsetColor: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0",
20  },
21  white: {
22    backFill: "#ffffff",
23    backInsetColor: "0 0 0 0 0.7 0 0 0 0 0.7 0 0 0 0 0.7 0 0 0 0.25 0",
24    backInsetShadow: "inset 0 0 6px 2px rgba(178,178,178,0.25)",
25    flapFill: "#f5f5f5",
26    flapFillOpacity: 0.85,
27    flapStroke: "#d4d4d4",
28    flapInsetColor: "0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0.15 0",
29    cardFill: "#262626",
30    cardStroke: "#404040",
31    cardLineFill: "#737373",
32    cardInsetColor: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.15 0",
33  },
34  blue: {
35    backFill: "#50B1FD",
36    backInsetColor: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0",
37    backInsetShadow: "inset 0 0 6px 2px rgba(255,255,255,0.35)",
38    flapFill: "#3a9ae8",
39    flapFillOpacity: 0.45,
40    flapStroke: "#7ec8ff",
41    flapInsetColor: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.12 0",
42    cardFill: "#F1F1F1",
43    cardStroke: "#E0E0E0",
44    cardLineFill: "#D4D4D4",
45    cardInsetColor: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0",
46  },
47} as const;
48 
49const sizeScales = {
50  sm: 0.65,
51  md: 1,
52  lg: 1.35,
53} as const;
54 
55type FolderComponentProps = Omit<React.ComponentProps<"div">, "color"> & {
56  color?: "black" | "white" | "blue";
57  size?: "sm" | "md" | "lg";
58};
59 
60const BASE_WIDTH = 321;
61const BASE_HEIGHT = 270;
62 
63const FLAP_PATH =
64  "M0 25C0 11.1929 11.1929 0 25 0H136.084C143.044 0 149.689 2.90139 154.42 8.00608L178.08 33.5343C182.811 38.639 189.456 41.5404 196.416 41.5404H296C309.807 41.5404 321 52.7333 321 66.5404V216C321 229.807 309.807 241 296 241H25C11.1929 241 0 229.807 0 216V25Z";
65 
66const FolderComponent = ({
67  color = "black",
68  size = "md",
69  className,
70  ...props
71}: FolderComponentProps) => {
72  const theme = themes[color] ?? themes.black;
73  const scale = sizeScales[size];
74  const [isHovered, setIsHovered] = useState(false);
75  const [isOpen, setIsOpen] = useState(false);
76 
77  return (
78    <div
79      data-slot="folder"
80      className={cn(
81// … truncated