Skip to content

Commit a5a7471

Browse files
CodeMonitor-labCodeMonitor-lab
committed
Adding New Feature on Card
1 parent ecb581e commit a5a7471

File tree

5 files changed

+164
-83
lines changed

5 files changed

+164
-83
lines changed

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

+5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react'
22
import Home from './pages/Home'
33
import {createBrowserRouter,RouterProvider} from 'react-router-dom'
44
import { useNavigate } from 'react-router-dom'
5+
import CardDetail from './components/CardDetail'
56

67
export function PageNotFound(){
78
const navigate = useNavigate()
@@ -30,6 +31,10 @@ const Routes = () => {
3031
path:'/',
3132
element:<Home/>,
3233
},
34+
{
35+
path:'/post/:id',
36+
element:<CardDetail/>
37+
},
3338
{
3439
path:'*',
3540
element:<div>

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

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, { useEffect } from 'react'
2+
import cardsData from './CardsData'
3+
import { useParams } from 'react-router-dom'
4+
import { useNavigate } from 'react-router-dom'
5+
6+
const CardDetail = () => {
7+
8+
const {id} = useParams()
9+
const post = cardsData.find(data=>data.id === parseInt(id))
10+
11+
const navigate = useNavigate()
12+
13+
if(!post){
14+
return <div>
15+
<h1 className=' flex justify-center mt-20 text-3xl text-red-800 font-black' >Post Not Available</h1>
16+
</div>
17+
}
18+
19+
return (
20+
<>
21+
<main className='bg-red-50 min-w-screen min-h-screen p-5'>
22+
<article className='border-2 p-4 rounded-2xl min-h-screen ' >
23+
<p> Post Count: {post.id}</p>
24+
<h1 className='text-center font-black text-3xl' >{post.tittle}</h1>
25+
<h1 className='text-center mt-4' >{post.Content}</h1>
26+
<button onClick={()=>navigate('/')} className=' text-white font-black bg-sky-700 px-4 py-2 mt-5 rounded hover:bg-sky-600 cursor-pointer' >Go Back!</button>
27+
</article>
28+
</main>
29+
</>
30+
)
31+
}
32+
33+
export default CardDetail

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

+24-81
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,37 @@
1-
import React from 'react'
2-
import { Link } from 'react-router-dom'
1+
import React, { useEffect, useRef } from 'react'
2+
import { Link, useLocation } from 'react-router-dom'
3+
import cardsData from './CardsData'
4+
import { useNavigate } from 'react-router-dom'
35

46
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-
id: 11,
74-
img: " https://random-image-pepebigotes.vercel.app/api/swag-wallpaper ",
75-
tittle: "I am Creating a Card title",
76-
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!"
77-
},
78-
]
7+
const navigate = useNavigate();
8+
const location = useLocation()
9+
const cardRefs = useRef({})
10+
11+
const handleReadPost = (id)=>{
12+
navigate(`/post/${id}`)
13+
console.log(id)
14+
}
15+
16+
useEffect(()=>{
17+
const scrollToId = location.state?.scrollToId
18+
if (scrollToId && cardRefs.current[scrollToId]) {
19+
cardRefs.current[scrollToId].scrollIntoView({ behavior: 'smooth' });
20+
}
21+
},[location])
7922

