Skip to content

Commit b49958b

Browse files
CodeMonitor-labCodeMonitor-lab
committed
Adding a New Features
1 parent fdca239 commit b49958b

File tree

7 files changed

+174
-44
lines changed

7 files changed

+174
-44
lines changed

‎React-Cards-Layout/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"version": "0.0.0",
55
"type": "module",
66
"scripts": {
7-
"dev": "vite",
7+
"dev": "vite --host",
88
"build": "vite build",
99
"lint": "eslint .",
1010
"preview": "vite preview"

‎React-Cards-Layout/src/App.css

Lines changed: 0 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +0,0 @@
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-
transition: filter 300ms;
13-
}
14-
.logo:hover {
15-
filter: drop-shadow(0 0 2em #646cffaa);
16-
}
17-
.logo.react:hover {
18-
filter: drop-shadow(0 0 2em #61dafbaa);
19-
}
20-
21-
@keyframes logo-spin {
22-
from {
23-
transform: rotate(0deg);
24-
}
25-
to {
26-
transform: rotate(360deg);
27-
}
28-
}
29-
30-
@media (prefers-reduced-motion: no-preference) {
31-
a:nth-of-type(2) .logo {
32-
animation: logo-spin infinite 20s linear;
33-
}
34-
}
35-
36-
.card {
37-
padding: 2em;
38-
}
39-
40-
.read-the-docs {
41-
color: #888;
42-
}

‎React-Cards-Layout/src/App.jsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import { useState } from 'react'
22
import './App.css'
3+
import Routes from './Routes'
34

45
function App() {
56
const [count, setCount] = useState(0)
67

78
return (
89
<>
9-
<h1>App Page</h1>
10+
<div className='m-0 p-0' >
11+
<Routes/>
12+
</div>
1013
</>
1114
)
1215
}

‎React-Cards-Layout/src/Routes.jsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react'
2+
import Home from './pages/Home'
3+
import {createBrowserRouter,RouterProvider} from 'react-router-dom'
4+
import { useNavigate } from 'react-router-dom'
5+
6+
export function PageNotFound(){
7+
const navigate = useNavigate()
8+
9+
return (
10+
<div className="flex items-center justify-center min-w-screen min-h-screen bg-gray-100">
11+
<div className="text-center">
12+
<h1 className="text-4xl font-bold text-red-500 mb-4">404 - Page Not Found</h1>
13+
<p className="text-lg text-gray-700 mb-6">Oops! The page you are looking for does not exist.</p>
14+
<button
15+
onClick={() => navigate('/')}
16+
className="bg-blue-500 font-black text-1xl cursor-pointer text-white px-4 py-2 rounded hover:bg-blue-600 transition"
17+
>
18+
Go to Home
19+
</button>
20+
</div>
21+
</div>
22+
)
23+
}
24+
25+
26+
const Routes = () => {
27+
28+
const router = createBrowserRouter([
29+
{
30+
path:'/',
31+
element:<Home/>,
32+
},
33+
{
34+
path:'*',
35+
element:<div>
36+
<PageNotFound/>
37+
</div>
38+
}
39+
])
40+
41+
return (
42+
<RouterProvider router = {router} />
43+
)
44+
}
45+
46+
export default Routes

‎React-Cards-Layout/src/components/Cards.jsx

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React from 'react'
2+
import { Link } from 'react-router-dom'
3+
4+
const Cards = () => {
5+
const cardsData = [
6+
{
7+
id: 1,
8+
img: " https://random-image-pepebigotes.vercel.app/api/skeleton-random-image",
9+
tittle: "I am Creating a Card title",
10+
para: " this is an cards paragraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!"
11+
},
12+
{
13+
id: 2,
14+
img: "https://random-image-pepebigotes.vercel.app/api/random-image",
15+
tittle: "I am Creating a Card title",
16+
para: " this is an cards paragraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!"
17+
},
18+
{
19+
id: 3,
20+
img: " https://random-image-pepebigotes.vercel.app/api/swag-wallpaper ",
21+
tittle: "I am Creating a Card title",
22+
para: " this is an cards paragraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!"
23+
},
24+
{
25+
id: 4,
26+
img: "https://random-image-pepebigotes.vercel.app/api/random-image",
27+
tittle: "I am Creating a Card title",
28+
para: " this is an cards paragraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!"
29+
},
30+
{
31+
id: 5,
32+
img: "https://random-image-pepebigotes.vercel.app/api/random-image",
33+
tittle: "I am Creating a Card title",
34+
para: " this is an cards paragraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!"
35+
},
36+
{
37+
id: 6,
38+
img: "https://random-image-pepebigotes.vercel.app/api/random-image",
39+
tittle: "I am Creating a Card title",
40+
para: " this is an cards paragraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!"
41+
},
42+
{
43+
id: 7,
44+
img: " https://random-image-pepebigotes.vercel.app/api/skeleton-random-image",
45+
tittle: "I am Creating a Card title",
46+
para: " this is an cards paragraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!"
47+
},
48+
{
49+
id: 8,
50+
img: " https://random-image-pepebigotes.vercel.app/api/skeleton-random-image",
51+
tittle: "I am Creating a Card title",
52+
para: " this is an cards paragraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!"
53+
},
54+
{
55+
id: 9,
56+
img: " https://random-image-pepebigotes.vercel.app/api/skeleton-random-image",
57+
tittle: "I am Creating a Card title",
58+
para: " this is an cards paragraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!"
59+
},
60+
{
61+
id: 10,
62+
img: " https://random-image-pepebigotes.vercel.app/api/swag-wallpaper ",
63+
tittle: "I am Creating a Card title",
64+
para: " this is an cards paragraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!"
65+
},
66+
{
67+
id: 11,
68+
img: " https://random-image-pepebigotes.vercel.app/api/swag-wallpaper ",
69+
tittle: "I am Creating a Card title",
70+
para: " this is an cards paragraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!"
71+
},
72+
]
73+
74+
return (
75+
<>
76+
<main>
77+
<section className='grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-x-4 gap-y-5 p-5'>
78+
{
79+
cardsData.map((item) => (
80+
<article key={console.log(item.id)} className='bg-amber-200 p-4 ' >
81+
<img className='bg-cover bg-center h-80 w-full' src={item.img} alt="" loading='lazy' />
82+
<h1 className='mt-2 mb-3 font-bold text-2xl '>{item.tittle}</h1>
83+
<hr className='bg-black border-t-2' />
84+
<p className='mt-2 font-sans font-semibold' >{item.para}</p>
85+
<button className='bg-sky-600 text-white px-2 py-2 rounded mt-6 font-black hover:bg-sky-700 cursor-pointer' >Read Post</button>
86+
</article>
87+
))
88+
}
89+
</section>
90+
</main>
91+
92+
</>
93+
)
94+
}
95+
96+
export default Cards

‎React-Cards-Layout/src/context/CardContext.jsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react'
2+
3+
const CardContext = () => {
4+
return (
5+
<div>CardContext</div>
6+
)
7+
}
8+
9+
export default CardContext

‎React-Cards-Layout/src/pages/Home.jsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react'
2+
import Cards from '../components/Cards'
3+
4+
const Home = () => {
5+
return (
6+
<>
7+
<main className='bg-red-100 min-w-screen min-h-screen ' >
8+
<section>
9+
<article>
10+
<Cards/>
11+
</article>
12+
</section>
13+
</main>
14+
</>
15+
)
16+
}
17+
18+
export default Home

0 commit comments

Comments
 (0)