GuidesLanding/PickupSection

The Pickup block at the top of the guides landing page — a grid of guide article cards, one column below lg and two at lg+. Renders nothing when there are no visible entries.

Lists & Cards

Default

EN locale

Empty

import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { PickupSection } from './pickup-section'; import type { ZfbGuideEntry } from '@/src/lib/guides'; /** * PickupSection * * The top-of-`/guides/` (and `/en/guides/`) Pickup block. It reuses the * SSR-safe guide article card used on archive and series pages. */ const meta: StoryMeta = { title: 'GuidesLanding/PickupSection', category: 'Lists & Cards', description: 'The Pickup block at the top of the guides landing page — a grid of guide article cards, one column below lg and two at lg+. Renders nothing when there are no visible entries.', usage: `import { PickupSection } from '@/src/components/guides-landing/pickup-section';\n\n<PickupSection articles={articles} locale="ja" />`, }; export default meta; function guideEntry( slug: string, title: string, createdAt: string, description: string, ): ZfbGuideEntry { return { slug, data: { title, description, contentType: 'guides', createdAt, updatedAt: undefined, imgThumb: `${slug}-cover`, tags: ['guide', 'sequencer'], }, } as ZfbGuideEntry; } const newestArticles = [ guideEntry( 'oxi-one-mkii-guide-ep12', 'OXI ONE MKII 解説 EP.12: Domino Mode', '2026-06-28', 'OXI ONE MKIIの新しいDomino Modeを解説します。', ), guideEntry( 'addac705-guide-ep2', 'ADDAC705 解説 EP.2: パッチの実例', '2026-06-20', 'ADDAC705の実践的なパッチ例を紹介します。', ), guideEntry( 'wingie2-guide-ep1', 'Wingie2 ガイド EP.1: 基本操作', '2026-06-12', 'Wingie2の基本操作をわかりやすく解説します。', ), guideEntry( 'shik-guide-ep5', 'SHIK ガイド EP.5: シーケンスを組む', '2026-06-05', 'SHIKでのシーケンス作成ワークフローを紹介します。', ), ]; /** Default — four guide articles, one column below lg and two at lg+. */ export const Default = defineStory({ name: 'Default', render: () => <PickupSection articles={newestArticles} locale="ja" />, }); /** EN locale — article URLs and the guide badge use the EN route/chrome. */ export const EnLocale = defineStory({ name: 'EN locale', render: () => <PickupSection articles={newestArticles} locale="en" />, }); /** Empty — no section is emitted when the locale has no visible guide articles. */ export const Empty = defineStory({ name: 'Empty', render: () => <PickupSection articles={[]} locale="ja" />, });