Redux setup

src/redux/apiSlice.ts

@@ -0,0 +1,14 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
+
+
+export const apiSlice = createApi({
+    reducerPath: "api",
+    baseQuery: fetchBaseQuery = ({ baseUrl: "src/utlis/regesterUser.json" }),
+    endpoints: (builder) => ({
+        getStaticJson: builder.query({
+            query: () => 'regesterUser.json'
+        }),
+    })
+})
+
+export const { getStaticJson } = apiSlice

src/store.ts

@@ -0,0 +1,11 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { apiSlice } from "./redux/apiSlice";
+
+export const store = configureStore({
+    reducer: {
+        [apiSlice.reducerPath]: apiSlice.reducer
+    },
+    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(apiSlice.middleware),
+})
+
+export default store

src/userComponents/Navbar.tsx

@@ -39,7 +39,6 @@ const Navbar: React.FC = () => {
             </BreadcrumbCurrentLink>
           </BreadcrumbRoot>
         </Text>
-
         <Flex gap={3} alignItems="center">
           <IoMdNotificationsOutline color="black" size="25px" />
           <Flex alignItems="center" gap={2} >

src/userComponents/UserTable.tsx

@@ -0,0 +1,32 @@
+import { Table } from "@chakra-ui/react";
+
+const Demo = () => {
+  return (
+    <Table.Root size="sm">
+      <Table.Header>
+        <Table.Row>
+          <Table.ColumnHeader>Product</Table.ColumnHeader>
+          <Table.ColumnHeader>Category</Table.ColumnHeader>
+          <Table.ColumnHeader textAlign="end">Price</Table.ColumnHeader>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {items.map((item) => (
+          <Table.Row key={item.id}>
+            <Table.Cell>{item.name}</Table.Cell>
+            <Table.Cell>{item.category}</Table.Cell>
+            <Table.Cell textAlign="end">{item.price}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table.Root>
+  );
+};
+
+const items = [
+  { id: 1, name: "Laptop", category: "Electronics", price: 999.99 },
+  { id: 2, name: "Coffee Maker", category: "Home Appliances", price: 49.99 },
+  { id: 3, name: "Desk Chair", category: "Furniture", price: 150.0 },
+  { id: 4, name: "Smartphone", category: "Electronics", price: 799.99 },
+  { id: 5, name: "Headphones", category: "Accessories", price: 199.99 },
+];

src/utlis/regesterUser.json

@@ -0,0 +1,33 @@
+[
+    {
+      "id": 1,
+      "name": "Laptop",
+      "category": "Electronics",
+      "price": 999.99
+    },
+    {
+      "id": 2,
+      "name": "Coffee Maker",
+      "category": "Home Appliances",
+      "price": 49.99
+    },
+    {
+      "id": 3,
+      "name": "Desk Chair",
+      "category": "Furniture",
+      "price": 150.0
+    },
+    {
+      "id": 4,
+      "name": "Smartphone",
+      "category": "Electronics",
+      "price": 799.99
+    },
+    {
+      "id": 5,
+      "name": "Headphones",
+      "category": "Accessories",
+      "price": 199.99
+    }
+  ]
+