component button add catalogue

src/assets/icons/add_catalogue.svg

@@ -0,0 +1,9 @@
+<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.0833 19.5833V29.375C43.0833 39.1666 39.1666 43.0833 29.375 43.0833H17.625C7.83329 43.0833 3.91663 39.1666 3.91663 29.375V17.625C3.91663 7.83329 7.83329 3.91663 17.625 3.91663H27.4166" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M43.0833 19.5833H35.25C29.375 19.5833 27.4166 17.625 27.4166 11.75V3.91663L43.0833 19.5833Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.7084 25.4584H25.4584" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.7084 33.2916H21.5417" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M47.1622 39.436C47.1609 41.3021 46.5971 43.1259 45.5421 44.6764C44.4871 46.2269 42.9884 47.4345 41.2357 48.1463C39.483 48.8581 37.5551 49.0421 35.6961 48.6749C33.8371 48.3078 32.1305 47.406 30.7925 46.0839C29.4545 44.7617 28.5452 43.0785 28.1797 41.2474C27.8142 39.4163 28.0089 37.5197 28.7392 35.7976C29.4696 34.0755 30.7026 32.6054 32.2823 31.5733C33.862 30.5413 35.7173 29.9938 37.6134 30.0001C40.1416 30.0348 42.5558 31.0412 44.34 32.8044C46.1243 34.5676 47.1372 36.9477 47.1622 39.436Z" fill="#8C90A3"/>
+<path d="M34 39.5H41" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M37.5 43V36" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/pages/catalogue/List.tsx

@@ -2,17 +2,15 @@ import { type FC } from 'react'
 import { useGetCatalog } from '../home/hooks/useHomeData'
 import GridWrapper from '@/components/GridWrapper'
 import CatalogueItem from './components/CatalogueItem'
-import Button from '@/components/Button'
-import { Link } from 'react-router-dom'
-import { Paths } from '@/config/Paths'
+import ButtonAddCatalogue from './components/ButtonAddCatalogue'
 
 const CatalogueList: FC = () => {
 
-    const { data, refetch, isPending } = useGetCatalog()
+    const { data, refetch } = useGetCatalog()
 
     return (
         <div className='w-full mt-5'>
-            {
+            {/* {
                 !isPending && !data?.data?.length &&
                 <div className='flex flex-col items-center gap-5'>
                     <div className='text-gray-500'>
@@ -25,7 +23,7 @@ const CatalogueList: FC = () => {
                         </Button>
                     </Link>
                 </div>
-            }
+            } */}
             <GridWrapper desktop={4} gapDesktop={40} mobile={1}>
                 {
                     data?.data?.map((item) => {
@@ -34,6 +32,7 @@ const CatalogueList: FC = () => {
                         )
                     })
                 }
+                <ButtonAddCatalogue isFirst={data?.data?.length === 0} />
             </GridWrapper>
         </div>
     )

src/pages/catalogue/components/ButtonAddCatalogue.tsx

@@ -0,0 +1,69 @@
+import type { FC } from 'react'
+import { Paths } from '@/config/Paths'
+import { Add } from 'iconsax-react'
+import { Link } from 'react-router-dom'
+import AddCatalogueIcon from '@/assets/icons/add_catalogue.svg'
+
+type Props = {
+    isFirst: boolean
+}
+
+const ButtonAddCatalogue: FC<Props> = ({ isFirst }) => {
+
+    if (isFirst) {
+        return (
+            <Link
+                to={Paths.home}
+                className="flex-1 flex-col bg-white min-w-[40%] rounded-3xl xl:p-6 p-4 xl:min-w-[20%]  flex justify-center items-center min-h-[152px]"
+            >
+                <img src={AddCatalogueIcon} alt="add-catalogue" className='size-12' />
+                <div className='mt-4 flex gap-1 items-center'>
+                    <Add size={22} color="#000" />
+                    <div className='text-xs'>کاتالوگ جدید</div>
+                </div>
+            </Link>
+        )
+    }
+
+    return (
+        <Link
+            to={Paths.home}
+            className="flex-1 min-w-[40%] xl:p-6 p-4 xl:min-w-[20%]  flex justify-center items-center min-h-[152px]"
+            style={{
+                position: 'relative',
+            }}
+        >
+            <svg
+                width="100%"
+                height="100%"
+                xmlns="http://www.w3.org/2000/svg"
+                style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    zIndex: -1,
+                    borderRadius: '22px',
+                }}
+            >
+                <rect
+                    width="100%"
+                    height="100%"
+                    fill="none"
+                    // rx="22"
+                    ry="22"
+                    stroke="#8C90A3"
+                    strokeWidth="2"
+                    strokeDasharray="6,14"
+                // strokeDashoffset="25"
+                />
+            </svg>
+            <div style={{ zIndex: 1 }}>
+                <Add size={38} color="#8C90A3" />
+            </div>
+
+
+        </Link>
+    )
+}
+
+export default ButtonAddCatalogue