| 1 | /** |
| 2 | * A release as the Releases page and its own page show it: when and of |
| 3 | * which tag and commit on the left, its title, notes and downloads on the |
| 4 | * right; one above the other on a phone. |
| 5 | */ |
| 6 | import { FileArchive, GitCommitHorizontal, Tag as TagIcon } from "lucide-react"; |
| 7 | import { Link } from "react-router"; |
| 8 | |
| 9 | import type { Release, RepoPath } from "@g1t/contracts"; |
| 10 | |
| 11 | import { Markdown } from "./markdown"; |
| 12 | import { TimeAgo } from "./ui"; |
| 13 | import { Badge } from "./ui/badge"; |
| 14 | import { Card } from "./ui/card"; |
| 15 | import { UserCard } from "./user-card"; |
| 16 | |
| 17 | export function encodeTag(tag: string): string { |
| 18 | return tag.split("/").map(encodeURIComponent).join("/"); |
| 19 | } |
| 20 | |
| 21 | export function ReleaseCard({ release, repo, linkTitle = true }: { release: Release; repo: RepoPath; linkTitle?: boolean }) { |
| 22 | const base = `/${repo.namespace}/${repo.name}`; |
| 23 | const title = release.name || release.tagName; |
| 24 | const when = release.publishedAt ?? release.createdAt; |
| 25 | return ( |
| 26 | <article className="grid gap-4 md:grid-cols-[10rem_minmax(0,1fr)] md:gap-6"> |
| 27 | <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 text-sm text-muted md:flex-col md:items-start md:pt-4"> |
| 28 | <span className="text-faint"> |
| 29 | <TimeAgo at={when} /> |
| 30 | </span> |
| 31 | <Link to={`${base}/tree/${encodeTag(release.tagName)}`} className="inline-flex min-w-0 items-center gap-1.5 font-mono text-[0.8125rem] hover:text-accent"> |
| 32 | <TagIcon size={14} className="shrink-0 text-faint" /> |
| 33 | <span className="truncate">{release.tagName}</span> |
| 34 | </Link> |
| 35 | <Link to={`${base}/commit/${release.target}`} className="inline-flex items-center gap-1.5 font-mono text-[0.8125rem] hover:text-accent"> |
| 36 | <GitCommitHorizontal size={14} className="shrink-0 text-faint" /> |
| 37 | {release.target.slice(0, 7)} |
| 38 | </Link> |
| 39 | </div> |
| 40 | <Card className="min-w-0 overflow-hidden"> |
| 41 | <div className="border-b border-line px-5 py-4"> |
| 42 | <div className="flex flex-wrap items-center gap-2"> |
| 43 | <h3 className="min-w-0 text-xl font-semibold tracking-tight break-words"> |
| 44 | {linkTitle ? ( |
| 45 | <Link to={`${base}/releases/tag/${encodeTag(release.tagName)}`} className="hover:text-accent hover:underline"> |
| 46 | {title} |
| 47 | </Link> |
| 48 | ) : ( |
| 49 | title |
| 50 | )} |
| 51 | </h3> |
| 52 | {release.latest && <Badge size="md">Latest</Badge>} |
| 53 | {release.prerelease && <Badge size="md">Pre-release</Badge>} |
| 54 | {release.draft && <Badge size="md">Draft</Badge>} |
| 55 | </div> |
| 56 | {release.author && ( |
| 57 | <p className="mt-1 text-xs text-faint"> |
| 58 | <UserCard username={release.author}> |
| 59 | <Link to={`/u/${release.author}`} className="font-medium text-muted hover:text-accent"> |
| 60 | {release.author} |
| 61 | </Link> |
| 62 | </UserCard>{" "} |
| 63 | {release.draft ? "drafted this" : "released this"} <TimeAgo at={when} /> |
| 64 | </p> |
| 65 | )} |
| 66 | </div> |
| 67 | <div className="px-5 py-4"> |
| 68 | {release.body.trim() ? ( |
| 69 | <Markdown |
| 70 | source={release.body} |
| 71 | repo={repo} |
| 72 | base={`${base}/blob/${encodeTag(release.tagName)}`} |
| 73 | rawBase={`${base}/raw/${encodeURIComponent(release.tagName)}`} |
| 74 | /> |
| 75 | ) : ( |
| 76 | <p className="text-sm text-faint">No notes.</p> |
| 77 | )} |
| 78 | </div> |
| 79 | <div className="border-t border-line px-5 py-3"> |
| 80 | <h4 className="mb-2 text-xs font-medium tracking-wide text-faint uppercase">Downloads</h4> |
| 81 | <a |
| 82 | href={`${base}/archive/${encodeTag(release.tagName)}.zip`} |
| 83 | download |
| 84 | className="inline-flex items-center gap-2 text-sm text-muted hover:text-accent" |
| 85 | > |
| 86 | <FileArchive size={14} className="text-faint" /> |
| 87 | Source code (zip) |
| 88 | </a> |
| 89 | </div> |
| 90 | </Card> |
| 91 | </article> |
| 92 | ); |
| 93 | } |