From fdf1a577614d25669524e1c1eb3c0b3d5b93c9aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Afra=20=E2=80=8C?= <afra@Afras-MacBook-Air.local>
Date: Sun, 9 Aug 2026 09:52:09 +0330
Subject: [PATCH] perf: modified billboard page

---
 src/components/layout/PageBreadcrumb.tsx |  3 ---
 src/components/ui/LucideIcon.tsx         |  4 ++-
 src/pages/Billboards/AdDetail.tsx        | 33 +++++++++++++++++++-----
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/layout/PageBreadcrumb.tsx b/src/components/layout/PageBreadcrumb.tsx
index 582f23a..b83ebc2 100644
--- a/src/components/layout/PageBreadcrumb.tsx
+++ b/src/components/layout/PageBreadcrumb.tsx
@@ -1,8 +1,6 @@
 import { Breadcrumb } from 'antd';
-import { Home } from 'lucide';
 import type { ReactNode } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import LucideIcon from '@/components/ui/LucideIcon';
 import { sidebarItems } from '@/constants/navigation';
 import { spacing } from '@/design/tokens/spacing';
 
@@ -18,7 +16,6 @@ const PageBreadcrumb = () => {
 
   const homeLabel = (
     <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
-      <LucideIcon icon={Home} size={14} />
       داشبورد
     </span>
   );
diff --git a/src/components/ui/LucideIcon.tsx b/src/components/ui/LucideIcon.tsx
index b484023..e9b3fef 100644
--- a/src/components/ui/LucideIcon.tsx
+++ b/src/components/ui/LucideIcon.tsx
@@ -8,10 +8,12 @@ interface LucideIconProps extends SVGProps<SVGSVGElement> {
 
 const toReactPropName = (name: string) => name.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
 
-const LucideIcon = ({ icon, ...props }: LucideIconProps): ReactElement => {
+const LucideIcon = ({ icon, size, ...props }: LucideIconProps): ReactElement => {
   const svgProps = {
     ...props,
     xmlns: 'http://www.w3.org/2000/svg',
+    width: size,
+    height: size,
     fill: 'none',
     stroke: 'currentColor',
     strokeWidth: 2,
diff --git a/src/pages/Billboards/AdDetail.tsx b/src/pages/Billboards/AdDetail.tsx
index 589b4fd..c99875a 100644
--- a/src/pages/Billboards/AdDetail.tsx
+++ b/src/pages/Billboards/AdDetail.tsx
@@ -1,5 +1,5 @@
 import { App, Button, Card, Empty, Image, Spin, Tag, Tooltip, Typography } from 'antd';
-import { ArrowRight, FileText } from 'lucide';
+import { ArrowRight, FileText, Tag as TagIcon } from 'lucide';
 import { useEffect, useState } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import LucideIcon from '@/components/ui/LucideIcon';
@@ -238,14 +238,35 @@ const AdDetail = () => {
             </Card>
           </div>
 
-          {/* Description + tags */}
+          {/* Description */}
           <Card title="توضیحات" variant="outlined" style={sectionCardStyle}>
-            <Paragraph style={{ color: colors.text, whiteSpace: 'pre-wrap', marginBottom: spacing.md }}>
+            <Paragraph style={{ color: colors.text, whiteSpace: 'pre-wrap', margin: 0 }}>
               {ad.description ?? <EmptyValue />}
             </Paragraph>
-            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
-              {ad.tags.length ? ad.tags.map((tag) => <Tag key={tag}>{tag}</Tag>) : <EmptyValue />}
-            </div>
+          </Card>
+
+          {/* Tags */}
+          <Card
+            title={
+              <span style={{ display: 'inline-flex', alignItems: 'center', gap: spacing.xs }}>
+                <LucideIcon icon={TagIcon} size={14} color={colors.textSecondary} />
+                برچسب‌ها
+              </span>
+            }
+            variant="outlined"
+            style={sectionCardStyle}
+          >
+            {ad.tags.length ? (
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: spacing.xs }}>
+                {ad.tags.map((tag) => (
+                  <Tag key={tag} color={colors.primaryLight} style={{ color: colors.primary, fontSize: 13 }}>
+                    {tag}
+                  </Tag>
+                ))}
+              </div>
+            ) : (
+              <EmptyValue />
+            )}
           </Card>
 
           {/* Media */}