On « co-compose » la page en composants à responsabilité unique : barre de recherche, carte produit, liste et panier.
- La page orchestre les composants et garde l’état global.
- Chaque composant reçoit ses données via $props et remonte ses actions.
- On sépare le style : chaque .svelte embarque son <style> scoped.
src/routes/+page.sveltesvelte
import SearchBar from '$lib/SearchBar.svelte'
import ProductCard from '$lib/ProductCard.svelte'
<SearchBar bind:query />
<div class='grid'>
{#each filtres as produit (produit.id)}
<ProductCard {produit} onAjouter={(p) => (panier = [p.id, ...panier])} />
{:else}
<p class='vide'>Aucun produit ne correspond.</p>
{/each}
</div>