Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 7506a89

Browse files
thapatechnicalthapatechnical
committedJan 28, 2023
reduxtoolkit introduction 1
0 parents  commit 7506a89

15 files changed

+3067
-0
lines changed
 

‎.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.jsx"></script>
12+
</body>
13+
</html>

‎package-lock.json

+2,706
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "usertable",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@reduxjs/toolkit": "^1.9.1",
13+
"react": "^18.2.0",
14+
"react-dom": "^18.2.0",
15+
"react-icons": "^4.7.1",
16+
"react-redux": "^8.0.5",
17+
"styled-components": "^5.3.6"
18+
},
19+
"devDependencies": {
20+
"@types/react": "^18.0.26",
21+
"@types/react-dom": "^18.0.9",
22+
"@vitejs/plugin-react": "^3.0.0",
23+
"vite": "^4.0.0"
24+
}
25+
}

‎public/vite.svg

+1
Loading

‎src/App.css

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
#root {
2+
max-width: 1280px;
3+
margin: 0 auto;
4+
padding: 2rem;
5+
text-align: center;
6+
}
7+
8+
.logo {
9+
height: 6em;
10+
padding: 1.5em;
11+
will-change: filter;
12+
}
13+
.logo:hover {
14+
filter: drop-shadow(0 0 2em #646cffaa);
15+
}
16+
.logo.react:hover {
17+
filter: drop-shadow(0 0 2em #61dafbaa);
18+
}
19+
20+
@keyframes logo-spin {
21+
from {
22+
transform: rotate(0deg);
23+
}
24+
to {
25+
transform: rotate(360deg);
26+
}
27+
}
28+
29+
@media (prefers-reduced-motion: no-preference) {
30+
a:nth-of-type(2) .logo {
31+
animation: logo-spin infinite 20s linear;
32+
}
33+
}
34+
35+
.card {
36+
padding: 2em;
37+
}
38+
39+
.read-the-docs {
40+
color: #888;
41+
}

‎src/App.jsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from "react";
2+
import Navbar from "./components/Navbar";
3+
import UserDetails from "./components/UserDetails";
4+
5+
const App = () => {
6+
return (
7+
<>
8+
<Navbar />
9+
<UserDetails />
10+
</>
11+
);
12+
};
13+
14+
export default App;

‎src/assets/react.svg

+1
Loading

‎src/components/DeleteAllUser.jsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from "react";
2+
3+
export const DeleteAllUser = () => {
4+
return <div>DeleteAllUser</div>;
5+
};

‎src/components/Navbar.jsx

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
const Navbar = () => {
5+
return (
6+
<Wrapper>
7+
<div>Welcome, to Thapa Education Hub</div>
8+
<h1>Admin Table</h1>
9+
10+
<section>
11+
<div>One Destination for complete Web Development</div>
12+
<nav>
13+
<ul className="menuItems">
14+
<li>
15+
<a href="/" data-item="Home">
16+
Home
17+
</a>
18+
</li>
19+
<li>
20+
<a href="/" data-item="About">
21+
About
22+
</a>
23+
</li>
24+
<li>
25+
<a href="/" data-item="Projects">
26+
Projects
27+
</a>
28+
</li>
29+
<li>
30+
<a href="/" data-item="Code">
31+
Code
32+
</a>
33+
</li>
34+
<li>
35+
<a href="/" data-item="Contact">
36+
Contact
37+
</a>
38+
</li>
39+
</ul>
40+
</nav>
41+
</section>
42+
</Wrapper>
43+
);
44+
};
45+
46+
const Wrapper = styled.section`
47+
nav {
48+
margin: 3rem 0;
49+
background: #f9f9f9;
50+
padding: 1rem 0;
51+
}
52+
nav .menuItems {
53+
list-style: none;
54+
display: flex;
55+
flex-wrap: wrap;
56+
justify-content: space-between;
57+
}
58+
nav .menuItems li {
59+
margin: 1.6rem 5rem;
60+
}
61+
nav .menuItems li a {
62+
text-decoration: none;
63+
color: #8f8f8f;
64+
font-size: 24px;
65+
font-weight: 400;
66+
transition: all 0.5s ease-in-out;
67+
position: relative;
68+
text-transform: uppercase;
69+
}
70+
nav .menuItems li a::before {
71+
content: attr(data-item);
72+
transition: 0.5s;
73+
color: #8254ff;
74+
position: absolute;
75+
top: 0;
76+
bottom: 0;
77+
left: 0;
78+
right: 0;
79+
width: 0;
80+
overflow: hidden;
81+
}
82+
nav .menuItems li a:hover::before {
83+
width: 100%;
84+
transition: all 0.5s ease-in-out;
85+
}
86+
87+
@media screen and (max-width: 998px) {
88+
nav .menuItems li {
89+
margin: 0.6rem 5rem;
90+
}
91+
}
92+
`;
93+
94+
export default Navbar;

‎src/components/UserDetails.jsx

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from "react";
2+
import { DeleteAllUser } from "./DeleteAllUser";
3+
import styled from "styled-components";
4+
5+
const UserDetails = () => {
6+
return (
7+
<Wrapper>
8+
<div className="content">
9+
<div className="admin-table">
10+
<div className="admin-subtitle">List of User Details</div>
11+
<button className="btn add-btn">Add New Users</button>
12+
</div>
13+
<ul>
14+
{/* <li>Hi</li>
15+
<li>Hii</li> */}
16+
</ul>
17+
<hr />
18+
<DeleteAllUser />
19+
</div>
20+
</Wrapper>
21+
);
22+
};
23+
24+
const Wrapper = styled.section`
25+
margin: 1rem 3.2rem;
26+
27+
.content ul {
28+
list-style-type: none !important;
29+
display: flex;
30+
flex-direction: column;
31+
}
32+
33+
h3 {
34+
margin: 0;
35+
}
36+
37+
.admin-table {
38+
display: flex;
39+
justify-content: space-between;
40+
flex-wrap: wrap;
41+
margin: 4rem 0;
42+
}
43+
44+
.admin-subtitle {
45+
font-size: 3.2rem;
46+
}
47+
48+
.delete-btn {
49+
background-color: transparent;
50+
border: none;
51+
}
52+
53+
.delete-icon {
54+
font-size: 2.6rem;
55+
color: #f12711;
56+
filter: drop-shadow(0.2rem 0.2rem 0.5rem rgb(255 0 0 / 0.2));
57+
cursor: pointer;
58+
}
59+
@media screen and (max-width: 998px) {
60+
.admin-subtitle {
61+
margin-bottom: 1.6rem;
62+
}
63+
}
64+
`;
65+
66+
export default UserDetails;

‎src/index.css

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
font-family: "Work Sans", sans-serif;
5+
}
6+
7+
html {
8+
font-size: 62.5%;
9+
}
10+
11+
body {
12+
display: flex;
13+
flex-direction: column;
14+
align-items: center;
15+
position: relative;
16+
min-height: 100vh;
17+
margin-top: 2rem;
18+
}
19+
20+
div {
21+
color: #727272;
22+
text-align: center;
23+
font-size: 1.6rem;
24+
}
25+
26+
h1 {
27+
margin: 16px;
28+
font-size: 8rem;
29+
color: #ccc;
30+
text-transform: uppercase;
31+
font-weight: 600;
32+
transition: all 2s linear;
33+
position: relative;
34+
}
35+
36+
p,
37+
a {
38+
font-size: 1.8rem;
39+
color: #ccc;
40+
text-transform: uppercase;
41+
font-weight: 600;
42+
transition: all 1s ease-in-out;
43+
position: relative;
44+
}
45+
46+
.btn {
47+
border: none;
48+
opacity: 0.9;
49+
outline: none;
50+
color: #fff;
51+
cursor: pointer;
52+
font-size: 1.8rem;
53+
padding: 7px 13px;
54+
border-radius: 4px;
55+
letter-spacing: 0.3px;
56+
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
57+
rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
58+
transition: transform 0.5s ease;
59+
background: linear-gradient(135deg, #7f6de3 0%, #11aaf1 100%);
60+
}

‎src/main.jsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom/client'
3+
import App from './App'
4+
import './index.css'
5+
6+
ReactDOM.createRoot(document.getElementById('root')).render(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>,
10+
)

‎src/store/slices/UserSlice.jsx

Whitespace-only changes.

‎vite.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import react from '@vitejs/plugin-react'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [react()],
7+
})

1 commit comments

Comments
 (1)

srnitish commented on Nov 14, 2023

@srnitish
srnitish
on Nov 14, 2023

Hey, Can you pls share the Updated and Complete Code ?

Please sign in to comment.