Prettier format pending files

This commit is contained in:
Builder.io 2025-10-18 22:41:08 +00:00
parent aae5be1746
commit 5336bcf0c2
2 changed files with 198 additions and 49 deletions

View file

@ -1,7 +1,24 @@
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import {
Card,
CardContent,
CardHeader,
CardTitle,
CardDescription,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Database, Globe, Layers, Network, Route, ServerCog, ShieldCheck, Spline, Users, Workflow } from "lucide-react"; import {
Database,
Globe,
Layers,
Network,
Route,
ServerCog,
ShieldCheck,
Spline,
Users,
Workflow,
} from "lucide-react";
type Node = { type Node = {
id: string; id: string;
@ -13,25 +30,91 @@ type Node = {
const NODES: Node[] = [ const NODES: Node[] = [
// Entry/realms // Entry/realms
{ id: "realms", label: "Realms", subtitle: "GD / Consulting / Community / Get Started", icon: Workflow, group: "entry" }, {
{ id: "onboarding", label: "Onboarding", subtitle: "Profile • Interests • Path", icon: Users, group: "entry" }, id: "realms",
label: "Realms",
subtitle: "GD / Consulting / Community / Get Started",
icon: Workflow,
group: "entry",
},
{
id: "onboarding",
label: "Onboarding",
subtitle: "Profile • Interests • Path",
icon: Users,
group: "entry",
},
// Frontend app // Frontend app
{ id: "dashboard", label: "Dashboard", subtitle: "Realmaware UI", icon: Globe, group: "frontend" }, {
{ id: "routes", label: "Routes", subtitle: "/feed • /status • /teams • /docs", icon: Route, group: "frontend" }, id: "dashboard",
label: "Dashboard",
subtitle: "Realmaware UI",
icon: Globe,
group: "frontend",
},
{
id: "routes",
label: "Routes",
subtitle: "/feed • /status • /teams • /docs",
icon: Route,
group: "frontend",
},
// Product services (frontend+api) // Product services (frontend+api)
{ id: "feed", label: "Social Feed", subtitle: "Posts • Likes • Comments • Tags", icon: Layers, group: "services" }, {
{ id: "mentorship", label: "Mentorship", subtitle: "Requests • Mentors • Moderation", icon: Users, group: "services" }, id: "feed",
{ id: "status", label: "Status", subtitle: "Live health from /api/status", icon: ShieldCheck, group: "services" }, label: "Social Feed",
{ id: "investors", label: "Investors", subtitle: "Interest • Client realm", icon: Network, group: "services" }, subtitle: "Posts • Likes • Comments • Tags",
icon: Layers,
group: "services",
},
{
id: "mentorship",
label: "Mentorship",
subtitle: "Requests • Mentors • Moderation",
icon: Users,
group: "services",
},
{
id: "status",
label: "Status",
subtitle: "Live health from /api/status",
icon: ShieldCheck,
group: "services",
},
{
id: "investors",
label: "Investors",
subtitle: "Interest • Client realm",
icon: Network,
group: "services",
},
// Backend // Backend
{ id: "api", label: "API", subtitle: "Node/Express server routes", icon: ServerCog, group: "backend" }, {
{ id: "db", label: "Supabase", subtitle: "Auth • Profiles • Content • Migrations", icon: Database, group: "backend" }, id: "api",
label: "API",
subtitle: "Node/Express server routes",
icon: ServerCog,
group: "backend",
},
{
id: "db",
label: "Supabase",
subtitle: "Auth • Profiles • Content • Migrations",
icon: Database,
group: "backend",
},
// Infra // Infra
{ id: "hosting", label: "Hosting/CDN", subtitle: "Vercel/Netlify + Edge", icon: Spline, group: "infra" }, {
id: "hosting",
label: "Hosting/CDN",
subtitle: "Vercel/Netlify + Edge",
icon: Spline,
group: "infra",
},
]; ];
// Directed edges between nodes // Directed edges between nodes
@ -65,11 +148,13 @@ const groupStyles: Record<Node["group"], string> = {
function NodeCard({ node }: { node: Node }) { function NodeCard({ node }: { node: Node }) {
const Icon = node.icon ?? Globe; const Icon = node.icon ?? Globe;
return ( return (
<div className={cn( <div
"rounded-xl border p-3 text-sm shadow-sm", className={cn(
"bg-gradient-to-br", "rounded-xl border p-3 text-sm shadow-sm",
groupStyles[node.group], "bg-gradient-to-br",
)}> groupStyles[node.group],
)}
>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="rounded-lg bg-black/30 p-1.5"> <div className="rounded-lg bg-black/30 p-1.5">
<Icon className="h-4 w-4 text-white/90" /> <Icon className="h-4 w-4 text-white/90" />
@ -90,53 +175,79 @@ export default function AdminSystemMap() {
<Card className="bg-card/60 border-border/40 backdrop-blur"> <Card className="bg-card/60 border-border/40 backdrop-blur">
<CardHeader> <CardHeader>
<CardTitle>System map</CardTitle> <CardTitle>System map</CardTitle>
<CardDescription>Highlevel architecture and primary flows</CardDescription> <CardDescription>
Highlevel architecture and primary flows
</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="grid gap-4"> <div className="grid gap-4">
{/* Row: entry */} {/* Row: entry */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
{NODES.filter(n => n.group === "entry").map(n => ( {NODES.filter((n) => n.group === "entry").map((n) => (
<NodeCard key={n.id} node={n} /> <NodeCard key={n.id} node={n} />
))} ))}
</div> </div>
{/* Row: frontend */} {/* Row: frontend */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{NODES.filter(n => n.group === "frontend").map(n => ( {NODES.filter((n) => n.group === "frontend").map((n) => (
<NodeCard key={n.id} node={n} /> <NodeCard key={n.id} node={n} />
))} ))}
</div> </div>
{/* Row: services */} {/* Row: services */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
{NODES.filter(n => n.group === "services").map(n => ( {NODES.filter((n) => n.group === "services").map((n) => (
<NodeCard key={n.id} node={n} /> <NodeCard key={n.id} node={n} />
))} ))}
</div> </div>
{/* Row: backend + infra */} {/* Row: backend + infra */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
{NODES.filter(n => n.group === "backend").map(n => ( {NODES.filter((n) => n.group === "backend").map((n) => (
<NodeCard key={n.id} node={n} /> <NodeCard key={n.id} node={n} />
))} ))}
{NODES.filter(n => n.group === "infra").map(n => ( {NODES.filter((n) => n.group === "infra").map((n) => (
<NodeCard key={n.id} node={n} /> <NodeCard key={n.id} node={n} />
))} ))}
</div> </div>
{/* Legend */} {/* Legend */}
<div className="mt-2 flex flex-wrap gap-2 text-[11px] text-muted-foreground"> <div className="mt-2 flex flex-wrap gap-2 text-[11px] text-muted-foreground">
<Badge variant="outline" className="border-emerald-500/30 text-emerald-200">Entry</Badge> <Badge
<Badge variant="outline" className="border-indigo-500/30 text-indigo-200">Frontend</Badge> variant="outline"
<Badge variant="outline" className="border-fuchsia-500/30 text-fuchsia-200">Services</Badge> className="border-emerald-500/30 text-emerald-200"
<Badge variant="outline" className="border-sky-500/30 text-sky-200">Backend</Badge> >
<Badge variant="outline" className="border-amber-500/30 text-amber-200">Infra</Badge> Entry
</Badge>
<Badge
variant="outline"
className="border-indigo-500/30 text-indigo-200"
>
Frontend
</Badge>
<Badge
variant="outline"
className="border-fuchsia-500/30 text-fuchsia-200"
>
Services
</Badge>
<Badge variant="outline" className="border-sky-500/30 text-sky-200">
Backend
</Badge>
<Badge
variant="outline"
className="border-amber-500/30 text-amber-200"
>
Infra
</Badge>
</div> </div>
{/* Edges list (readable relationships) */} {/* Edges list (readable relationships) */}
<div className="mt-4 rounded-xl border border-border/40 bg-background/40 p-3"> <div className="mt-4 rounded-xl border border-border/40 bg-background/40 p-3">
<div className="text-xs font-medium text-foreground mb-2">Flows</div> <div className="text-xs font-medium text-foreground mb-2">
Flows
</div>
<ul className="grid gap-1 text-xs text-muted-foreground sm:grid-cols-2 lg:grid-cols-3"> <ul className="grid gap-1 text-xs text-muted-foreground sm:grid-cols-2 lg:grid-cols-3">
{EDGES.map(([from, to, note]) => ( {EDGES.map(([from, to, note]) => (
<li key={`${from}-${to}`}> <li key={`${from}-${to}`}>

View file

@ -98,38 +98,63 @@ export default function Realms() {
<section className="mt-12 space-y-6"> <section className="mt-12 space-y-6">
<div> <div>
<Badge variant="outline">Contributor network</Badge> <Badge variant="outline">Contributor network</Badge>
<h2 className="mt-2 text-2xl font-semibold">Mentors, Maintainers, and Shipmates</h2> <h2 className="mt-2 text-2xl font-semibold">
<p className="text-muted-foreground">Grow the platform with usteach, steward projects, and ship products together.</p> Mentors, Maintainers, and Shipmates
</h2>
<p className="text-muted-foreground">
Grow the platform with usteach, steward projects, and ship
products together.
</p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card className="border-border/50 bg-card/50"> <Card className="border-border/50 bg-card/50">
<CardHeader> <CardHeader>
<CardTitle>Mentors</CardTitle> <CardTitle>Mentors</CardTitle>
<CardDescription>Guide builders through 1:1 sessions, clinics, and code reviews.</CardDescription> <CardDescription>
Guide builders through 1:1 sessions, clinics, and code
reviews.
</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="flex gap-2"> <CardContent className="flex gap-2">
<Button asChild><Link to="/community/mentorship/apply">Become a mentor</Link></Button> <Button asChild>
<Button asChild variant="outline"><Link to="/community/mentorship">Request mentorship</Link></Button> <Link to="/community/mentorship/apply">Become a mentor</Link>
</Button>
<Button asChild variant="outline">
<Link to="/community/mentorship">Request mentorship</Link>
</Button>
</CardContent> </CardContent>
</Card> </Card>
<Card className="border-border/50 bg-card/50"> <Card className="border-border/50 bg-card/50">
<CardHeader> <CardHeader>
<CardTitle>Maintainers</CardTitle> <CardTitle>Maintainers</CardTitle>
<CardDescription>Own modules, triage issues, and lead roadmap execution.</CardDescription> <CardDescription>
Own modules, triage issues, and lead roadmap execution.
</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="flex gap-2"> <CardContent className="flex gap-2">
<Button asChild variant="outline"><Link to="/developers">Browse developers</Link></Button> <Button asChild variant="outline">
<Button asChild><Link to="/projects/new">Start a project</Link></Button> <Link to="/developers">Browse developers</Link>
</Button>
<Button asChild>
<Link to="/projects/new">Start a project</Link>
</Button>
</CardContent> </CardContent>
</Card> </Card>
<Card className="border-border/50 bg-card/50"> <Card className="border-border/50 bg-card/50">
<CardHeader> <CardHeader>
<CardTitle>Shipmates</CardTitle> <CardTitle>Shipmates</CardTitle>
<CardDescription>Join product squads shipping across Labs, Platform, and Community.</CardDescription> <CardDescription>
Join product squads shipping across Labs, Platform, and
Community.
</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="flex gap-2"> <CardContent className="flex gap-2">
<Button asChild><Link to="/teams">Open Teams</Link></Button> <Button asChild>
<Button asChild variant="outline"><Link to="/labs">Explore Labs</Link></Button> <Link to="/teams">Open Teams</Link>
</Button>
<Button asChild variant="outline">
<Link to="/labs">Explore Labs</Link>
</Button>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@ -138,14 +163,20 @@ export default function Realms() {
<section className="mt-12 space-y-6"> <section className="mt-12 space-y-6">
<div> <div>
<Badge variant="outline">Teams hiring now</Badge> <Badge variant="outline">Teams hiring now</Badge>
<h2 className="mt-2 text-2xl font-semibold">Across Labs, Platform, and Community</h2> <h2 className="mt-2 text-2xl font-semibold">
<p className="text-muted-foreground">Apply to active squads and help us accelerate delivery.</p> Across Labs, Platform, and Community
</h2>
<p className="text-muted-foreground">
Apply to active squads and help us accelerate delivery.
</p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card className="border-border/50 bg-card/50"> <Card className="border-border/50 bg-card/50">
<CardHeader> <CardHeader>
<CardTitle>Labs squads</CardTitle> <CardTitle>Labs squads</CardTitle>
<CardDescription>R&amp;D and experimental products.</CardDescription> <CardDescription>
R&amp;D and experimental products.
</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ul className="list-disc pl-5 text-sm text-muted-foreground space-y-1"> <ul className="list-disc pl-5 text-sm text-muted-foreground space-y-1">
@ -154,14 +185,18 @@ export default function Realms() {
<li>Mentorship Programs</li> <li>Mentorship Programs</li>
</ul> </ul>
<div className="mt-3"> <div className="mt-3">
<Button asChild size="sm"><Link to="/teams">View openings</Link></Button> <Button asChild size="sm">
<Link to="/teams">View openings</Link>
</Button>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<Card className="border-border/50 bg-card/50"> <Card className="border-border/50 bg-card/50">
<CardHeader> <CardHeader>
<CardTitle>Platform squads</CardTitle> <CardTitle>Platform squads</CardTitle>
<CardDescription>Core app, APIs, and reliability.</CardDescription> <CardDescription>
Core app, APIs, and reliability.
</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ul className="list-disc pl-5 text-sm text-muted-foreground space-y-1"> <ul className="list-disc pl-5 text-sm text-muted-foreground space-y-1">
@ -170,7 +205,9 @@ export default function Realms() {
<li>Content &amp; Docs</li> <li>Content &amp; Docs</li>
</ul> </ul>
<div className="mt-3"> <div className="mt-3">
<Button asChild size="sm"><Link to="/teams">View openings</Link></Button> <Button asChild size="sm">
<Link to="/teams">View openings</Link>
</Button>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@ -186,13 +223,14 @@ export default function Realms() {
<li>Creator Success</li> <li>Creator Success</li>
</ul> </ul>
<div className="mt-3"> <div className="mt-3">
<Button asChild size="sm" variant="outline"><Link to="/community">Open community</Link></Button> <Button asChild size="sm" variant="outline">
<Link to="/community">Open community</Link>
</Button>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
</section> </section>
</div> </div>
</Layout> </Layout>
); );