"use client";
import { useId } from "react";
/*
* Side Folder – a glassy folder turned on its side, in a single self-contained file.
* Three documents peek out to the right from behind a frosted front pocket with a tab on its edge.
* Hover the folder: the pocket swings forward and every document slides out on its own.
* The artwork scales with its container and keeps a 3 : 2 frame.
*/
export type SideFolderProps = {
className?: string;
/** Accessible description of the scene */
label?: string;
};
/* Front pocket on a 380 × 520 grid: a narrow top part and a wider tab towards the bottom */
const FRONT =
"M40 0H290Q330 0 330 40V318Q330 338 344 348L364 362Q380 372 380 396V480Q380 520 340 520H40Q0 520 0 480V40Q0 0 40 0Z";
const LINES = [78, 180, 140, 175, 126, 168, 110];
/* A mask (unlike clip-path: url()) also cuts the frosted blur to the pocket shape, and scales with the box */
const MASK = `url("data:image/svg+xml,${encodeURIComponent(
``,
)}") 0 0 / 100% 100% no-repeat`;
export function SideFolder({
className,
label = "Blue folder on its side, with three documents peeking out behind a frosted front pocket",
}: SideFolderProps) {
const id = "ui-sf" + useId().replace(/[^a-zA-Z0-9_-]/g, "");
return (
{/* React 19 hoists this into once, no matter how many instances render */}
{/* Back of the folder */}
{/* Documents – each one slides out on its own */}
{/* Frosted front pocket */}