wehub-resource-sync
52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { MainCenteredContainer } from "~/components/layout/AppLayout";
|
|
import { Paragraph } from "~/components/primitives/Paragraph";
|
|
import SegmentedControl from "~/components/primitives/SegmentedControl";
|
|
|
|
const options = [
|
|
{ label: "Label 1", value: "label1" },
|
|
{ label: "Label 2", value: "label2" },
|
|
];
|
|
|
|
export default function Story() {
|
|
return (
|
|
<MainCenteredContainer className="flex flex-col gap-8">
|
|
<div className="flex flex-col gap-2">
|
|
<Paragraph>primary/small</Paragraph>
|
|
<SegmentedControl
|
|
name="name1"
|
|
defaultValue={options[0].value}
|
|
options={options}
|
|
variant="primary/small"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<Paragraph>primary/medium</Paragraph>
|
|
<SegmentedControl
|
|
name="name2"
|
|
defaultValue={options[0].value}
|
|
options={options}
|
|
variant="primary/medium"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<Paragraph>secondary/small</Paragraph>
|
|
<SegmentedControl
|
|
name="name3"
|
|
defaultValue={options[0].value}
|
|
options={options}
|
|
variant="secondary/small"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<Paragraph>secondary/medium</Paragraph>
|
|
<SegmentedControl
|
|
name="name4"
|
|
defaultValue={options[0].value}
|
|
options={options}
|
|
variant="secondary/medium"
|
|
/>
|
|
</div>
|
|
</MainCenteredContainer>
|
|
);
|
|
}
|