30 lines
820 B
TypeScript
30 lines
820 B
TypeScript
|
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||
|
|
import { FLAG_PATTERNS } from "~/lib/flag-types";
|
||
|
|
import { FlagSvg } from "./FlagSvg";
|
||
|
|
|
||
|
|
const meta: Meta<typeof FlagSvg> = {
|
||
|
|
title: "UI/FlagSvg",
|
||
|
|
component: FlagSvg,
|
||
|
|
parameters: { layout: "padded" },
|
||
|
|
};
|
||
|
|
|
||
|
|
export default meta;
|
||
|
|
type Story = StoryObj<typeof FlagSvg>;
|
||
|
|
|
||
|
|
export const AllPatterns: Story = {
|
||
|
|
render: () => (
|
||
|
|
<div className="grid grid-cols-4 gap-4">
|
||
|
|
{FLAG_PATTERNS.map((pattern) => (
|
||
|
|
<div key={pattern} className="space-y-2">
|
||
|
|
<FlagSvg
|
||
|
|
config={{ pattern, colors: ["#adf661", "#111827", "#ffffff"] }}
|
||
|
|
size={64}
|
||
|
|
className="rounded-md border border-border"
|
||
|
|
/>
|
||
|
|
<p className="text-xs text-muted-foreground">{pattern}</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
};
|