Skip to content
Sign up

flagon-io/g1t

public
0
125 linesCodeBlameRaw
1/**
2 * Pieces Docs' pages share: a page card, a space card, a face for a
3 * person or an agent, a page's breadcrumbs, the template gallery.
4 */
5import type { DocPage, DocSpace, DocTemplate, MemberProfile } from "@g1t/contracts";
6import { ChevronRight, Lock, Users } from "lucide-react";
7import type { ReactNode } from "react";
8import { Link } from "react-router";
9
10import { coverStyle } from "../../lib/docs";
11import { AgentAvatar } from "../agent-avatar";
12import { Avatar, TimeAgo } from "../ui";
13import { Hint } from "../ui/hint";
14import { PageIcon, SpaceIcon } from "./sidebar";
15
16export function Face({ who, size = 20 }: { who: Pick<MemberProfile, "kind" | "id" | "name" | "avatar" | "avatar_seed">; size?: number }) {
17 if (who.kind === "agent") return <AgentAvatar agent={{ id: who.id, handle: who.name, avatar: who.avatar, avatar_seed: who.avatar_seed ?? null }} size={size} />;
18 return <Avatar name={who.name} image={who.avatar} size={size} />;
19}
20
21export function Faces({ people, size = 22, max = 4 }: { people: MemberProfile[]; size?: number; max?: number }) {
22 const shown = people.slice(0, max);
23 return (
24 <span className="flex items-center -space-x-1.5">
25 {shown.map((p) => (
26 <Hint key={`${p.kind}:${p.id}`} label={p.display_name}>
27 <span className="rounded-full ring-2 ring-bg">
28 <Face who={p} size={size} />
29 </span>
30 </Hint>
31 ))}
32 {people.length > max && <span className="ml-2 text-xs text-faint">+{people.length - max}</span>}
33 </span>
34 );
35}
36
37export function PageCard({ page, space }: { page: DocPage; space?: Pick<DocSpace, "name"> | null }) {
38 const cover = coverStyle(page.cover);
39 return (
40 <Link to={page.path} prefetch="intent" className="group flex flex-col overflow-hidden rounded-xl border border-line bg-surface transition-colors hover:border-line-strong">
41 <div className="h-14 shrink-0 border-b border-line" style={{ background: cover ?? "linear-gradient(120deg, color-mix(in srgb, var(--g1t-accent) 10%, var(--g1t-surface)), var(--g1t-surface))" }} />
42 <div className="-mt-5 flex min-h-0 grow flex-col px-4 pb-3.5">
43 <span className="flex size-9 items-center justify-center rounded-lg border border-line bg-bg text-lg">
44 <PageIcon icon={page.icon} size={18} />
45 </span>
46 <span className="mt-2 flex items-center gap-2">
47 <span className="line-clamp-1 min-w-0 text-sm font-medium text-fg group-hover:text-accent">{page.title || "Untitled"}</span>
48 {page.stale && <span className="shrink-0 rounded-full bg-warn/12 px-1.5 py-px text-[0.625rem] font-medium text-warn">Possibly stale</span>}
49 </span>
50 <span className="mt-1 line-clamp-2 min-h-[2.5em] text-xs leading-relaxed text-muted">{page.excerpt || "Nothing written yet."}</span>
51 <span className="mt-3 flex items-center gap-1.5 text-[0.6875rem] text-faint">
52 {page.updated_by && <Face who={page.updated_by} size={14} />}
53 <span className="truncate">
54 {space ? `${space.name} · ` : ""}
55 <TimeAgo at={page.updated_at} />
56 </span>
57 </span>
58 </div>
59 </Link>
60 );
61}
62
63export function SpaceCard({ slug, space }: { slug: string; space: DocSpace }) {
64 return (
65 <Link to={`/${slug}/-/docs/${space.slug}`} prefetch="intent" className="group flex gap-3 rounded-xl border border-line bg-surface p-4 transition-colors hover:border-line-strong">
66 <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-raised text-lg">
67 <SpaceIcon space={space} size={18} />
68 </span>
69 <span className="min-w-0 grow">
70 <span className="flex items-center gap-1.5">
71 <span className="truncate text-sm font-medium text-fg group-hover:text-accent">{space.name}</span>
72 {space.kind === "private" && <Lock size={12} className="shrink-0 text-faint" aria-label="Private" />}
73 {space.kind === "team" && <Users size={12} className="shrink-0 text-faint" aria-label="Team space" />}
74 </span>
75 <span className="mt-0.5 line-clamp-2 text-xs leading-relaxed text-muted">{space.description || "No description."}</span>
76 <span className="mt-2 block text-[0.6875rem] text-faint">
77 {space.page_count} {space.page_count === 1 ? "page" : "pages"}
78 {space.projects.length > 0 && ` · ${space.projects.join(", ")}`}
79 </span>
80 </span>
81 </Link>
82 );
83}
84
85export function TemplateCard({ template, action }: { template: DocTemplate; action: ReactNode }) {
86 return (
87 <div className="flex flex-col rounded-xl border border-line bg-surface p-4">
88 <span className="text-2xl leading-none" aria-hidden="true">
89 {template.icon}
90 </span>
91 <span className="mt-3 text-sm font-medium">{template.name}</span>
92 <span className="mt-1 grow text-xs leading-relaxed text-muted">{template.description || (template.builtin ? "" : "Saved by your workspace.")}</span>
93 <div className="mt-3 flex items-center gap-2">{action}</div>
94 </div>
95 );
96}
97
98export function Crumbs({ items }: { items: { label: ReactNode; to?: string }[] }) {
99 return (
100 <nav aria-label="Breadcrumbs" className="flex min-w-0 flex-wrap items-center gap-1 text-xs text-faint">
101 {items.map((item, i) => (
102 <span key={i} className="flex min-w-0 items-center gap-1">
103 {i > 0 && <ChevronRight size={12} className="shrink-0" aria-hidden="true" />}
104 {item.to ? (
105 <Link to={item.to} prefetch="intent" className="truncate hover:text-fg">
106 {item.label}
107 </Link>
108 ) : (
109 <span className="truncate text-muted">{item.label}</span>
110 )}
111 </span>
112 ))}
113 </nav>
114 );
115}
116
117/** A heading for a section of a Docs page. */
118export function SectionTitle({ children, action }: { children: ReactNode; action?: ReactNode }) {
119 return (
120 <div className="mb-3 flex items-center justify-between gap-3">
121 <h2 className="text-sm font-semibold text-fg">{children}</h2>
122 {action}
123 </div>
124 );
125}