catalg list

src/pages/catalogue/List.tsx

@@ -0,0 +1,25 @@
+import { type FC } from 'react'
+import { useGetCatalog } from '../home/hooks/useHomeData'
+import GridWrapper from '@/components/GridWrapper'
+import CatalogueItem from './components/CatalogueItem'
+
+const CatalogueList: FC = () => {
+
+    const { data } = useGetCatalog()
+
+    return (
+        <div className='w-full mt-5'>
+            <GridWrapper desktop={4} gapDesktop={40} mobile={1}>
+                {
+                    data?.data?.map((item) => {
+                        return (
+                            <CatalogueItem key={item.id} item={item} />
+                        )
+                    })
+                }
+            </GridWrapper>
+        </div>
+    )
+}
+
+export default CatalogueList

src/pages/catalogue/components/CatalogueItem.tsx

@@ -0,0 +1,42 @@
+import { type FC } from 'react'
+import { Edit, Eye, Share, Trash } from 'iconsax-react'
+import type { CatalogItemType } from '../types/Types'
+import moment from 'moment-jalaali'
+
+type Props = {
+    item: CatalogItemType
+}
+
+const CatalogueItem: FC<Props> = ({ item }) => {
+    return (
+        <div className='bg-white p-6 rounded-3xl w-full'>
+            <div className='flex gap-4 items-center'>
+                <div className='w-[64px] h-[89px] bg-gray-200'></div>
+                <div>
+                    <h6>
+                        {item.name}
+                    </h6>
+                    <div className='mt-2 text-[#999999] text-xs'>
+                        {moment(item.createdAt).format('jYYYY/jMM/jDD')}
+                    </div>
+                </div>
+            </div>
+            <div className='flex justify-end gap-1 items-center'>
+                <div className='size-6 bg-[#EAECF4] rounded-md flex justify-center items-center'>
+                    <Eye size={18} color='#0047FF' />
+                </div>
+                <div className='size-6 bg-[#EAECF4] rounded-md flex justify-center items-center'>
+                    <Edit size={18} color='#0047FF' />
+                </div>
+                <div className='size-6 bg-[#EAECF4] rounded-md flex justify-center items-center'>
+                    <Share size={18} color='#000' />
+                </div>
+                <div className='size-6 bg-[#EAECF4] rounded-md flex justify-center items-center'>
+                    <Trash size={18} color='#E12800' />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CatalogueItem

src/pages/catalogue/types/Types.ts

@@ -0,0 +1,12 @@
+import type { BaseResponse } from "@/shared/types/SharedTypes";
+
+export type CatalogItemType = {
+  content: string;
+  id: string;
+  name: string;
+  size: string;
+  status: string;
+  createdAt: string;
+};
+
+export type CatalogResponseType = BaseResponse<CatalogItemType[]>;

src/pages/home/service/HomeService.ts

@@ -1,5 +1,6 @@
 import axios from "@/config/axios";
 import type { CreateCatalogParamsType } from "../types/Types";
+import type { CatalogResponseType } from "@/pages/catalogue/types/Types";
 
 export const createCatalog = async (params: CreateCatalogParamsType) => {
   const { data } = await axios.post("/catalogue", params);
@@ -7,7 +8,7 @@ export const createCatalog = async (params: CreateCatalogParamsType) => {
 };
 
 export const getCatalogs = async () => {
-  const { data } = await axios.get("/catalogue");
+  const { data } = await axios.get<CatalogResponseType>("/catalogue");
   return data;
 };