Pocket Folio

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/pocket-folio.tsx.

Install the pastetaste component "Pocket Folio" (pocket-folio) into this Next.js project and use it.

What it is: A collection tile drawn as a folder with a name tab: hover lifts the latest prints out of the pocket, press fans them open, drag something over and the pocket gapes with a slot; new prints drop in and the counts roll.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/pocket-folio.json
   (it writes components/pastetaste/pocket-folio.tsx and its pastetaste dependencies: digit-roll; install any npm packages it reports: motion@^12.23.0).
2. Import it: import { PocketFolio } from "@/components/pastetaste/pocket-folio" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- title / subtitle: ReactNode — Name on the tab and the line under it.
- cover: string — Image URL for the lining, the strip above the pocket.
- lining: string = warm wash — CSS background for the lining when there is no cover.
- sheets: (string | { src, alt?, key? })[] = [] — Prints in the pocket, newest first; the first three lift out. Prepend one and it drops in from above.
- count / countLabel / countDigits: number / ReactNode / number = — / — / 2 — Big rolling number bottom left, zero-padded (04 Tags).
- total / totalLabel: number / ReactNode — Rolling number bottom right (1012 Shots).
- open / defaultOpen / onOpenChange: boolean / boolean / (open) => void = — / false / — — Open fans the prints out and sets aria-expanded. Press toggles it, Esc closes.
- onPress: (event) => void — Runs before the toggle; call event.preventDefault() to use the press for something else (e.g. filing a picked item).
- href: string — Render as a link: hover and focus still lift the prints, press navigates.
- onDropItem / dropType: (data, event) => void / string = — / 'text/plain' — Makes the tile a drop target for drags carrying dropType; the pocket gapes while one is over it.
- receiving: boolean = false — Ready-to-take pose for a pick-then-file flow or while a drag is in progress anywhere; hover or focus then opens the slot.
- ratio: number = 1 — Width / height of the tile; it fills its container's width.
- tone: 'dark' | 'light' = 'dark' — Dark pocket on a black back, or a light pocket on a stone back.
- accent: string = #e8692c — Focus ring, drop slot and the colour digits take while they roll.

Live preview: https://pastetaste.com/c/pocket-folio
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 14