Jules-Sns/ecommerce-app/pages/products.vue

<script setup lang="ts">
import ProductCard from '~/components/ProductCard.vue';

const products = [
  {
    name: 'Crystal Buckle Heels',
    price: '$249.00',
    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuDFgRVLo9r2hiuGgs2Abz_T6QKG9bOi3wc9zsCQDh4YPBMqYZEqAY1hYCrq4uaRMy1-MATzPvgWEfCHTNTik6id4JZQsOSvIuc7iqdOOJ3y2SjL_VSd95VnBnFSdlkhZ3lB7whEYd4JgrGDzMW1DqRcBK2UJAqR7-6RyF3eQZvUxNScqGpUndwdU3eQa-m8zfUaCNa0Oim6p8QVlSsKxEvLdt11LBBZc7s3AJtD0L8s0shyWOQztiC06zBvvNE7q5wTPvGHZxs0QGkw'
  },
  {
    name: 'Aura Running Sneaker',
    price: '$120.00',
    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBUsoj7sI3otebpOT1NvFacPi_bAMGK7M3XtgTWHidCzih-2B1hc_KOboRzlmnpqSgX1SRXJOP9gwwGplvwwYNGePtxMYBdtBhoXrIezkhaxS3cmKQ3QzJ8isICLNJR3sz3GqQdPFuBf2uHATljRPogFt7pz9Cep0n-dpyRoGRK46rUz5I3ZlyzKozkthLm192lM0NVLV5b1VeglxznHPBCon4mh991UkMULX76hF-b3MgTVTXwqV7H8PGOSzcGHPRIhXlaGNVjMUzh'
  },
  {
    name: 'Classic Leather Boot',
    price: '$180.00',
    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuASYqQ-xv37442xXiKtayimwYtsTwOCVoPrxqaTGCd78jFIKE7g7PJIw_Qqz1jQNLleGS7T3gdD1o7DPDTpHBy8aA6O9R-GMCZGoyEQHEGlXIdo3upRGRjrZvyo6XomAmQc8lNn-ndUbH-ljkWunHJNeA5vAlpdj0IvSIhKPwNJHDof3fTX0kHQtNOX4A6kybAFp6WQsGw1AAIkAYwkKzIvKpxars9A-2oORUY_DqZppwmveUZQqS0_UdDAuWHFsBgPPkU2VDgyfM0M'
  },
  {
    name: 'Essential Leather Flat',
    price: '$95.00',
    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuAL2vyOQmOO4bSBIZbGPkf7-mh-KNap_e9mpQqEnBT90u_Jyu0m5sFQmwWUps7suJk4jT1dIT19UB_xcOcjdHrEXPKBkTptuKaiGy5lQOKUZ5u-nOHeGRizo1Y9sinFrq0RB6zimeAJ1hGmBc-ZNa1i3Pcz9LVP6ZZc4YBPBE-ggXMj6WmyBFGsg4NjDEh0Eni4cx8kRGiiUTQHfaNr5l1G2OOvUkCd08Xt4SUjA_heSHqToJRxbUlACq5TSwpGVoKJP31TnLFiBz0_'
  },
  {
    name: 'Retro Runner 95',
    price: '$145.00',
    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuC3Y_W0OtGAaWhjNJdTXpe_MYiY-ScEB4UCYIa_s6FO9yzvTZ_7FdrtfbxP3Hmv8w4k9aR01kQidWeAGACUpaqMCvYzIeNnSSqP12y4atL1I2Afk6LLpRZzeooGx68gj5mGyrK_GDjTyozj3uA_QEUzlSLHOppzk_eDBr84UngqCl9pl3uhpUr_A51hHJ07Gj8hQontBjGYWE6IlUDh-h0fcKTFGrYTZplFJ13pzXT6UycWmAVVV8E2gTVrMOqC9IOotVlrDpLf0kpT'
  },
  {
    name: 'Minimalist Sandal',
    price: '$88.00',
    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBmi5QsPgRn3vix_w7I69BCImcy3cow7lvsuSD1VftP4jy3qoy5N0JlpvAJ4ed533Tq-scSsaIFX-xdSzUZrNfkhhq_2QzaBbes1c_X5cQ2UgkRoJPpNneOPELvk3QNMRZGPAU3Kqb16A_7JjHkJiFjhwykYzNP6_GBuQK9KZ2Wyh3NkNqk62iDWhbWMfNOe9aJDeeDZtCbo9YfIiRJfhH3_SDA_YzmBFRvq0riET-tEuz0H5meo1vZ7W7TsOSImSEN0AUA5WzmJZtO'
  }
]
</script>