8023
return (
8124
<>
8225
<main>
83-
<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'>
26+
<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 '>
8427
{
8528
cardsData.map((item) => (
86-
<article key={console.log(item.id)} className='bg-amber-200 p-4 ' >
87-
<img className='bg-cover bg-center h-80 w-full' src={item.img} alt="" loading='lazy' />
29+
<article ref={(el)=>(cardRefs.current[item.id]==el)} key={item.id} className='bg-amber-200 p-4 cursor-pointer hover:bg-amber-300 shadow-[0_0px_10px] ' >
30+
<img className='bg-cover bg-center h-80 w-full' src={item.img} alt="card-img" loading='lazy' />
8831
<h1 className='mt-2 mb-3 font-bold text-2xl '>{item.tittle}</h1>
8932
<hr className='bg-black border-t-2' />
90-
<p className='mt-2 font-sans font-semibold' >{item.para}</p>
91-
<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>
33+
<p className='mt-2 font-sans font-semibold' >{item.description}</p>
34+
<button onClick={()=>handleReadPost(item.id)} className='bg-sky-600 text-white px-2 py-2 rounded mt-6 font-black hover:bg-sky-700 cursor-pointer' >Read Post</button>
9235
</article>
9336
))
9437
}

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

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
const cardsData = [
2+
{
3+
id: 1,
4+
img: " https://random-image-pepebigotes.vercel.app/api/skeleton-random-image",
5+
tittle: "I am Creating a Card title",
6+
description: " this is an cards descriptiongraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!",
7+
link:"/ReadPost/id",
8+
Content:'"Your heart is the size of an ocean. Go find yourself in its hidden depths."'
9+
},
10+
{
11+
id: 2,
12+
img: "https://random-image-pepebigotes.vercel.app/api/random-image",
13+
tittle: "I am Creating a Card title",
14+
description: " this is an cards descriptiongraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!",
15+
link:"/ReadPost/id",
16+
Content:"'The Bay of Bengal is hit frequently by cyclones. The months of November and May, in particular, are dangerous in this regard.'"
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+
description: " this is an cards descriptiongraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!",
23+
link:"/ReadPost/id",
24+
Content:"Thinking is the capital, Enterprise is the way, Hard Work is the solution."
25+
},
26+
{
27+
id: 4,
28+
img: "https://cdn.dummyjson.com/products/images/sports-accessories/Golf%20Ball/thumbnail.png",
29+
tittle: "I am Creating a Card title",
30+
description: " this is an cards descriptiongraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!",
31+
link:"/ReadPost/id",
32+
Content:"Thinking is the capital, Enterprise is the way, Hard Work is the solution."
33+
},
34+
{
35+
id: 5,
36+
img: "https://random-image-pepebigotes.vercel.app/api/random-image",
37+
tittle: "I am Creating a Card title",
38+
description: " this is an cards descriptiongraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!",
39+
link:"/ReadPost/id",
40+
Content:"While children are struggling to be unique, the world around them is trying all means to make them look like everybody else."
41+
},
42+
{
43+
id: 6,
44+
img: "https://random-image-pepebigotes.vercel.app/api/random-image",
45+
tittle: "I am Creating a Card title",
46+
description: " this is an cards descriptiongraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!",
47+
link:"/ReadPost/id",
48+
Content:"Everyone has been made for some particular work, and the desire for that work has been put in every heart."
49+
},
50+
{
51+
id: 7,
52+
// img:"https://cdn.dummyjson.com/products/images/sports-accessories/Baseball%20Ball/thumbnail.png,
53+
img:'https://cdn.dummyjson.com/products/images/sports-accessories/Baseball%20Ball/thumbnail.png',
54+
tittle: "I am Creating a Card title",
55+
description: " this is an cards descriptiongraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!",
56+
link:"/ReadPost/id",
57+
Content:"This is an Contenetn of this cards layout components"
58+
},
59+
{
60+
id: 8,
61+
img: " https://random-image-pepebigotes.vercel.app/api/skeleton-random-image",
62+
tittle: "I am Creating a Card title",
63+
description: " this is an cards descriptiongraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!",
64+
link:"/ReadPost/id",
65+
Content:"This is an Contenetn of this cards layout components"
66+
},
67+
{
68+
id: 9,
69+
img: " https://random-image-pepebigotes.vercel.app/api/skeleton-random-image",
70+
tittle: "I am Creating a Card title",
71+
description: " this is an cards descriptiongraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!",
72+
link:"/ReadPost/id",
73+
Content:"This is an Contenetn of this cards layout components"
74+
},
75+
{
76+
id: 10,
77+
img: " https://random-image-pepebigotes.vercel.app/api/swag-wallpaper ",
78+
tittle: "I am Creating a Card title",
79+
description: " this is an cards descriptiongraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!",
80+
link:"/ReadPost/id",
81+
Content:"This is an Contenetn of this cards layout components"
82+
},
83+
{
84+
id: 11,
85+
img: " https://random-image-pepebigotes.vercel.app/api/swag-wallpaper ",
86+
tittle: "I am Creating a Card title",
87+
description: " this is an cards descriptiongraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!",
88+
link:"/ReadPost/id",
89+
Content:"This is an Contenetn of this cards layout components"
90+
},
91+
{
92+
id: 12,
93+
img: " https://random-image-pepebigotes.vercel.app/api/swag-wallpaper ",
94+
tittle: "I am Creating a Card title",
95+
description: " this is an cards descriptiongraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias modi, facere sequi architecto minus eum iste dolores quod aut corrupti!",
96+
link:"/ReadPost/id",
97+
Content:"This is an Contenetn of this cards layout components"
98+
},
99+
]
100+
101+
102+
export default cardsData;

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

-2
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@ const Home = () => {
66
<>
77
<main className='bg-red-100 min-w-screen min-h-screen ' >
88
<section>
9-
<article>
109
<Cards/>
11-
</article>
1210
</section>
1311
</main>
1412
</>

0 commit comments

Comments
 (0)