{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "poster-card", "title": "Poster Card", "author": "AniBT ", "description": "AniBT collectible poster card: a 2:3 cover in a glossy sleeve with a sheen on hover, a tilted airtime sticker, corner badges and a subscribe key; fixed height with a two-line title; srcSet / sizes for sharp covers; PosterGrid, rating, status and skeleton.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "@anibt/theme" ], "files": [ { "path": "registry/anibt/blocks/poster-card/poster-card.tsx", "content": "import * as React from \"react\"\nimport { StarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * PosterCard — the AniBT 「贴纸手账」 collectible card: one show on a poster\n * wall (a timetable, a season, search results, a group's works).\n *\n * A paper face with the panel edge and 4px round a 2:3 cover. The cover sits\n * in a sleeve — a gloss across its top-left and a faint rim — and a sheen runs\n * across it under the pointer while the whole card lifts 4px and tips −0.6°.\n * A die-cut `sticker` (the airtime) is stuck on the cover's corner; corner\n * `badges` are square paper stickers; `coverAction` is the subscribe key in\n * the bottom-right corner.\n *\n * **Fixed height.** The title is at most two lines and always reserves two;\n * the full title rides in `title=`. The subtitle is one line, reserved even\n * when empty, and dropped on a narrow card; meta and status sit at the foot.\n * Every card in a row is the same height whatever it holds.\n *\n * **Sharp covers.** Pass `src` plus `srcSet` with real widths; the browser\n * picks from `sizes` × the device pixel ratio, so a 180px card on a 3× phone\n * wants a 540w source. `sizes` defaults to `POSTER_SIZES`, which matches\n * `PosterGrid`'s 3 / 4 / 6 / 8 columns — a card outside `PosterGrid` passes\n * its own. `posterSrcSet` builds the list from a\n * URL-per-width function. Or pass your own element (`next/image`) as `image`.\n *\n * **Links.** `href` (or `link={}` for a router) makes the\n * title a link stretched over the whole card, so the card opens the show\n * while `coverAction` stays a separate control above it.\n *\n * `tone=\"next\" | \"airing\"` is the blue card (time is blue in A); `selected`\n * puts the pink ring on the open card.\n */\n\n/** `sizes` for a cover in `PosterGrid` (3 / 4 / 6 / 8 columns). */\nconst POSTER_SIZES = \"(min-width: 1440px) 176px, (min-width: 1024px) 17vw, (min-width: 600px) 25vw, 33vw\"\n\n/**\n * A `srcSet` from a URL-per-width function:\n * `posterSrcSet((w) => \\`/covers/42.webp?w=${w}\\`)` →\n * `/covers/42.webp?w=200 200w, …, /covers/42.webp?w=900 900w`.\n * The default widths cover a 3× phone and a 2× desktop wall.\n */\nfunction posterSrcSet(urlForWidth: (width: number) => string, widths: readonly number[] = [200, 300, 400, 600, 900]) {\n return widths.map((width) => `${urlForWidth(width)} ${width}w`).join(\", \")\n}\n\ntype PosterCardProps = Omit, \"title\"> & {\n /** Cover URL. */\n src?: string\n /** Width descriptors (`… 400w, … 600w`); see `posterSrcSet`. */\n srcSet?: string\n /**\n * The card's CSS width. Defaults to `POSTER_SIZES` when `srcSet` is set,\n * which is right only inside `PosterGrid`: a card anywhere else needs its\n * own (`\"176px\"`), or a phone picks a source too small for a 3× screen.\n */\n sizes?: string\n /** The title already names the show, so the cover is decorative by default. */\n alt?: string\n /** Above the fold: load eagerly at high priority. */\n priority?: boolean\n /** Your own cover element instead of `src` (`next/image` with `fill`). */\n image?: React.ReactNode\n /** Under the cover: shows while it loads, and when it fails or is missing. */\n imageFallback?: React.ReactNode\n /** A die-cut sticker for the cover's top-left corner (the airtime). */\n sticker?: React.ReactNode\n /** `PosterCardBadge`s on the cover's top corners. */\n badges?: React.ReactNode\n /** A `PosterCardAction` in the cover's bottom-right corner. */\n coverAction?: React.ReactNode\n /** Anything over the whole cover (a \"no releases yet\" tag). */\n coverOverlay?: React.ReactNode\n title: React.ReactNode\n /** The full title for the browser tooltip; defaults to `title` when it is a string. */\n titleTooltip?: string\n /** The `lang` of the title (`ja` for a Japanese name). */\n titleLang?: string\n /** The alternate name: one line, muted. */\n subtitle?: React.ReactNode\n /** One row of facts that never wraps: episode, format, score. */\n meta?: React.ReactNode\n /** A `PosterCardStatus` under the facts. */\n status?: React.ReactNode\n /** Makes the card a link (stretched from the title). */\n href?: string\n /** A link element for a router (``); wins over `href`. */\n link?: React.ReactElement<{ className?: string; children?: React.ReactNode }>\n /** `next` / `airing` paint the blue card. */\n tone?: \"next\" | \"airing\"\n /** The open card on a wall that expands one. */\n selected?: boolean\n headingLevel?: \"h2\" | \"h3\" | \"h4\"\n titleClassName?: string\n /** Extra rows under the foot: a command row in a back office. */\n children?: React.ReactNode\n}\n\nfunction PosterCard({\n src,\n srcSet,\n sizes,\n alt = \"\",\n priority = false,\n image,\n imageFallback,\n sticker,\n badges,\n coverAction,\n coverOverlay,\n title,\n titleTooltip,\n titleLang,\n subtitle,\n meta,\n status,\n href,\n link,\n tone,\n selected = false,\n headingLevel: Heading = \"h3\",\n className,\n titleClassName,\n children,\n ...props\n}: PosterCardProps) {\n const tooltip = titleTooltip ?? (typeof title === \"string\" ? title : undefined)\n const stretched =\n \"outline-hidden after:absolute after:inset-0 after:z-20 after:rounded-[14px] after:content-[''] @max-[10rem]/poster:after:rounded-[12px]\"\n const linkedTitle = link\n ? React.cloneElement(link, { className: cn(stretched, link.props.className), children: title })\n : href\n ? (\n \n {title}\n \n )\n : title\n\n return (\n \n
\n \n {imageFallback ?? }\n {image ??\n (src ? (\n // eslint-disable-next-line @next/next/no-img-element -- a registry component: no framework image\n \n ) : null)}\n {badges}\n {coverOverlay}\n
\n {sticker ? (\n \n {sticker}\n \n ) : null}\n {coverAction}\n \n\n \n \n {linkedTitle}\n \n {/* Always drawn: an empty line still holds its height. */}\n \n {subtitle}\n

\n {meta || status ? (\n
\n {meta ? (\n
\n {meta}\n
\n ) : null}\n {status ?
{status}
: null}\n
\n ) : null}\n \n {children}\n \n )\n}\n\n/** The default cover placeholder: the sunk tone and a faint dot ground. */\nfunction PosterCardPlaceholder({ className }: { className?: string }) {\n return (\n \n )\n}\n\n/** A square paper sticker on a top corner of the cover: a format, a count. */\nfunction PosterCardBadge({\n corner = \"start\",\n className,\n ...props\n}: React.ComponentProps<\"span\"> & { corner?: \"start\" | \"end\" }) {\n return (\n svg]:size-3\",\n corner === \"end\" ? \"right-1.5\" : \"left-1.5\",\n // On a narrow cover two opposite badges no longer fit side by side:\n // the end one drops under the start one.\n corner === \"end\" &&\n \"@max-[8.75rem]/poster-cover:group-has-[[data-corner=start]]/cover:top-8 @max-[8.75rem]/poster-cover:group-has-[[data-corner=start]]/cover:right-auto @max-[8.75rem]/poster-cover:group-has-[[data-corner=start]]/cover:left-1.5\",\n className\n )}\n {...props}\n />\n )\n}\n\n/**\n * The key in the cover's bottom-right corner (subscribe, favourite): a 28px\n * paper square drawn inside a 40px target. `pressed` is the pink wash — not a\n * candy fill, so a wall of subscribed cards never becomes a wall of buttons.\n * Give it an `aria-label`.\n */\nfunction PosterCardAction({\n className,\n pressed,\n type = \"button\",\n ...props\n}: React.ComponentProps<\"button\"> & { pressed?: boolean }) {\n return (\n svg]:relative [&>svg]:size-3.5\",\n className\n )}\n {...props}\n />\n )\n}\n\n/** The 3px dot between two facts on the meta line. */\nfunction PosterCardSep({ className }: { className?: string }) {\n return \n}\n\n/** A score with A's pink star; `null` is an unrated show (a muted dash). */\nfunction PosterCardRating({ value, className, label = \"评分\" }: { value: number | null; className?: string; label?: string }) {\n const none = value === null\n return (\n \n \n {none ? \"–\" : value.toFixed(1)}\n \n )\n}\n\n/**\n * The status line: a dot and a word. `ok` mint (seeded), `run` / `next` blue\n * with a blinking dot (airing, next up), `wait` ink, `none` a hollow muted\n * dot. The word is required — the colour never speaks alone.\n */\nfunction PosterCardStatus({\n tone = \"wait\",\n className,\n children,\n ...props\n}: React.ComponentProps<\"span\"> & { tone?: \"ok\" | \"run\" | \"next\" | \"wait\" | \"none\" }) {\n return (\n \n {/* The word ellipsises on a narrow card; the dot never does. */}\n {children}\n \n )\n}\n\n/** A card-shaped placeholder of the same height, for a loading wall. */\nfunction PosterCardSkeleton({ className, meta = true }: { className?: string; meta?: boolean }) {\n return (\n \n
\n
\n
\n
\n {meta ?
: null}\n
\n
\n )\n}\n\n/**\n * The poster wall: 3 columns under 600px of its own width, 4 from 600, 6 from\n * 960, 8 from 1360 (a container query — the wall counts its own width, not\n * the window's). Equal 1fr tracks; a short row stays on the left. It also\n * gives each card's sticker its tilt, so a row reads as stuck on by hand.\n */\nfunction PosterGrid({ className, children, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n :nth-child(4n+1)]:[--anibt-poster-tilt:-4deg] [&>:nth-child(4n+2)]:[--anibt-poster-tilt:3deg] [&>:nth-child(4n+3)]:[--anibt-poster-tilt:-2deg] [&>:nth-child(4n+4)]:[--anibt-poster-tilt:4deg]\",\n className\n )}\n {...props}\n >\n {children}\n
\n
\n )\n}\n\nexport {\n PosterCard,\n PosterCardAction,\n PosterCardBadge,\n PosterCardPlaceholder,\n PosterCardRating,\n PosterCardSep,\n PosterCardSkeleton,\n PosterCardStatus,\n PosterGrid,\n POSTER_SIZES,\n posterSrcSet,\n}\nexport type { PosterCardProps }\n", "type": "registry:component" } ], "categories": [ "blocks", "display" ], "type": "registry:block" }