List/GuideArticleList

Default

count

Empty

Single Item

Two Items

Component Source

guide-article-list.tsx

import type { FunctionComponent } from 'preact';
import type { ArticleSummary } from '@/lib/articles/get-all-articles';
import {
  GuideArticleListItem,
  articleSummaryToGuideListItemProps,
} from './guide-article-list-item';

interface GuideArticleListProps {
  articles: ArticleSummary[];
}

/**
 * Grid container for guide article cards
 * 3 columns on 2xl, 2 columns on lg, 1 column on mobile
 */
export const GuideArticleList: FunctionComponent<GuideArticleListProps> = ({ articles }) => {
  if (articles.length === 0) {
    return <p className="text-zd-subtext">ガイド記事が見つかりませんでした</p>;
  }

  return (
    <div className="grid lg:grid-cols-2 2xl:grid-cols-3 gap-x-hgap-md gap-y-vgap-md">
      {articles.map((article) => (
        <GuideArticleListItem key={article.slug} {...articleSummaryToGuideListItemProps(article)} />
      ))}
    </div>
  );
};

Story Source

guide-article-list.stories.tsx

import { GuideArticleList } from './guide-article-list';
import { createMockArticleSummary } from '@/components/__test-utils__/mock-article';
import type { ArticleSummary } from '@/lib/articles/get-all-articles';
import type { ControlsMap } from '../../sub-packages/styleguide-v2/src/data/control-types';

const mockArticles: ArticleSummary[] = [
  createMockArticleSummary({
    slug: 'col005-power',
    title: 'モジュラーシンセ電源入門 その1: 電源の基礎知識',
    description: 'モジュラーシンセの電源について基礎から解説します。',
    createdAt: '2024-06-01',
    imageSlug: 'https://takazudomodular.com/images/p/col-power-denkyu/1200w.webp',
    tags: ['guide'],
    contentType: 'guides',
  }),
  createMockArticleSummary({
    slug: 'col001-diy-kits',
    title: 'DIYキット入門 その1: DIYキットとは',
    description: 'シンセDIYとDIYキットについて解説します。',
    createdAt: '2024-03-10',
    updatedAt: '2024-05-20',
    imageSlug: 'https://takazudomodular.com/images/p/column-001-cover/1200w.webp',
    tags: ['guide'],
    contentType: 'guides',
  }),
  createMockArticleSummary({
    slug: 'how-to-build-zudo-block',
    title: 'ZUDO BLOCKの組み立て方',
    description: 'ZUDO BLOCKの組み立て手順を解説します。',
    createdAt: '2025-02-01',
    imageSlug: 'https://takazudomodular.com/images/p/zudo-block-build__og/1200w.webp',
    tags: ['guide'],
    contentType: 'guides',
  }),
  createMockArticleSummary({
    slug: 'oxi-one-guide1',
    title: 'OXI ONE 解説 その1: 全体の設定とMono modeの操作',
    description: 'OXI ONEシーケンサーの基本操作を解説します。',
    createdAt: '2023-10-24',
    imageSlug: 'https://takazudomodular.com/images/p/oxi-front/1200w.webp',
    tags: ['guide'],
    contentType: 'guides',
  }),
  createMockArticleSummary({
    slug: 'col006-power-vol2',
    title: 'モジュラーシンセ電源入門 その2: 電源モジュールの選び方',
    description: '電源モジュールの選び方について解説します。',
    createdAt: '2024-07-15',
    updatedAt: '2024-12-01',
    imageSlug: 'https://takazudomodular.com/images/p/col-power-denkyu/1200w.webp',
    tags: ['guide'],
    contentType: 'guides',
  }),
  createMockArticleSummary({
    slug: 'col002-diy-tools',
    title: 'DIYキット入門 その2: 必要な道具',
    description: 'DIYキットの組み立てに必要な道具を解説します。',
    createdAt: '2024-04-20',
    imageSlug: 'https://takazudomodular.com/images/p/column-001-cover/1200w.webp',
    tags: ['guide'],
    contentType: 'guides',
  }),
];

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

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

export const Default = {
  args: { count: 6 },
  render: ({ count }: { count: number }) => (
    <GuideArticleList articles={mockArticles.slice(0, count)} />
  ),
};

export const SingleItem = () => <GuideArticleList articles={[mockArticles[0]!]} />;

export const TwoItems = () => <GuideArticleList articles={mockArticles.slice(0, 2)} />;

export const Empty = () => <GuideArticleList articles={[]} />;