TagSidebar

Every available article tag rendered as an ArrowTag pill linking to /tags/<tag>/; the current tag is non-interactive with aria-current="page".

Badges & Tags

Default (no current tag)

With current tag

English locale with /en path prefix

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for TagSidebar — new coverage (epic #1647, wave 6 / #1660). // Categorized `Badges & Tags` (#2082 recategorization) — it renders the same // ArrowTag pill vocabulary as the rest of that bucket, even though the // component's own docstring identifies it as a port of // `src/astro/components/list/tag-sidebar.astro` and the file now lives under // src/components/shared/. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { TagSidebar } from './tag-sidebar'; const TAGS = ['modular', 'standalone', 'guide', 'how-to-build', 'power', 'case', 'rail', 'diy']; const meta: StoryMeta = { title: 'TagSidebar', category: 'Badges & Tags', description: 'Every available article tag rendered as an ArrowTag pill linking to /tags/<tag>/; the current tag is non-interactive with aria-current="page".', usage: `import { TagSidebar } from '@/src/components/shared/tag-sidebar';\n\n<TagSidebar tags={tags} currentTag="power" />`, }; export default meta; export const Default = defineStory({ name: 'Default (no current tag)', render: () => <TagSidebar tags={TAGS} />, }); export const WithCurrentTag = defineStory({ name: 'With current tag', render: () => <TagSidebar tags={TAGS} currentTag="power" />, }); export const EnglishWithPathPrefix = defineStory({ name: 'English locale with /en path prefix', render: () => <TagSidebar tags={TAGS} currentTag="diy" pathPrefix="/en" locale="en" />, });