g1t/apps/web/app/components/releases.tsx
| 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 { Pill, TimeAgo } from "./ui"; |
| 13 | |
| 14 | export function encodeTag(tag: string): string { |
| 15 | return tag.split("/").map(encodeURIComponent).join("/"); |
| 16 | } |
| 17 | |
| 18 | export function ReleaseCard({ release, repo, linkTitle = true }: { release: Release; repo: RepoPath; linkTitle?: boolean }) { |
| 19 | const base = `/${repo.namespace}/${repo.name}`; |
| 20 | const title = release.name || release.tagName; |
| 21 | const when = release.publishedAt ?? release.createdAt; |
| 22 | return ( |
| 23 | <article className="grid gap-4 md:grid-cols-[10rem_minmax(0,1fr)] md:gap-6"> |
| 24 | <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"> |
| 25 | <span className="text-faint"> |
| 26 | <TimeAgo at={when} /> |
| 27 | </span> |
| 28 | <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"> |
| 29 | <TagIcon size={14} className="shrink-0 text-faint" /> |
| 30 | <span className="truncate">{release.tagName}</span> |
| 31 | </Link> |
| 32 | <Link to={`${base}/commit/${release.target}`} className="inline-flex items-center gap-1.5 font-mono text-[0.8125rem] hover:text-accent"> |
| 33 | <GitCommitHorizontal size={14} className="shrink-0 text-faint" /> |
| 34 | {release.target.slice(0, 7)} |
| 35 | </Link> |
| 36 | </div> |
| 37 | <div className="min-w-0 overflow-hidden rounded-xl border border-line bg-surface"> |
| 38 | <div className="border-b border-line px-5 py-4"> |
| 39 | <div className="flex flex-wrap items-center gap-2"> |
| 40 | <h3 className="min-w-0 text-xl font-semibold tracking-tight break-words"> |
| 41 | {linkTitle ? ( |
| 42 | <Link to={`${base}/releases/tag/${encodeTag(release.tagName)}`} className="hover:text-accent hover:underline"> |
| 43 | {title} |
| 44 | </Link> |
| 45 | ) : ( |
| 46 | title |
| 47 | )} |
| 48 | </h3> |
| 49 | {release.latest && <Pill>Latest</Pill>} |
| 50 | {release.prerelease && <Pill>Pre-release</Pill>} |
| 51 | {release.draft && <Pill>Draft</Pill>} |
| 52 | </div> |
| 53 | {release.author && ( |
| 54 | <p className="mt-1 text-xs text-faint"> |
| 55 | <Link to={`/u/${release.author}`} className="font-medium text-muted hover:text-accent"> |
| 56 | {release.author} |
| 57 | </Link>{" "} |
| 58 | {release.draft ? "drafted this" : "released this"} <TimeAgo at={when} /> |
| 59 | </p> |
| 60 | )} |
| 61 | </div> |
| 62 | <div className="px-5 py-4"> |
| 63 | {release.body.trim() ? ( |
| 64 | <Markdown source={release.body} repo={repo} base={`${base}/blob/${encodeTag(release.tagName)}`} /> |
| 65 | ) : ( |
| 66 | <p className="text-sm text-faint">No notes.</p> |
| 67 | )} |
| 68 | </div> |
| 69 | <div className="border-t border-line px-5 py-3"> |
| 70 | <h4 className="mb-2 text-xs font-medium tracking-wide text-faint uppercase">Downloads</h4> |
| 71 | <a |
| 72 | href={`${base}/archive/${encodeTag(release.tagName)}.zip`} |
| 73 | download |
| 74 | className="inline-flex items-center gap-2 text-sm text-muted hover:text-accent" |
| 75 | > |
| 76 | <FileArchive size={14} className="text-faint" /> |
| 77 | Source code (zip) |
| 78 | </a> |
| 79 | </div> |
| 80 | </div> |
| 81 | </article> |
| 82 | ); |
| 83 | } |