diff --git a/frontend/routes/components.tsx b/frontend/routes/components.tsx new file mode 100644 index 000000000..fe8ca5052 --- /dev/null +++ b/frontend/routes/components.tsx @@ -0,0 +1,369 @@ +// Copyright 2024 the JSR authors. All rights reserved. MIT license. +import type { RuntimeCompat } from "../utils/api_types.ts"; +import { define } from "../util.ts"; +import { Card } from "../components/Card.tsx"; +import { Nav, NavItem } from "../components/Nav.tsx"; +import { Table, TableData, TableRow } from "../components/Table.tsx"; +import { ListDisplay } from "../components/List.tsx"; +import type { ListDisplayItem } from "../components/List.tsx"; +import { ListPanel } from "../components/ListPanel.tsx"; +import type { PanelEntry } from "../components/ListPanel.tsx"; +import { Tooltip } from "../components/Tooltip.tsx"; +import { Logo } from "../components/Logo.tsx"; +import { RuntimeCompatIndicator } from "../components/RuntimeCompatIndicator.tsx"; +import { QuotaCard } from "../components/QuotaCard.tsx"; +import { CopyButton } from "../islands/CopyButton.tsx"; + +function Section( + { title, description, children }: { + title: string; + description: string; + children: preact.ComponentChildren; + }, +) { + return ( +
+

{title}

+

{description}

+
{children}
+
+ ); +} + +export default define.page(function Components({ url }) { + const listItems: ListDisplayItem[] = [ + { href: "#", content: First item in the list }, + { href: "#", content: Second item in the list }, + { href: "#", content: Third item in the list }, + ]; + + const panelEntries: PanelEntry[] = [ + { value: "1.0.0", href: "#", label: "latest" }, + { value: "0.9.0", href: "#" }, + { value: "0.8.0", href: "#" }, + { value: "0.7.0", href: "#" }, + ]; + + const compatFull: RuntimeCompat = { + browser: true, + deno: true, + node: true, + workerd: true, + bun: true, + }; + const compatPartial: RuntimeCompat = { + deno: true, + node: true, + }; + const compatUnknown: RuntimeCompat = {}; + + const columns = [ + { title: "Name" }, + { title: "Version" }, + { title: "Score", align: "right" as const }, + ]; + + return ( +
+
+

Component Library

+

+ Visual reference of reusable UI components used across JSR. +

+
+ + {/* ── CSS Components ──────────────────────────────── */} + +
+

CSS Components

+ +
+
+ + + + + + +
+
+ +
+
+ chip + + chip yellow + + chip red + + big-chip + + + big-chip yellow + +
+
+ +
+
+ Standard link + Header link +
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ + {/* ── Preact Components ───────────────────────────── */} + +
+

Components

+ +
+
+
+ {(["cyan", "gray", "red", "blue", "green", "orange"] as const) + .map((variant) => ( + +

{variant}

+

Unfilled card

+ + ))} +
+
+ {(["cyan", "gray", "red", "blue", "green", "orange"] as const) + .map((variant) => ( + +

{variant} filled

+

Filled card

+ + ))} +
+
+ +

Interactive (link)

+

Has hover styles

+ + +

Static

+

No hover styles

+ +
+
+
+ +
+ +
+ +
+ + + @std/fs + 1.0.0 + 98 + + + @std/path + 0.224.0 + 95 + + + @oak/oak + 16.1.0 + 87 + +
+
+ +
+ {listItems} +
+ +
+
+ + {panelEntries} + +
+
+ +
+
+ + Hover me + +
+
+ +
+
+ + + +
+
+ +
+
+
+ All runtimes: + +
+
+ Partial: + +
+
+ Unknown: + +
+
+ Compact: + +
+
+
+ +
+
+ + + + +
+
+ +
+
+ + deno add @std/fs + + +
+
+
+
+ ); +}); + +export const handler = define.handlers({ + GET(ctx) { + ctx.state.meta = { + title: "Component Library", + description: "Visual reference of reusable UI components", + }; + return { data: {} }; + }, +});