79 lines
1.8 KiB
TypeScript
79 lines
1.8 KiB
TypeScript
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>
|
|
),
|
|
});
|