FeaturedProducts

Page-one featured product grid for /products/: shared deterministic home selection and ProductThumb treatment, with 9/12/18/20 responsive tile tiers.

Product Cards

Japanese listing

English listing

Source

/** @jsxRuntime automatic */
/** @jsxImportSource preact */

import { defineStory } from '@lib/styleguide/story-contract';
import type { StoryMeta } from '@lib/styleguide/story-contract';
import { FeaturedProducts } from './featured-products';

const meta: StoryMeta = {
  title: 'FeaturedProducts',
  category: 'Product Cards',
  description:
    'Page-one featured product grid for /products/: shared deterministic home selection and ProductThumb treatment, with 9/12/18/20 responsive tile tiers.',
  usage: `import { FeaturedProducts } from '@/src/components/products/featured-products';\n\n<FeaturedProducts locale="ja" />`,
};
export default meta;

export const Japanese = defineStory({
  name: 'Japanese listing',
  render: () => <FeaturedProducts locale="ja" />,
});

export const English = defineStory({
  name: 'English listing',
  render: () => <FeaturedProducts locale="en" />,
});

Live CSS

Injected into the previews above. FeaturedProducts

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */