46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardDescription,
|
||
CardFooter,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from "@/components/ui/card";
|
||
|
||
const meta = {
|
||
title: "UI/Card",
|
||
component: Card,
|
||
// Card requires `children`; every story supplies its own via `render`, so this
|
||
// is just a placeholder to satisfy the arg type.
|
||
args: { children: null },
|
||
} satisfies Meta<typeof Card>;
|
||
|
||
export default meta;
|
||
type Story = StoryObj<typeof meta>;
|
||
|
||
export const HostCard: Story = {
|
||
render: () => (
|
||
<Card className="max-w-sm">
|
||
<CardHeader>
|
||
<div className="flex items-center justify-between">
|
||
<CardTitle>ENRICOS-DESKTOP</CardTitle>
|
||
<Badge variant="success">online</Badge>
|
||
</div>
|
||
<CardDescription>RTX 5070 Ti · NVENC · 5120×1440 @ 240</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-sm text-muted-foreground">
|
||
Paired 2 days ago. Last session 11 ms p50 capture→present.
|
||
</CardContent>
|
||
<CardFooter className="gap-2">
|
||
<Button size="sm">Connect</Button>
|
||
<Button size="sm" variant="outline">
|
||
Details
|
||
</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
),
|
||
};
|