feat: add filter category in home

tailwind.config.js

@@ -2,7 +2,11 @@
 module.exports = {
   content: ["./assets/**/*.js", "./templates/**/*.html.twig"],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        orangeLight: "#F5B100",
+      },
+    },
   },
   plugins: [],
 };

templates/home.html.twig

@@ -5,13 +5,28 @@
 
     <ul class="flex flex-row flex-wrap gap-6 mt-12 lg:flex-col">
       <li>
-        <a href="{{ path('home') }}"> Tous les produits </a>
+        <a
+          class="hover:text-orangeLight transition-colors"
+          href="{{ path('home') }}"
+        >
+          Tous les produits
+        </a>
       </li>
       {% for category in categories %}
       <li>
-        <a href="{{ path('home', { category: category.id }) }}">{{
-          category.name
-        }}</a>
+        {% if category.id == app.request.query.get('category') %}
+        <a
+          class="text-orangeLight font-bold hover:text-orangeLight"
+          href="{{ path('home', { category: category.id }) }}"
+          >{{ category.name }}</a
+        >
+        {% else %}
+        <a
+          class="text-black font-light hover:text-orangeLight hover:font-bold transition-colors"
+          href="{{ path('home', { category: category.id }) }}"
+          >{{ category.name }}</a
+        >
+        {% endif %}
       </li>
       {% endfor %}
     </ul>
@@ -20,7 +35,8 @@
   <section>
     {% if app.request.query.get('category') %}
     <h2 class="text-5xl mb-12">
-      Nos produits dans la catégorie "{{ categoryName }}"
+      Nos
+      <span class="text-orangeLight">{{ categoryName }}</span>
     </h2>
     {% else %}
     <h2 class="text-5xl mb-12">Nos produits</h2>
@@ -29,7 +45,9 @@
     <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
       {% for product in products %}
       <a href="{{ path('app_product_show', { id: product.id }) }}">
-        <article class="cursor-pointer border border-[#DCDCDC] p-12">
+        <article
+          class="cursor-pointer border border-[#DCDCDC] p-12 hover:border-4 hover:rounded-md transition hover:border-orangeLight"
+        >
           <img
             class="max-w-full"
             src="{{ asset(product.imageSrc) }}"

templates/product/show.html.twig

@@ -2,7 +2,6 @@
 
 <section class="flex flex-col gap-12 items-center h-full md:flex-row">
   <div class="flex items-center justify-center md:w-6/12">
-
     <img
       class="w-[500px]"
       src="{{ asset(product.imageSrc) }}"
@@ -12,12 +11,12 @@
 
   <div class="w-full md:w-6/12">
     <h2 class="text-6xl">{{ product.title }}</h2>
-    <span class="text-xl text-[#F5B100]">{{ product.price }} €</span>
+    <span class="text-xl text-orangeLight">{{ product.price }} €</span>
     <p class="text-lg my-6">
       {{ product.description }}
     </p>
 
-    <a class="inline-block bg-[#F5B100] py-4 px-12 rounded-md" href="cart.html"
+    <a class="inline-block bg-orangeLight py-4 px-12 rounded-md" href="cart.html"
       >Ajouter au pannier</a
     >
   </div>