Products/ProductCardSimple

Default

name

subtitle

description

Component Source

product-card-simple.tsx

import { memo } from 'preact/compat';
import { Link } from '@/components/shared/link';
import { BlurhashPlaceholder } from '@/components/blurhash-placeholder';
import { KeywordHighlight } from './keyword-highlight';
import { useImageLoadState } from '@/src/hooks/use-image-load-state';
import type { Product } from '@/src/types/product';
import type { MercariStatus } from '@/src/types/product';
import { ProductStatusBadge } from '@/components/shared/product-status-badge';

export interface ProductCardSimpleProps {
  name: string;
  subtitle?: string;
  description: string;
  imgSrc: string;
  blurhash?: string;
  href: string;
  mercariStatus?: MercariStatus | null;
  keyword?: string;
}

/**
 * Convert a Product to flat ProductCardSimpleProps
 */
export function productToCardSimpleProps(
  product: Product,
  locale: 'ja' | 'en' = 'ja',
): ProductCardSimpleProps | null {
  const pathPrefix = locale === 'en' ? '/en' : '';
  const href = product.detailHref ? `${pathPrefix}${product.detailHref}` : null;
  if (!href) return null;

  return {
    name: product.name,
    subtitle: product.subtitle ?? undefined,
    description: product.description,
    imgSrc: product.imgSrc,
    blurhash: product.blurhash ?? undefined,
    href,
    mercariStatus: product.mercariStatus,
  };
}

/**
 * Simplified product card for API-filtered mode
 * 2-column layout matching ProductNavItem: text left, image right
 * Supports keyword highlighting and blurhash placeholder loading
 * Memoized to prevent unnecessary re-renders
 */
const ProductCardSimpleComponent = ({
  name,
  subtitle,
  description,
  imgSrc,
  blurhash,
  href,
  mercariStatus,
  keyword = '',
}: ProductCardSimpleProps) => {
  const { isLoaded, imgRef, handleImageLoad } = useImageLoadState();

  // Build a simple image URL from imgSrc
  const imgUrl = imgSrc ? `${imgSrc}/600w.webp` : '';
  const hasBlurhash = !!blurhash;

  return (
    <Link
      to={href}
      className={
        'no-underline zd-invert-color-link grid grid-cols-[1fr_150px] md:grid-cols-[1fr_170px] xl:grid-cols-[1fr_190px] 2xl:grid-cols-[1fr_220px]'
      }
    >
      <div className="border-t border-zd-white flex flex-col pr-hgap-sm">
        <div className="grow pt-vgap-sm">
          <div className="pb-vgap-xs underline flex flex-wrap gap-x-[8px] place-items-baseline font-futura">
            <div className="text-sm sm:text-base font-semibold">
              <KeywordHighlight text={name} keyword={keyword} />
            </div>
            {subtitle && (
              <div className="pt-vgap-2xs pb-vgap-xs text-sm">
                <KeywordHighlight text={subtitle} keyword={keyword} />
              </div>
            )}
          </div>
          <p className="text-xs lg:text-sm line-clamp-3" title={description}>
            <KeywordHighlight text={description} keyword={keyword} />
          </p>
        </div>
      </div>
      <div className="border-zd-white border aspect-square bg-zd-gray/20 overflow-hidden relative">
        {hasBlurhash && (
          <BlurhashPlaceholder
            hash={blurhash!}
            width="100%"
            height="100%"
            resolutionX={32}
            resolutionY={32}
            punch={1}
            isLoaded={isLoaded}
          />
        )}
        {imgUrl && (
          <img
            ref={imgRef}
            src={imgUrl}
            alt={name}
            className={`w-full h-full object-cover transition-opacity duration-500 ease-in-out ${isLoaded || !hasBlurhash ? 'opacity-100' : 'opacity-0'}`}
            loading="lazy"
            onLoad={handleImageLoad}
          />
        )}
        <ProductStatusBadge status={mercariStatus} />
      </div>
    </Link>
  );
};

export const ProductCardSimple = memo(ProductCardSimpleComponent);

Story Source

import { ProductCardSimple } from './product-card-simple';
import type { ControlsMap } from '../../sub-packages/styleguide/src/data/control-types';

const MOCK_BLURHASH = 'LEHV6nWB2yk8pyo0adR*.7kCMdnj';

export const meta = {
  title: 'Products/ProductCardSimple',
};

export const controls: ControlsMap = {
  name: { type: 'text', default: 'ADDAC104' },
  subtitle: { type: 'text', default: 'VC Integrator' },
  description: {
    type: 'text',
    default: 'ADDAC104はCV信号を統合・処理するためのユーティリティモジュールです。',
  },
};

/**
 * Default - available product with image
 */
export const Default = {
  args: {
    name: 'ADDAC104',
    subtitle: 'VC Integrator',
    description: 'ADDAC104はCV信号を統合・処理するためのユーティリティモジュールです。',
  },
  render: ({
    name,
    subtitle,
    description,
  }: {
    name: string;
    subtitle: string;
    description: string;
  }) => (
    <div className="max-w-[600px]">
      <ProductCardSimple
        name={name}
        subtitle={subtitle || undefined}
        description={description}
        imgSrc="https://takazudomodular.com/images/p/addac104-0-front"
        blurhash={MOCK_BLURHASH}
        href="/products/addac104-intro/"
      />
    </div>
  ),
};

/**
 * Sold out product with status badge
 */
export const SoldOut = () => (
  <div className="max-w-[600px]">
    <ProductCardSimple
      name="Plaits"
      description="マクロオシレーターの後継モジュール。16種類のシンセシスモデルを搭載。"
      imgSrc="https://takazudomodular.com/images/p/1-front"
      blurhash={MOCK_BLURHASH}
      href="/products/plaits-intro/"
      mercariStatus="sold"
    />
  </div>
);

/**
 * Discontinued product
 */
export const Discontinued = () => (
  <div className="max-w-[600px]">
    <ProductCardSimple
      name="2V2"
      subtitle="Dual VCA"
      description="デュアルVCAモジュール。コンパクトなサイズで2チャンネルのVCA機能を提供。"
      imgSrc="https://takazudomodular.com/images/p/2v2-1-front"
      blurhash={MOCK_BLURHASH}
      href="/products/2v2-intro/"
      mercariStatus="discontinued"
    />
  </div>
);

/**
 * With keyword highlighting
 */
export const WithKeyword = () => (
  <div className="max-w-[600px]">
    <ProductCardSimple
      name="ADDAC207"
      subtitle="Intuitive Quantizer"
      description="直感的なクオンタイザーモジュール。ノブとCVでスケールを自在にコントロール。"
      imgSrc="https://takazudomodular.com/images/p/addac207-0-front"
      blurhash={MOCK_BLURHASH}
      href="/products/addac207-intro/"
      keyword="Quantizer"
    />
  </div>
);

/**
 * Long description - tests line clamping
 */
export const LongDescription = () => (
  <div className="max-w-[600px]">
    <ProductCardSimple
      name="AD110"
      subtitle="4 Channel Mixer"
      description="4チャンネルミキサーモジュール。各チャンネルにレベルコントロールとCVインプットを搭載。オーディオ信号やCV信号のミキシングに最適なユーティリティモジュールです。コンパクトなHPサイズでありながら、高品質なミキシング機能を提供します。"
      imgSrc="https://takazudomodular.com/images/p/ad110-1-front"
      blurhash={MOCK_BLURHASH}
      href="/products/ad110-intro/"
    />
  </div>
);