ProductCardSimple

Bundle-safe product card for the products-filter island — bare <a>/<img>, blurhash placeholder, keyword highlighting, and the same status/bundle/brand badge overlays as ProductGridItem.

Product Cards

Default

Keyword highlighted (search result)

Bundle + brand badge (corner flip)

Sold status

Discontinued (grayscale, no ribbon)

No blurhash placeholder

NEW stock label

RESTOCK stock label

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ProductCardSimple — new coverage (epic #1647, wave 6 / #1660). // Bundle-safe products-filter-island counterpart of ProductGridItem — same // badge overlays, plus KeywordHighlight + a client-side blurhash placeholder. // Uses the same real oxi-coral image slug/blurhash as product-grid-item.stories.tsx. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { ProductCardSimple } from './product-card-simple'; import type { ProductCardSimpleProps } from './product-card-simple'; const meta: StoryMeta = { title: 'ProductCardSimple', category: 'Product Cards', description: 'Bundle-safe product card for the products-filter island — bare <a>/<img>, blurhash placeholder, keyword highlighting, and the same status/bundle/brand badge overlays as ProductGridItem.', usage: `import { ProductCardSimple } from '@/src/components/products/product-card-simple';\n\n<ProductCardSimple name="OXI Coral" description="..." imgSrc="/images/p/coral-0-front__og" href="/products/oxi-coral-intro/" />`, }; export default meta; const baseProps: ProductCardSimpleProps = { name: 'OXI Coral', description: '8ボイスのマルチティンバーなポリシンセモジュール。シンセ、サンプラー、ドラムの機能を統合。', imgSrc: '/images/p/coral-0-front__og', blurhash: 'UnL2Fksm}m$%sma}kAayxFjZNwfkoej@sCjZ', href: '/products/oxi-coral-intro/', }; export const Default = defineStory({ name: 'Default', render: () => <ProductCardSimple {...baseProps} />, }); export const KeywordHighlighted = defineStory({ name: 'Keyword highlighted (search result)', render: () => <ProductCardSimple {...baseProps} keyword="coral" />, }); export const BundleWithBrandBadge = defineStory({ name: 'Bundle + brand badge (corner flip)', render: () => ( <ProductCardSimple {...baseProps} isBundle brandSlug="oxi" brandName="OXI Instruments" brandSvgClassName="w-5/6" /> ), }); export const SoldStatus = defineStory({ name: 'Sold status', render: () => <ProductCardSimple {...baseProps} mercariStatus="sold" />, }); export const DiscontinuedStatus = defineStory({ name: 'Discontinued (grayscale, no ribbon)', render: () => <ProductCardSimple {...baseProps} mercariStatus="discontinued" />, }); export const NoBlurhash = defineStory({ name: 'No blurhash placeholder', render: () => <ProductCardSimple {...baseProps} blurhash={undefined} />, }); export const NewStockLabel = defineStory({ name: 'NEW stock label', render: () => <ProductCardSimple {...baseProps} stockLabel="new" />, }); export const RestockStockLabel = defineStory({ name: 'RESTOCK stock label', render: () => <ProductCardSimple {...baseProps} stockLabel="restock" />, });