brackt/app/components/league/SportIcon.stories.tsx
Chris Parsons 377b26a9c3 Extract reusable league wizard components; wire settings page (#103)
Extracts 9 domain components from new.tsx and $leagueId.settings.tsx into
app/components/league/ (each with a Storybook story), consolidates wizard
form-building into wizard-state.ts, and updates the settings page to use
the shared components instead of hand-rolled duplicates. new.tsx shrinks
from ~2000 → ~1280 lines.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-28 22:08:14 -07:00

42 lines
1.1 KiB
TypeScript

import type { Meta, StoryObj } from "@storybook/react-vite";
import { SportIcon } from "./SportIcon";
const meta: Meta<typeof SportIcon> = {
title: "League/SportIcon",
component: SportIcon,
parameters: { layout: "centered" },
};
export default meta;
type Story = StoryObj<typeof SportIcon>;
// Icons are uploaded at runtime via the admin panel and are not committed to the
// repo, so we use a data-URI placeholder here instead of a real file path.
const PLACEHOLDER_SVG =
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%234f46e5'/%3E%3C/svg%3E";
export const WithIcon: Story = {
args: {
sport: { name: "NBA", iconUrl: PLACEHOLDER_SVG },
},
};
export const Fallback: Story = {
args: {
sport: { name: "Unknown Sport", iconUrl: null },
},
};
export const SmallWithIcon: Story = {
args: {
sport: { name: "NFL", iconUrl: PLACEHOLDER_SVG },
size: "sm",
},
};
export const SmallFallback: Story = {
args: {
sport: { name: "Unknown Sport", iconUrl: null },
size: "sm",
},
};