List/SeriesList

Default

count

Empty

Single Item

Component Source

series-list.tsx

import type { FunctionComponent } from 'preact';
import { SeriesListItem, fromGuideSeriesWithDates } from './series-list-item';
import type { GuideSeriesWithDates } from '@/lib/articles/get-guide-articles';

interface SeriesListProps {
  seriesList: GuideSeriesWithDates[];
}

/**
 * Grid container for series cards
 * 2 columns on lg+, 1 column on mobile
 */
export const SeriesList: FunctionComponent<SeriesListProps> = ({ seriesList }) => {
  if (seriesList.length === 0) {
    return <p className="text-zd-subtext">シリーズが見つかりませんでした</p>;
  }

  return (
    <div className="grid lg:grid-cols-2 gap-x-hgap-md gap-y-vgap-md">
      {seriesList.map((series) => (
        <SeriesListItem key={series.slug} {...fromGuideSeriesWithDates(series)} />
      ))}
    </div>
  );
};

Story Source

series-list.stories.tsx

import { SeriesList } from './series-list';
import type { ControlsMap } from '../../sub-packages/styleguide-v2/src/data/control-types';

const mockSeriesList = [
  {
    slug: 'power',
    kind: 'topic' as const,
    name: 'モジュラーシンセ電源入門',
    description: 'モジュラーシンセの電源について、基礎から実践までを解説するシリーズです。',
    thumbSlug: 'col-power-denkyu',
    articleSlugs: ['col005-power', 'col006-power-vol2', 'col007-power-vol3', 'col008-power-vol4'],
    createdDate: '2024-06-01',
    updatedDate: '2025-01-15',
  },
  {
    slug: 'diy',
    kind: 'topic' as const,
    name: 'DIYキット入門',
    description: 'シンセDIYとDIYキットについて、必要な道具や基礎知識を解説するシリーズです。',
    thumbSlug: 'column-001-cover',
    articleSlugs: ['col001-diy-kits', 'col002-diy-tools'],
    createdDate: '2024-03-10',
    updatedDate: null,
  },
  {
    slug: 'how-to-build',
    kind: 'product' as const,
    name: '組み立てガイド',
    description: 'Takazudo Modular製品の組み立て方法を詳しく解説するシリーズです。',
    thumbSlug: 'zudo-block-build',
    articleSlugs: ['how-to-build-zudo-block'],
    createdDate: '2025-02-01',
    updatedDate: '2025-12-20',
  },
  {
    slug: 'oxi-one-guide',
    kind: 'product' as const,
    name: 'OXI ONEガイド',
    description: 'OXI ONEシーケンサーの使い方を日本語で解説するシリーズです。',
    thumbSlug: 'oxi-front',
    articleSlugs: ['oxi-one-guide1', 'oxi-one-guide2'],
    createdDate: '2023-10-24',
    updatedDate: '2024-03-15',
  },
];

export const meta = {
  title: 'List/SeriesList',
};

export const controls: ControlsMap = {
  count: { type: 'number', default: 4, min: 0, max: 4 },
};

export const Default = {
  args: { count: 4 },
  render: ({ count }: { count: number }) => (
    <SeriesList seriesList={mockSeriesList.slice(0, count)} />
  ),
};

export const SingleItem = () => <SeriesList seriesList={[mockSeriesList[0]!]} />;

export const Empty = () => <SeriesList seriesList={[]} />;