{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "release-row", "title": "Release Row", "author": "AniBT ", "description": "AniBT release row: a die-cut cover, the full title over the publisher, episode and three coloured tags, then size, swarm and age columns and always-visible icon squares; wide, stacked and compact forms by container width.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "@anibt/theme", "@anibt/badge", "@anibt/button", "@anibt/tooltip" ], "files": [ { "path": "registry/anibt/blocks/release-row/release-row.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowDownIcon, ArrowUpIcon, CheckIcon, DownloadIcon, MagnetIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/registry/anibt/ui/badge\"\nimport { Button } from \"@/registry/anibt/ui/button\"\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/registry/anibt/ui/tooltip\"\n\n/**\n * ReleaseRow — one release as one row (AniBT 「贴纸手账」, after anibt.net's\n * 最新资源 list).\n *\n * **Wide form** — when its `ReleaseRowList` is at least 760px wide (a\n * container query, so a row in a narrow column keeps the phone form): a 40×56\n * cover with the die-cut rim that tips under the pointer, the title over the\n * facts, then size, swarm and age as three columns a reader scans down, then\n * the 32px icon squares. The title wraps in full and is never cut — the\n * release name is what a reader picks a version by.\n *\n * **The facts line** opens with the publisher in pink, then 第 N 集 and at most\n * three coloured tags — resolution (blue), the languages folded into one pink\n * tag, the subtitle type (neutral) — then the remaining specs as plain muted\n * text from 768px up.\n *\n * **Phone form** (narrower lists, and `form=\"stacked\"` at every width): the\n * cover beside the title and facts, then one line of figures with 40px squares\n * (44px targets) at its end. **Compact** (`form=\"compact\"`): no cover, no\n * publisher, the title on one line from 1024, size over age in a 92px column.\n *\n * The title link (`href`, or `link={}`) is stretched over the\n * row, so the whole row opens the release; the publisher link and the action\n * squares sit above it. Everything is a prop — the row fetches and formats\n * nothing: pass `fileSize=\"1.21 GB\"`, `time=\"今天 18:08\"` with its ISO\n * `dateTime`, and the swarm figures (`null` is \"not measured\" and prints a\n * dash, never a zero).\n */\n\ntype ReleaseRowLinkElement = React.ReactElement<{ className?: string; children?: React.ReactNode }>\n\ntype ReleaseRowPublisher = {\n name: string\n href?: string\n link?: ReleaseRowLinkElement\n}\n\ntype ReleaseRowCover = {\n src: string\n srcSet?: string\n alt?: string\n}\n\ntype ReleaseRowProps = Omit, \"title\"> & {\n title: React.ReactNode\n /** The full title for the browser tooltip; defaults to `title` when it is a string. */\n titleTooltip?: string\n /** `lang` of the title (`ja` for a Japanese release name). */\n titleLang?: string\n /** Opens the release; stretched over the whole row. */\n href?: string\n /** A router link element instead of `href`. */\n link?: ReleaseRowLinkElement\n /** The anime's cover (shown at 40×56; give a ≥120w source for 3× screens). */\n cover?: string | ReleaseRowCover | null\n /** Above the fold: load the cover eagerly. */\n priority?: boolean\n publisher?: string | ReleaseRowPublisher | null\n /** A category tag in front of the episode (合集, 剧场版…). */\n category?: React.ReactNode\n /** 第 12 集, in the round face. */\n episode?: React.ReactNode\n /** The blue tag: 1080p, 2160p. */\n resolution?: string\n /** Folded into one pink tag: 简中·繁中. */\n languages?: string[]\n /** The neutral tag: 内封字幕, 内嵌字幕. */\n subtitleType?: string\n /** Everything else, printed as plain muted text from 768px: AVC · WEB-DL · AAC · MKV. */\n specs?: string[]\n /** Pre-formatted size: 1.21 GB. */\n fileSize?: string\n /** Seeders; `null` / leaving it out prints a dash. */\n seeders?: number | null\n leechers?: number | null\n /** Pre-formatted age: 今天 18:08, 3 小时前. */\n time?: React.ReactNode\n /** ISO date of `time`, for `