This commit is contained in:
78
frontend/storybook/stories/Table.stories.tsx
Normal file
78
frontend/storybook/stories/Table.stories.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import preview from "#.storybook/preview";
|
||||
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "../../src/ts/components/ui/table/Table";
|
||||
|
||||
const meta = preview.meta({
|
||||
title: "UI/Table",
|
||||
component: Table,
|
||||
parameters: {
|
||||
layout: "padded",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
});
|
||||
|
||||
export const Default = meta.story({
|
||||
render: () => (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>WPM</TableHead>
|
||||
<TableHead>Accuracy</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>Alice</TableCell>
|
||||
<TableCell>120</TableCell>
|
||||
<TableCell>98%</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Bob</TableCell>
|
||||
<TableCell>95</TableCell>
|
||||
<TableCell>96%</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Charlie</TableCell>
|
||||
<TableCell>110</TableCell>
|
||||
<TableCell>97%</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
),
|
||||
});
|
||||
|
||||
export const WithCaption = meta.story({
|
||||
render: () => (
|
||||
<Table>
|
||||
<TableCaption>Recent typing test results</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>WPM</TableHead>
|
||||
<TableHead>Accuracy</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>Alice</TableCell>
|
||||
<TableCell>120</TableCell>
|
||||
<TableCell>98%</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Bob</TableCell>
|
||||
<TableCell>95</TableCell>
|
||||
<TableCell>96%</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
),
|
||||
});
|
||||
Reference in New Issue
Block a user