component button add catalogue

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