60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T1395,// title: Storage Usage with Progress Bars import { Avatar, AvatarFallback, AvatarImage, } from "@/registry/default/ui/avatar"; import { Badge } from "@/registry/default/ui/badge"; import { Card, CardDescription, CardHeader, CardPanel, CardTitle, } from "@/registry/default/ui/card"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/registry/default/ui/table"; const members = [ { avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&dpr=2&q=80", email: "olivia@example.com", name: "Olivia Martin", plan: "Pro", planVariant: "default" as const, totalGb: 50, usedGb: 47.2, }, { avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80", email: "jackson@example.com", name: "Jackson Lee", plan: "Free", planVariant: "outline" as const, totalGb: 5, usedGb: 3.8, }, { avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=96&h=96&dpr=2&q=80", email: "isabella@example.com", name: "Isabella Nguyen", plan: "Pro", planVariant: "default" as const, totalGb: 50, usedGb: 18.5, }, { avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=96&h=96&dpr=2&q=80", email: "william@example.com", name: "William Kim", plan: "Team", planVariant: "info" as const, totalGb: 100, usedGb: 82.1, }, { avatar: "https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80", email: "sofia@example.com", name: "Sofia Davis", plan: "Free", planVariant: "outline" as const, totalGb: 5, usedGb: 4.9, }, ]; function StorageBar({ used, total }: { used: number; total: number }) { const pct = Math.min((used / total) * 100, 100); const color = pct >= 90 ? "bg-destructive" : pct >= 70 ? "bg-warning" : "bg-primary"; return (

{used} / {total} GB

); } export function Pattern() { const totalUsed = members.reduce((s, m) => s + m.usedGb, 0); const totalCap = members.reduce((s, m) => s + m.totalGb, 0); return (

Storage Usage {totalUsed.toFixed(1)} GB of {totalCap} GB used across all members Member Plan Usage {members.map((m) => { const pct = (m.usedGb / m.totalGb) * 100; return (

{m.name .split(" ") .map((n) => n[0]) .join("")}

{m.name} {m.email}

{m.plan}

{pct >= 90 && ( Storage almost full )}

); })}

); } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L60",null,{"namespace":"@registrydirectory","registryDependencies":["@cnippet/table"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"registry/default/variants/v-table-9.tsx","content":"$62","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]