Skip to content

Commit 1c5f2cd

Browse files
abhishekrathoreabhishekrathore
committed
Part1 - Home Page Template Added
1 parent aca2555 commit 1c5f2cd

File tree

17 files changed

+851
-283
lines changed

17 files changed

+851
-283
lines changed

‎package-lock.json‎

Lines changed: 60 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,19 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@headlessui/react": "^1.7.14",
7+
"@heroicons/react": "^2.0.17",
68
"@reduxjs/toolkit": "^1.9.5",
9+
"@tailwindcss/aspect-ratio": "^0.4.2",
10+
"@tailwindcss/forms": "^0.5.3",
711
"@testing-library/jest-dom": "^5.16.5",
812
"@testing-library/react": "^13.4.0",
913
"@testing-library/user-event": "^14.4.3",
1014
"react": "^18.2.0",
1115
"react-dom": "^18.2.0",
1216
"react-redux": "^8.0.5",
1317
"react-scripts": "5.0.1",
18+
"tailwindcss": "^3.3.2",
1419
"web-vitals": "^2.1.4"
1520
},
1621
"scripts": {

‎public/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" class="h-full bg-gray-100">
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -26,7 +26,7 @@
2626
-->
2727
<title>React Redux App</title>
2828
</head>
29-
<body>
29+
<body class="h-full">
3030
<noscript>You need to enable JavaScript to run this app.</noscript>
3131
<div id="root"></div>
3232
<!--

‎src/App.css‎

Lines changed: 0 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +0,0 @@
1-
.App {
2-
text-align: center;
3-
}
4-
5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
8-
}
9-
10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-float infinite 3s ease-in-out;
13-
}
14-
}
15-
16-
.App-header {
17-
min-height: 100vh;
18-
display: flex;
19-
flex-direction: column;
20-
align-items: center;
21-
justify-content: center;
22-
font-size: calc(10px + 2vmin);
23-
}
24-
25-
.App-link {
26-
color: rgb(112, 76, 182);
27-
}
28-
29-
@keyframes App-logo-float {
30-
0% {
31-
transform: translateY(0);
32-
}
33-
50% {
34-
transform: translateY(10px);
35-
}
36-
100% {
37-
transform: translateY(0px);
38-
}
39-
}

‎src/App.js‎

Lines changed: 2 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,11 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
31
import { Counter } from './features/counter/Counter';
42
import './App.css';
3+
import Home from './pages/Home';
54

65
function App() {
76
return (
87
<div className="App">
9-
<header className="App-header">
10-
<img src={logo} className="App-logo" alt="logo" />
11-
<Counter />
12-
<p>
13-
Edit <code>src/App.js</code> and save to reload.
14-
</p>
15-
<span>
16-
<span>Learn </span>
17-
<a
18-
className="App-link"
19-
href="https://reactjs.org/"
20-
target="_blank"
21-
rel="noopener noreferrer"
22-
>
23-
React
24-
</a>
25-
<span>, </span>
26-
<a
27-
className="App-link"
28-
href="https://redux.js.org/"
29-
target="_blank"
30-
rel="noopener noreferrer"
31-
>
32-
Redux
33-
</a>
34-
<span>, </span>
35-
<a
36-
className="App-link"
37-
href="https://redux-toolkit.js.org/"
38-
target="_blank"
39-
rel="noopener noreferrer"
40-
>
41-
Redux Toolkit
42-
</a>
43-
,<span> and </span>
44-
<a
45-
className="App-link"
46-
href="https://react-redux.js.org/"
47-
target="_blank"
48-
rel="noopener noreferrer"
49-
>
50-
React Redux
51-
</a>
52-
</span>
53-
</header>
8+
<Home></Home>
549
</div>
5510
);
5611
}

‎src/features/counter/Counter.js‎

Lines changed: 4 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,21 @@
11
import React, { useState } from 'react';
22
import { useSelector, useDispatch } from 'react-redux';
33
import {
4-
decrement,
54
increment,
6-
incrementByAmount,
75
incrementAsync,
8-
incrementIfOdd,
96
selectCount,
107
} from './counterSlice';
11-
import styles from './Counter.module.css';
128

13-
export function Counter() {
9+
export default function Counter() {
1410
const count = useSelector(selectCount);
1511
const dispatch = useDispatch();
16-
const [incrementAmount, setIncrementAmount] = useState('2');
1712

18-
const incrementValue = Number(incrementAmount) || 0;
1913

2014
return (
2115
<div>
22-
<div className={styles.row}>
23-
<button
24-
className={styles.button}
25-
aria-label="Decrement value"
26-
onClick={() => dispatch(decrement())}
27-
>
28-
-
29-
</button>
30-
<span className={styles.value}>{count}</span>
31-
<button
32-
className={styles.button}
33-
aria-label="Increment value"
34-
onClick={() => dispatch(increment())}
35-
>
36-
+
37-
</button>
38-
</div>
39-
<div className={styles.row}>
40-
<input
41-
className={styles.textbox}
42-
aria-label="Set increment amount"
43-
value={incrementAmount}
44-
onChange={(e) => setIncrementAmount(e.target.value)}
45-
/>
46-
<button
47-
className={styles.button}
48-
onClick={() => dispatch(incrementByAmount(incrementValue))}
49-
>
50-
Add Amount
51-
</button>
52-
<button
53-
className={styles.asyncButton}
54-
onClick={() => dispatch(incrementAsync(incrementValue))}
55-
>
56-
Add Async
57-
</button>
58-
<button
59-
className={styles.button}
60-
onClick={() => dispatch(incrementIfOdd(incrementValue))}
61-
>
62-
Add If Odd
63-
</button>
16+
<div>
17+
18+
6419
</div>
6520
</div>
6621
);

‎src/features/counter/Counter.module.css‎

Lines changed: 0 additions & 78 deletions
This file was deleted.

‎src/features/counter/counterAPI.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
// A mock function to mimic making an async request for data
21
export function fetchCount(amount = 1) {
3-
return new Promise((resolve) =>
4-
setTimeout(() => resolve({ data: amount }), 500)
2+
return new Promise(async (resolve) =>{
3+
const response = await fetch('http://localhost:8080')
4+
const data = await response.json()
5+
resolve({data})
6+
}
57
);
68
}

0 commit comments

Comments
 (0)