From 7cd84f1c66224fe8a35062cee0e511aac44cc423 Mon Sep 17 00:00:00 2001
From: belviskhoremk <belviskhoremk@gmail.com>
Date: Mon, 3 Aug 2026 23:04:38 +0000
Subject: [PATCH] feat: animate Shop's active category filter with a sliding
 pill indicator

---
 src/pages/Shop.module.css | 20 +++++++++++++++++---
 src/pages/Shop.tsx        | 12 ++++++++++--
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/pages/Shop.module.css b/src/pages/Shop.module.css
index 585b4d4..955ee07 100644
--- a/src/pages/Shop.module.css
+++ b/src/pages/Shop.module.css
@@ -8,23 +8,37 @@
   margin-bottom: var(--space-lg);
 }
 
-.filters button {
+.filterButton {
+  position: relative;
   background: none;
   border: 1px solid var(--color-gold);
   padding: 0.5rem 1rem;
   cursor: pointer;
   text-transform: capitalize;
+  overflow: hidden;
+  color: var(--color-charcoal);
 }
 
-.filters button.active {
+.activePill {
+  position: absolute;
+  inset: 0;
   background: var(--color-charcoal);
+  z-index: 0;
+}
+
+.filterLabel {
+  position: relative;
+  z-index: 1;
+}
+
+.filterButton:has(.activePill) .filterLabel {
   color: var(--color-cream);
 }
 
 .grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: var(--space-lg);
+  gap: var(--space-md);
 }
 
 @media (max-width: 640px) {
diff --git a/src/pages/Shop.tsx b/src/pages/Shop.tsx
index 30cf282..5f02a83 100644
--- a/src/pages/Shop.tsx
+++ b/src/pages/Shop.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { motion } from 'framer-motion'
 import ProductCard from '../components/ProductCard'
 import InquiryModal from '../components/InquiryModal'
 import { getProductsByCategory, type Product } from '../data/products'
@@ -18,10 +19,17 @@ function Shop() {
           <button
             key={c}
             type="button"
-            className={c === category ? styles.active : ''}
+            className={styles.filterButton}
             onClick={() => setCategory(c)}
           >
-            {c.replace('-', ' ')}
+            {c === category && (
+              <motion.span
+                layoutId="active-filter-pill"
+                className={styles.activePill}
+                transition={{ type: 'spring', stiffness: 350, damping: 30 }}
+              />
+            )}
+            <span className={styles.filterLabel}>{c.replace('-', ' ')}</span>
           </button>
         ))}
       </div>