Test

src/App.tsx

@@ -1,12 +1,12 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import Layout from './Layout'
+import Router from './Router'
 
 const queryClient = new QueryClient()
 
 function App() {
     return (
         <QueryClientProvider client={queryClient}>
-            <Layout />
+            <Router />
         </QueryClientProvider>
     )
 }

src/components/LinkDerectory/LinkDerectory.tsx

@@ -0,0 +1,29 @@
+import { useLocation } from 'react-router-dom'
+import routerList from '../../constants/routes'
+import { Fragment } from 'react'
+interface TitlePageProps {
+    titlePage?: string
+}
+export const LinkDerectory = ({ titlePage }: TitlePageProps) => {
+    const location = useLocation()
+    const link = location.pathname.split('/')[1]
+    const url = routerList.find((data) => data.href === `/${link}`)
+    return (
+        <div>
+            <h1 className="text-3xl font-semibold text-[#02173F]">
+                {titlePage ? titlePage : url?.title}
+            </h1>
+            <div className="my-2 flex items-center text-sm">
+                <p>Trang chủ</p>
+                <span className="mx-2  block h-1 w-1 rounded-full bg-gray-500"></span>
+                <p>{url?.title}</p>
+                {location.state && (
+                    <Fragment>
+                        <span className="mx-2 block h-1 w-1 rounded-full bg-gray-500"></span>
+                        <p>{location.state}</p>
+                    </Fragment>
+                )}
+            </div>
+        </div>
+    )
+}

src/components/LinkDerectory/index.ts

@@ -0,0 +1 @@
+export * from './LinkDerectory'

src/components/Panigation/Panigation.tsx

@@ -12,7 +12,9 @@ export interface IPanigation {
     pageSize: number
     pageOption: number[]
     labelPageOption?: string
+    // eslint-disable-next-line no-unused-vars
     onChangePage: (params: number) => void
+    // eslint-disable-next-line no-unused-vars
     onChangePageSize: (params: string) => void
 }
 

src/components/Panigation/PanigationQ.tsx

@@ -0,0 +1,101 @@
+import { AiOutlineLeft, AiOutlineRight } from 'react-icons/ai'
+import { useEffect, useRef, useState } from 'react'
+
+export interface ProductProps {
+    title: string
+    price: number
+    image: string
+}
+interface PaginationProps {
+    onListItemChange: (_newList: ProductProps[]) => void
+    listItemRender: ProductProps[]
+}
+export default function PanigationQ(props: PaginationProps) {
+    const { onListItemChange, listItemRender } = props
+    const inputRef = useRef(12)
+    const [pagination, setPagination] = useState(1)
+    const [totalPages, setTotalPages] = useState(
+        Math.ceil(listItemRender.length / 12),
+    )
+    const nextPage = (data: ProductProps[], currentPage: number) => {
+        const totalItem = inputRef.current
+
+        const startIndex = currentPage * totalItem
+        const lastIndex = startIndex + totalItem
+
+        const newData = data.slice(startIndex, lastIndex)
+        return newData
+    }
+    // set listItem to render when the page changes
+    const [listItem, setListItem] = useState(nextPage(listItemRender, 0))
+    onListItemChange(listItem)
+
+    useEffect(() => {
+        setListItem(nextPage(listItemRender, pagination - 1))
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pagination])
+
+    // nextPage
+    const nextCount = () => {
+        if (pagination >= totalPages) return
+        else {
+            setPagination((pev) => pev + 1)
+        }
+    }
+    // returnPage
+    const reCount = () => {
+        if (pagination === 1) return
+        else {
+            setPagination((pev) => pev - 1)
+        }
+    }
+    //select page 12 24 36
+    const sellectListItem = (number: number) => {
+        const newList = listItemRender.slice(0, number)
+        return newList
+    }
+    const handleNumberValue = (e) => {
+        const numberPage = parseInt(e.target.value)
+        inputRef.current = numberPage
+        const toltalPageCurrent = Math.ceil(listItemRender.length / numberPage)
+        setTotalPages(toltalPageCurrent)
+        setListItem(sellectListItem(numberPage))
+        setPagination(1)
+    }
+
+    return (
+        <div className="mt-6 flex justify-end">
+            <div className="mr-6 flex w-[100px] items-center justify-between  text-[#858D92]">
+                <AiOutlineLeft
+                    onClick={reCount}
+                    className={`${
+                        pagination <= 1
+                            ? 'cursor-not-allowed'
+                            : 'cursor-pointer'
+                    } text-xl`}
+                />
+                <p>{pagination}</p>
+                <p>-</p>
+                <p>{totalPages}</p>
+                <AiOutlineRight
+                    onClick={nextCount}
+                    className={`${
+                        pagination >= totalPages
+                            ? 'cursor-not-allowed'
+                            : 'cursor-pointer'
+                    } text-xl`}
+                />
+            </div>
+            <select
+                onChange={handleNumberValue}
+                name=""
+                id=""
+                className=" z-10 cursor-pointer rounded-full border-[1px] px-2 py-2  text-[#858D92] outline-none "
+            >
+                <option value="12">12 sản phẩm</option>
+                <option value="24">24 sản phẩm</option>
+                <option value="36">36 sản phẩm</option>
+            </select>
+        </div>
+    )
+}

src/components/Search/Search.tsx

@@ -0,0 +1,3 @@
+export default function Search() {
+    return <div>Search</div>
+}

src/components/Search/index.ts

@@ -0,0 +1 @@
+export * from './Search'

src/components/TableData/StyledDataGrid.tsx

@@ -4,7 +4,7 @@ import { IDataGridProps } from './table.interface'
 
 const StyledDataGrid = styled(DataGrid, {
     shouldForwardProp: (prop) => prop !== 'checkBox',
-})<Omit<IDataGridProps, 'onHandleSearch'>>(({ checkBox }) => ({
+})<Omit<IDataGridProps, 'onHandleSearch' | 'onGetRowId'>>(({ checkBox }) => ({
     border: 0,
     fontFamily: ['Nunito', 'sans-serif'].join(','),
     WebkitFontSmoothing: 'auto',

src/components/TableData/TableData.tsx

@@ -22,6 +22,7 @@ export function TableData(props: IDataGridProps) {
         checkBox = true,
         loading,
         onHandleSearch,
+        onGetRowId,
     } = props
 
     const [filteredRows, setFilteredRows] = useState<IOrder[]>()
@@ -52,7 +53,7 @@ export function TableData(props: IDataGridProps) {
             autoHeight={true}
             pageSizeOptions={pageSizeOptions}
             columnBuffer={0}
-            getRowId={(row: GridRowModel) => row.orderId}
+            getRowId={onGetRowId}
             checkboxSelection={checkBox}
             disableRowSelectionOnClick={!checkBox}
             rowHeight={60}

src/components/TableData/table.interface.ts

@@ -1,4 +1,10 @@
-import { DataGridProps, GridColDef, GridActionsColDef } from '@mui/x-data-grid'
+import {
+    DataGridProps,
+    GridColDef,
+    GridActionsColDef,
+    GridRowModel,
+    GridValidRowModel,
+} from '@mui/x-data-grid'
 
 export interface IDataGridProps extends DataGridProps {
     pageSize?: number
@@ -7,6 +13,8 @@ export interface IDataGridProps extends DataGridProps {
     loading?: boolean
     onHandleSearch: () => void
     pageSizeOptions: number[]
+    // eslint-disable-next-line no-unused-vars
+    onGetRowId: (params: GridRowModel) => GridValidRowModel[string | symbol]
 }
 
 export interface IHandleNameChange {