From cf50090a444e0f978e23e15f907fa39ff3882c43 Mon Sep 17 00:00:00 2001 From: npcdazai Date: Tue, 14 Jan 2025 19:45:49 +0530 Subject: [PATCH] Login Page --- src/App.tsx | 43 ++++++++++-------- src/DefaultLayout.tsx | 32 ++++++++++++++ src/index.css | 33 ++++++++++++++ src/main.tsx | 14 +++--- src/pages/Manage-users/RegisterUsers.tsx | 55 ++++++++++++++++++++++++ src/redux/apiSlice.ts | 21 +++++---- src/userComponents/UserTable.tsx | 25 +++++------ 7 files changed, 178 insertions(+), 45 deletions(-) create mode 100644 src/DefaultLayout.tsx create mode 100644 src/pages/Manage-users/RegisterUsers.tsx diff --git a/src/App.tsx b/src/App.tsx index 86b8a6c..3c0d8c6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,27 +3,36 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Sidebar from "./userComponents/Sidebar"; import Navbar from "./userComponents/Navbar"; import Dashboard from "./pages/Dashboard"; +import RegisterUsers from "./pages/Manage-users/RegisterUsers"; +import DefaultLayout from "./DefaultLayout"; const App = () => { return ( - -
-
- -
+
+ -
-
- -
-
- - } /> - -
-
-
- + +
+ + // + //
+ //
+ // + //
+ + //
+ //
+ // + //
+ //
+ // + // } /> + // }/> + // + //
+ //
+ //
+ // ); }; diff --git a/src/DefaultLayout.tsx b/src/DefaultLayout.tsx new file mode 100644 index 0000000..ecccb5c --- /dev/null +++ b/src/DefaultLayout.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import Sidebar from "./userComponents/Sidebar"; +import Navbar from "./userComponents/Navbar"; +import Dashboard from "./pages/Dashboard"; +import RegisterUsers from "./pages/Manage-users/RegisterUsers"; + +const DefaultLayout = () => { + return ( + +
+
+ +
+ +
+
+ +
+
+ + } /> + }/> + +
+
+
+ + ); +}; + +export default DefaultLayout; diff --git a/src/index.css b/src/index.css index e69de29..2c6b4ae 100644 --- a/src/index.css +++ b/src/index.css @@ -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 + } + ] + */ \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index 0f374c6..430bc27 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,11 +3,15 @@ import { createRoot } from "react-dom/client"; import "./index.css"; import App from "./App.tsx"; import { Provider } from "./components/ui/provider.tsx"; +import { Provider as ReduxProvider } from "react-redux"; +import store from "./store.ts"; createRoot(document.getElementById("root")!).render( - - - - - + + + + + + + ); diff --git a/src/pages/Manage-users/RegisterUsers.tsx b/src/pages/Manage-users/RegisterUsers.tsx new file mode 100644 index 0000000..a3a6299 --- /dev/null +++ b/src/pages/Manage-users/RegisterUsers.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import { useGetStaticJsonQuery } from "../../redux/apiSlice"; +import { Box, HStack, Input, Kbd, Text, VStack } from "@chakra-ui/react"; +import { InputGroup } from "../../components/ui/input-group"; +import { LuSearch } from "react-icons/lu"; +import UserTable from "../../userComponents/UserTable"; + +const RegisterUsers = () => { + const { data, error, isLoading } = useGetStaticJsonQuery(); + + if (isLoading) return

Loading...

; + + if (error) { + return

An error occurred: {error.message || "Unable to fetch data."}

; + } + + if (!data || data.length === 0) { + return

No data available.

; + } + + console.log(data); + + return ( + + + + + Register Users + + } + maxWidth="362.5px" + borderRadius="50px" + > + + + + + + + + ); +}; + +export default RegisterUsers; diff --git a/src/redux/apiSlice.ts b/src/redux/apiSlice.ts index ff0d2cb..3707ac8 100644 --- a/src/redux/apiSlice.ts +++ b/src/redux/apiSlice.ts @@ -1,14 +1,13 @@ -import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query' - +import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; export const apiSlice = createApi({ - reducerPath: "api", - baseQuery: fetchBaseQuery = ({ baseUrl: "src/utlis/regesterUser.json" }), - endpoints: (builder) => ({ - getStaticJson: builder.query({ - query: () => 'regesterUser.json' - }), - }) -}) + reducerPath: 'api', + baseQuery: fetchBaseQuery({ baseUrl: '/src/utlis/' }), + endpoints: (builder) => ({ + getStaticJson: builder.query({ + query: () => 'regesterUser.json', + }), + }), +}); -export const { getStaticJson } = apiSlice \ No newline at end of file +export const { useGetStaticJsonQuery } = apiSlice; diff --git a/src/userComponents/UserTable.tsx b/src/userComponents/UserTable.tsx index 84bb6c0..412e5ab 100644 --- a/src/userComponents/UserTable.tsx +++ b/src/userComponents/UserTable.tsx @@ -1,10 +1,10 @@ import { Table } from "@chakra-ui/react"; -const Demo = () => { +const UserTable = ({ items }) => { return ( - + Product Category Price @@ -12,9 +12,16 @@ const Demo = () => { {items.map((item) => ( - - {item.name} - {item.category} + + {item.name} + {item.category} {item.price} ))} @@ -23,10 +30,4 @@ const Demo = () => { ); }; -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 }, -]; +export default UserTable;