<template>
  <main class="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
    <div class="mb-6">
      <!-- Breadcrumbs -->
      <div class="flex flex-wrap gap-2 text-sm">
        <a class="font-medium text-gray-500 dark:text-gray-400 hover:text-primary" href="#">Home</a>
        <span class="font-medium text-gray-500 dark:text-gray-400">/</span>
        <a class="font-medium text-gray-500 dark:text-gray-400 hover:text-primary" href="#">Women</a>
        <span class="font-medium text-gray-500 dark:text-gray-400">/</span>
        <span class="font-medium text-[#0d111b] dark:text-white">Shoes</span>
      </div>
    </div>
    <div class="grid grid-cols-1 gap-8 lg:grid-cols-4 lg:gap-12">
      <!-- Sidebar with Filters -->
      <aside class="w-full lg:col-span-1">
        <div class="sticky top-28 space-y-6">
          <div class="flex items-center justify-between">
            <h3 class="text-xl font-bold text-[#0d111b] dark:text-white">Filters</h3>
            <button class="text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-primary">Clear All</button>
          </div>
          <!-- Category Filter -->
          <div class="space-y-4 border-t border-gray-200 dark:border-gray-700 pt-6">
            <h4 class="font-semibold text-[#0d111b] dark:text-white">Category</h4>
            <ul class="space-y-2 text-sm">
              <li><a class="text-gray-600 dark:text-gray-300 hover:text-primary" href="#">Sneakers</a></li>
              <li><a class="text-gray-600 dark:text-gray-300 hover:text-primary" href="#">Heels</a></li>
              <li><a class="text-gray-600 dark:text-gray-300 hover:text-primary" href="#">Boots</a></li>
              <li><a class="text-gray-600 dark:text-gray-300 hover:text-primary" href="#">Flats</a></li>
              <li><a class="text-gray-600 dark:text-gray-300 hover:text-primary" href="#">Sandals</a></li>
            </ul>
          </div>
          <!-- Price Filter -->
          <div class="space-y-4 border-t border-gray-200 dark:border-gray-700 pt-6">
            <h4 class="font-semibold text-[#0d111b] dark:text-white">Price Range</h4>
            <div class="flex items-center gap-2">
              <input class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary" max="500" min="0" type="range" value="75" />
            </div>
            <div class="flex justify-between text-sm text-gray-500 dark:text-gray-400">
              <span>$0</span>
              <span>$500+</span>
            </div>
          </div>
        </div>
      </aside>
      <!-- Product Grid -->
      <div class="w-full lg:col-span-3">
        <div class="flex flex-col gap-6">
          <div class="flex flex-wrap items-center justify-between gap-4">
            <div class="flex flex-col gap-1">
              <!-- Page Heading -->
              <h1 class="text-3xl font-black leading-tight tracking-[-0.033em] text-[#0d111b] dark:text-white sm:text-4xl">Women's Shoes</h1>
              <!-- Meta Text -->
              <p class="text-sm font-normal leading-normal text-gray-500 dark:text-gray-400">Showing 1-12 of 128 results</p>
            </div>
            <!-- Chips for Sorting -->
            <div class="flex gap-3">
              <button class="flex h-10 shrink-0 items-center justify-center gap-x-2 rounded-lg bg-gray-200/60 dark:bg-gray-800/60 pl-4 pr-3 text-[#0d111b] dark:text-white hover:bg-gray-200 dark:hover:bg-gray-800">
                <p class="text-sm font-medium leading-normal">Sort by: Relevance</p>
                <span class="material-symbols-outlined">expand_more</span>
              </button>
            </div>
          </div>
          <!-- Product Grid Container -->
          <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 xl:grid-cols-3">
            <ProductCard v-for="product in products" :key="product.name" :product="product" />
          </div>
        </div>
      </div>
    </div>
  </main>
</template>