Skip to content

Commit b702961

Browse files
code-with-divyanshucode-with-divyanshu
committed
Context Api & Theme switcher Project
1 parent 1f030ba commit b702961

File tree

19 files changed

+6251
-0
lines changed

19 files changed

+6251
-0
lines changed

‎09_theme_switcher/.eslintrc.cjs

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:react/recommended',
7+
'plugin:react/jsx-runtime',
8+
'plugin:react-hooks/recommended',
9+
],
10+
ignorePatterns: ['dist', '.eslintrc.cjs'],
11+
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12+
settings: { react: { version: '18.2' } },
13+
plugins: ['react-refresh'],
14+
rules: {
15+
'react/jsx-no-target-blank': 'off',
16+
'react-refresh/only-export-components': [
17+
'warn',
18+
{ allowConstantExport: true },
19+
],
20+
},
21+
}

‎09_theme_switcher/.gitignore

Lines changed: 24 additions & 0 deletions
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?

‎09_theme_switcher/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# React Context Api and Theme Switcher Project
2+
3+
## Learn
4+
5+
1- Learn about context api and how to use context api and how to declare it.<br/>
6+
2- Learn how use context api in a project.<br/>
7+
3- Make a theme switcher button when you toogle it, it's change mode to dark and light.<br/>

‎09_theme_switcher/contextNotes.md

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
# Notes for context api
2+
3+
## ThemeBtn UI
4+
5+
```javascript
6+
export default function ThemeBtn() {
7+
8+
9+
return (
10+
<label className="relative inline-flex items-center cursor-pointer">
11+
<input
12+
type="checkbox"
13+
value=""
14+
className="sr-only peer"
15+
/>
16+
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
17+
<span className="ml-3 text-sm font-medium text-gray-900">Toggle Theme</span>
18+
</label>
19+
);
20+
}
21+
22+
23+
```
24+
25+
## Card UI
26+
27+
```javascript
28+
export default function Card() {
29+
return (
30+
<div className="w-full bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
31+
<a href="/">
32+
<img className="p-8 rounded-t-lg" src="https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="product_image1" />
33+
</a>
34+
<div className="px-5 pb-5">
35+
<a href="/">
36+
<h5 className="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">
37+
Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport
38+
</h5>
39+
</a>
40+
<div className="flex items-center mt-2.5 mb-5">
41+
<svg
42+
className="w-4 h-4 text-yellow-300 mr-1"
43+
aria-hidden="true"
44+
xmlns="http://www.w3.org/2000/svg"
45+
fill="currentColor"
46+
viewBox="0 0 22 20"
47+
>
48+
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
49+
</svg>
50+
<svg
51+
className="w-4 h-4 text-yellow-300 mr-1"
52+
aria-hidden="true"
53+
xmlns="http://www.w3.org/2000/svg"
54+
fill="currentColor"
55+
viewBox="0 0 22 20"
56+
>
57+
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
58+
</svg>
59+
<svg
60+
className="w-4 h-4 text-yellow-300 mr-1"
61+
aria-hidden="true"
62+
xmlns="http://www.w3.org/2000/svg"
63+
fill="currentColor"
64+
viewBox="0 0 22 20"
65+
>
66+
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
67+
</svg>
68+
<svg
69+
className="w-4 h-4 text-yellow-300 mr-1"
70+
aria-hidden="true"
71+
xmlns="http://www.w3.org/2000/svg"
72+
fill="currentColor"
73+
viewBox="0 0 22 20"
74+
>
75+
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
76+
</svg>
77+
<svg
78+
className="w-4 h-4 text-gray-200 dark:text-gray-600"
79+
aria-hidden="true"
80+
xmlns="http://www.w3.org/2000/svg"
81+
fill="currentColor"
82+
viewBox="0 0 22 20"
83+
>
84+
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
85+
</svg>
86+
<span className="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">
87+
4.0
88+
</span>
89+
</div>
90+
<div className="flex items-center justify-between">
91+
<span className="text-3xl font-bold text-gray-900 dark:text-white">$599</span>
92+
<a
93+
href="/"
94+
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
95+
>
96+
Add to cart
97+
</a>
98+
</div>
99+
</div>
100+
</div>
101+
);
102+
}
103+
104+
```
105+
## App UI
106+
107+
```javascript
108+
109+
<div className="flex flex-wrap min-h-screen items-center">
110+
<div className="w-full">
111+
<div className="w-full max-w-sm mx-auto flex justify-end mb-4">
112+
113+
</div>
114+
115+
<div className="w-full max-w-sm mx-auto">
116+
117+
</div>
118+
</div>
119+
</div>
120+
121+
```
122+
123+
## remember to change config in tailwind
124+
125+
```javascript
126+
/** @type {import('tailwindcss').Config} */
127+
export default {
128+
content: [
129+
"./index.html",
130+
"./src/**/*.{js,ts,jsx,tsx}",
131+
],
132+
darkMode: "class",
133+
theme: {
134+
extend: {},
135+
},
136+
plugins: [],
137+
}
138+
139+
140+
141+
142+
```
143+

‎09_theme_switcher/index.html

Lines changed: 13 additions & 0 deletions
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>

0 commit comments

Comments
 (0)