From aee7285465463d16fefba91d57dc8c6b7d301208 Mon Sep 17 00:00:00 2001
From: Lavi2910 <almog.lavi29@gmail.com>
Date: Thu, 23 Apr 2026 20:36:48 +0300
Subject: [PATCH 1/2] added category pills

---
 .../customer/DiscoveryPage/DiscoveryPage.tsx  |  3 +-
 .../CategoryPills/CategoryPills.tsx           | 42 +++++++++++++++++++
 .../components/CategoryPills/styles.ts        | 32 ++++++++++++++
 3 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/CategoryPills.tsx
 create mode 100644 apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/styles.ts

diff --git a/apps/web/src/pages/customer/DiscoveryPage/DiscoveryPage.tsx b/apps/web/src/pages/customer/DiscoveryPage/DiscoveryPage.tsx
index 8bd9871..fb2719c 100644
--- a/apps/web/src/pages/customer/DiscoveryPage/DiscoveryPage.tsx
+++ b/apps/web/src/pages/customer/DiscoveryPage/DiscoveryPage.tsx
@@ -2,6 +2,7 @@ import { useAuthStore } from '@soly/shared';
 import { DiscoveryHeader } from './components/DiscoveryHeader/DiscoveryHeader';
 import * as styles from './styles';
 import { SearchBar } from './components/SearchBar/SearchBar';
+import { CategoryPills } from './components/CategoryPills/CategoryPills';
 export const DiscoveryPage = () => {
   const user = useAuthStore((state) => state.user);
   const token = useAuthStore((state) => state.token);
@@ -12,7 +13,7 @@ export const DiscoveryPage = () => {
     <div style={styles.pageContainer}>
       <DiscoveryHeader name={name} avatar={avatar} />
       <SearchBar />
-      {/* CategoryPills — next */}
+      <CategoryPills />
       {/* PromoBanner — next */}
       {/* SectionHeader + BusinessCards — next */}
     </div>
diff --git a/apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/CategoryPills.tsx b/apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/CategoryPills.tsx
new file mode 100644
index 0000000..4895b9c
--- /dev/null
+++ b/apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/CategoryPills.tsx
@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import { theme } from 'antd';
+import { SolyTypography } from '@soly/ui';
+import * as styles from './styles';
+
+const CATEGORIES = [
+  { key: 'all', label: '+ הכל' },
+  { key: 'hair', label: '💈 ספרות' },
+  { key: 'nails', label: '💅 ציפורניים' },
+  { key: 'styling', label: '💇 עיצוב שיער' },
+  { key: 'skincare', label: '🧴 טיפוח עור' },
+  { key: 'massage', label: '🫧 עיסוי' },
+];
+
+export const CategoryPills = () => {
+  const { token } = theme.useToken();
+  const [active, setActive] = useState('all');
+
+  return (
+    <div style={styles.scrollContainer}>
+      {CATEGORIES.map(({ key, label }) => (
+        <button
+          key={key}
+          type="button"
+          style={
+            active === key
+              ? styles.activePillStyle
+              : styles.getInactivePill(token)
+          }
+          onClick={() => setActive(key)}
+        >
+          <SolyTypography
+            variant="captionInherit"
+            color={active === key ? 'white' : token.colorText}
+          >
+            {label}
+          </SolyTypography>
+        </button>
+      ))}
+    </div>
+  );
+};
diff --git a/apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/styles.ts b/apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/styles.ts
new file mode 100644
index 0000000..19b8a58
--- /dev/null
+++ b/apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/styles.ts
@@ -0,0 +1,32 @@
+import type { CSSProperties } from 'react';
+import type { GlobalToken } from 'antd';
+import { colors } from '@soly/shared';
+
+export const scrollContainer: CSSProperties = {
+  display: 'flex',
+  flexDirection: 'row',
+  gap: '0.5rem',
+  overflowX: 'auto',
+  padding: '0 1rem',
+  scrollbarWidth: 'none',
+};
+
+export const activePillStyle: CSSProperties = {
+  background: colors.gradientPrimary,
+  border: '1px solid transparent',
+  borderRadius: 20,
+  padding: '0.35rem 0.85rem',
+  cursor: 'pointer',
+  whiteSpace: 'nowrap',
+  flexShrink: 0,
+};
+
+export const getInactivePill = (token: GlobalToken): CSSProperties => ({
+  backgroundColor: token.colorBgContainer,
+  border: `1px solid ${token.colorBorder}`,
+  borderRadius: 20,
+  padding: '0.35rem 0.85rem',
+  cursor: 'pointer',
+  whiteSpace: 'nowrap',
+  flexShrink: 0,
+});

From 4757b2c4189af03e0ac88ab4c273ce462fb727e6 Mon Sep 17 00:00:00 2001
From: Lavi2910 <almog.lavi29@gmail.com>
Date: Thu, 23 Apr 2026 20:43:55 +0300
Subject: [PATCH 2/2] .

---
 .../components/CategoryPills/CategoryPills.tsx              | 6 +++---
 .../DiscoveryPage/components/CategoryPills/styles.ts        | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/CategoryPills.tsx b/apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/CategoryPills.tsx
index 4895b9c..b482fee 100644
--- a/apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/CategoryPills.tsx
+++ b/apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/CategoryPills.tsx
@@ -4,7 +4,7 @@ import { SolyTypography } from '@soly/ui';
 import * as styles from './styles';
 
 const CATEGORIES = [
-  { key: 'all', label: '+ הכל' },
+  { key: 'all', label: 'הכל' },
   { key: 'hair', label: '💈 ספרות' },
   { key: 'nails', label: '💅 ציפורניים' },
   { key: 'styling', label: '💇 עיצוב שיער' },
@@ -17,7 +17,7 @@ export const CategoryPills = () => {
   const [active, setActive] = useState('all');
 
   return (
-    <div style={styles.scrollContainer}>
+    <div style={styles.scrollContainerStyle}>
       {CATEGORIES.map(({ key, label }) => (
         <button
           key={key}
@@ -25,7 +25,7 @@ export const CategoryPills = () => {
           style={
             active === key
               ? styles.activePillStyle
-              : styles.getInactivePill(token)
+              : styles.getInactivePillStyle(token)
           }
           onClick={() => setActive(key)}
         >
diff --git a/apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/styles.ts b/apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/styles.ts
index 19b8a58..0d513f3 100644
--- a/apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/styles.ts
+++ b/apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/styles.ts
@@ -2,7 +2,7 @@ import type { CSSProperties } from 'react';
 import type { GlobalToken } from 'antd';
 import { colors } from '@soly/shared';
 
-export const scrollContainer: CSSProperties = {
+export const scrollContainerStyle: CSSProperties = {
   display: 'flex',
   flexDirection: 'row',
   gap: '0.5rem',
@@ -21,7 +21,7 @@ export const activePillStyle: CSSProperties = {
   flexShrink: 0,
 };
 
-export const getInactivePill = (token: GlobalToken): CSSProperties => ({
+export const getInactivePillStyle = (token: GlobalToken): CSSProperties => ({
   backgroundColor: token.colorBgContainer,
   border: `1px solid ${token.colorBorder}`,
   borderRadius: 20,