54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
import { Label, RadioGroup, RadioGroupItem } from "@ai-ui/ui";
|
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
|
|
function RadioGroupExamples() {
|
|
return (
|
|
<div className="grid w-[720px] gap-6">
|
|
<RadioGroup defaultValue="startup">
|
|
<div className="flex items-center gap-3">
|
|
<RadioGroupItem id="mode-startup" value="startup" />
|
|
<Label htmlFor="mode-startup">Startup review</Label>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<RadioGroupItem id="mode-scale" value="scale" />
|
|
<Label htmlFor="mode-scale">Scale review</Label>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<RadioGroupItem id="mode-enterprise" value="enterprise" />
|
|
<Label htmlFor="mode-enterprise">Enterprise review</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
|
|
<RadioGroup defaultValue="email" orientation="horizontal">
|
|
<div className="flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-4">
|
|
<RadioGroupItem id="channel-email" value="email" />
|
|
<Label htmlFor="channel-email">Email</Label>
|
|
</div>
|
|
<div className="flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-4">
|
|
<RadioGroupItem id="channel-slack" value="slack" />
|
|
<Label htmlFor="channel-slack">Slack</Label>
|
|
</div>
|
|
<div className="flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-4">
|
|
<RadioGroupItem id="channel-push" value="push" />
|
|
<Label htmlFor="channel-push">Push</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const meta = {
|
|
title: "Components/RadioGroup",
|
|
component: RadioGroupExamples,
|
|
parameters: {
|
|
layout: "centered"
|
|
},
|
|
tags: ["autodocs"]
|
|
} satisfies Meta<typeof RadioGroupExamples>;
|
|
|
|
export default meta;
|
|
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const States: Story = {};
|