Atomic Design : Architecture de Composants UI

// Button.jsx : Atome
export function Button({ children, variant, ...props }) {
return (
  <button className={`btn btn-${variant}`} {...props}>
    {children}
  </button>
);
}

// SearchBar.jsx : Molécule
import { Button, Input } from '../atoms';
export function SearchBar({ onSearch }) {
return (
  <form onSubmit={e => { e.preventDefault(); onSearch(e.target.q.value); }}>
    <Input name="q" placeholder="Rechercher..." />
    <Button type="submit">Rechercher</Button>
  </form>
);
}

// Header.jsx : Organisme
import { SearchBar, ProductCard } from '../molecules';
export function Header({ cartCount }) {
return (
  <header className="header">
    <div className="logo">MonSite</div>
    <SearchBar onSearch={handleSearch} />
    <Button>Panier ({cartCount})</Button>
  </header>
);
}

// ProductPageTemplate.jsx : Template
export function ProductPageTemplate({ header, filters, products, footer }) {
return (
  <div className="page">
    {header}
    <aside>{filters}</aside>
    <main>{products}</main>
    {footer}
  </div>
);
}

// products.jsx : Page
const data = await fetchProducts();
export default function ProductsPage() {
return (
  <ProductPageTemplate
    header={<Header cartCount={data.cart} />}
    filters={<Filters categories={data.cats} />}
    products={<ProductList items={data.products} />}
  />
);
}