catalog list placeholder

.env

@@ -1,3 +1,4 @@
-VITE_API_URL = 'http://10.165.85.88:4000'
+# VITE_API_URL = 'https://dpage.liara.run'
+VITE_API_URL = 'http://188.121.103.8:4141'
 VITE_TOKEN_NAME = 'dpage-editor-t'
 VITE_REFRESH_TOKEN_NAME = 'dpage-editor-refresh-t'

src/components/Button.tsx

@@ -27,7 +27,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
         <button
             ref={ref}
             className={clx(
-                'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-black/10 disabled:pointer-events-none disabled:opacity-50',
+                'inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-black/10 disabled:pointer-events-none disabled:opacity-50',
                 variantClasses[variant],
                 className
             )}

src/pages/catalogue/List.tsx

@@ -2,13 +2,30 @@ 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'
 
 const CatalogueList: FC = () => {
 
-    const { data, refetch } = useGetCatalog()
+    const { data, refetch, isPending } = 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'>
+                        هنوز کاتالوگی ساخته نشده است.
+                    </div>
+
+                    <Link to={Paths.home}>
+                        <Button className='w-fit px-4'>
+                            ساخت کاتالوگ جدید
+                        </Button>
+                    </Link>
+                </div>
+            }
             <GridWrapper desktop={4} gapDesktop={40} mobile={1}>
                 {
                     data?.data?.map((item) => {