4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T1bab,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; export type VmState = | "running" | "stopped" | "starting" | "stopping" | "error" | "suspended"; const vmStateMeta: Record< VmState, { dot: string; text: string; label: string; live?: boolean } > = { running: { dot: "bg-success", text: "text-success", label: "Running" }, stopped: { dot: "bg-muted-foreground", text: "text-muted-foreground", label: "Stopped", }, starting: { dot: "bg-info", text: "text-info", label: "Starting", live: true, }, stopping: { dot: "bg-warning", text: "text-warning", label: "Stopping", live: true, }, error: { dot: "bg-destructive", text: "text-destructive", label: "Error" }, suspended: { dot: "bg-muted-foreground", text: "text-muted-foreground", label: "Suspended", }, }; type VmTableProps = React.ComponentProps<"table"> & { caption?: React.ReactNode; }; function VmTable({ className, caption, children, ...props }: VmTableProps) { return (

{caption ? ( ) : null} {children}

); } function VmTableHeader({ className, ...props }: React.ComponentProps<"thead">) { return ( ); } function VmTableHead({ className, ...props }: React.ComponentProps<"th">) { return ( ); } function VmTableBody({ className, ...props }: React.ComponentProps<"tbody">) { return ( ); } function VmTableRow({ className, ...props }: React.ComponentProps<"tr">) { return ( ); } function VmTableCell({ className, ...props }: React.ComponentProps<"td">) { return ( ); } type VmTableNameProps = React.ComponentProps<"td"> & { id?: React.ReactNode; }; function VmTableName({ id, className, children, ...props }: VmTableNameProps) { return (

{children} {id ? ( {id} ) : null}

); } type VmStatusProps = Omit, "children"> & { state: VmState; children?: React.ReactNode; }; function VmStatus({ state, className, children, ...props }: VmStatusProps) { const meta = vmStateMeta[state]; return ( {meta.live ? ( ) : null} {children ?? meta.label} ); } export { VmTable, VmTableHeader, VmTableHead, VmTableBody, VmTableRow, VmTableCell, VmTableName, VmStatus, }; const VM_ROWS: { name: string; id: string; state: VmState; size: string; region: string; ip: string; uptime: string; }[] = [ { name: "web-prod-01", id: "i-0a1b2c3d", state: "running", size: "c6i.2xlarge", region: "us-east-1", ip: "10.0.1.24", uptime: "42d", }, { name: "worker-prod-02", id: "i-0e4f5a6b", state: "running", size: "c6i.xlarge", region: "us-east-1", ip: "10.0.1.51", uptime: "42d", }, { name: "batch-runner-07", id: "i-0c7d8e9f", state: "starting", size: "m6i.large", region: "eu-west-2", ip: "10.1.2.13", uptime: "—", }, { name: "db-replica-03", id: "i-0b3c4d5e", state: "error", size: "r6i.4xlarge", region: "eu-west-2", ip: "10.1.2.44", uptime: "—", }, { name: "sandbox-14", id: "i-0f6a7b8c", state: "stopped", size: "t3.medium", region: "ap-south-1", ip: "—", uptime: "—", }, ]; export default function VmTableBlock() { return (

Instance Status Size Region IP Uptime {VM_ROWS.map((row) => ( {row.name} {row.size} {row.region} {row.ip} {row.uptime} ))}

); } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://hirael.com/r/vm-table.json","proxyUrl":"https://shadcnregistry.com/r/hirael/vm-table","itemId":"@hirael/vm-table"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/hirael/blocks/vm-table/vm-table.tsx","content":"$51","type":"registry:block","target":"components/blocks/vm-table.tsx"}]}]]}],"$L52"]}]

VM Table

Installation

Files

components

Styles