Skip to content

Commit e32fa09

Browse files
Dios-001Dios-001
committed
feat: add events-page
1 parent 8cbab2d commit e32fa09

File tree

6 files changed

+100
-72
lines changed

6 files changed

+100
-72
lines changed

‎src/App.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const navLinks = [
99
{name: "About Us", path: "/about-us"},
1010
{name: "Our Team", path: "/teams"},
1111
{name: "Gallery", path: "/gallery"},
12+
{name: "Events", path:"/events"},
1213
{name: "Contact", path: "/contact"},
1314
{name: "Projects", path: "/projects"}
1415

‎src/assets/styles/index.css‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
@import "@fontsource/poppins/900.css";
66
@import "@fontsource/league-gothic";
77

8-
98
/* Reset default browser styles */
109
* {
1110
margin: 0;
@@ -29,20 +28,17 @@ a {
2928
-webkit-text-stroke-color: #737373;
3029
}
3130

32-
3331
.words {
34-
position: relative;
35-
animation: move-words 25s linear infinite;
36-
margin: 0;
37-
}
38-
39-
32+
position: relative;
33+
animation: move-words 25s linear infinite;
34+
margin: 0;
35+
}
4036

4137
@keyframes move-words {
42-
0% {
43-
left: 100%;
44-
}
45-
100% {
46-
left: -100%;
47-
}
48-
}
38+
0% {
39+
left: 100%;
40+
}
41+
100% {
42+
left: -100%;
43+
}
44+
}

‎src/components/Navbar/index.jsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,10 @@ function Navbar({ links }) {
2929
font-semibold text-white md:my-0 md:ml-8
3030
border-b-2
3131
${
32-
location.pathname .toLowerCase().includes(link.path.toLowerCase())
33-
? "border-red-500 hover:border-red-700"
32+
location.pathname
33+
.toLowerCase()
34+
.includes(link.path.toLowerCase())
35+
? "border-red-500 hover:border-red-700"
3436
: "border-transparent hover:border-red-500"
3537
}
3638
`}
@@ -45,7 +47,7 @@ function Navbar({ links }) {
4547
className="w-7 h-7 text-white cursor-pointer md:hidden"
4648
>
4749
{isOpen ? (
48-
<img src={closeIcon} alt="close" />
50+
<img src={closeIcon} alt="close" />
4951
) : (
5052
<img src={menuIcon} alt="menu" />
5153
)}

‎src/pages/Events/card.jsx‎

Lines changed: 37 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,44 @@
1-
import React, { useState, useEffect } from 'react';
2-
import {Link} from 'react-router-dom';
3-
export default function Card({user}) {
1+
import { useState, useEffect } from "react";
2+
import { Link } from "react-router-dom";
3+
import PropTypes from "prop-types";
44

5-
const [truncatedText, setTruncatedText] = useState('');
6-
const maxLength = 25; // Maximum number of words
7-
8-
useEffect(() => {
9-
const text = user.description
10-
const words = text.split(' ');
11-
12-
if (words.length > maxLength) {
13-
setTruncatedText(words.slice(0, maxLength).join(' ') + '...');
14-
} else {
15-
setTruncatedText(text);
16-
}
17-
}, []);
5+
function Card({ user }) {
6+
const [truncatedText, setTruncatedText] = useState("");
7+
const maxLength = 25; // Maximum number of words
8+
9+
useEffect(() => {
10+
const text = user.description;
11+
const words = text.split(" ");
12+
13+
if (words.length > maxLength) {
14+
setTruncatedText(words.slice(0, maxLength).join(" "));
15+
} else {
16+
setTruncatedText(text);
17+
}
18+
}, []);
1819
return (
19-
<>
20-
<div className=" shadow-lg bg-zinc-600 rounded-2xl max-w-96 h-[30rem] relative">
21-
<img className="w-mag rounded-se-2xl rounded-ss-2xl" src={`${user.image}`} alt={user.alt} />
22-
<div className='content-box px-4 pt-2'>
20+
<div className=" shadow-lg bg-zinc-600 rounded-2xl max-w-96 h-[30rem] relative">
21+
<img
22+
className="w-mag rounded-se-2xl rounded-ss-2xl"
23+
src={`${user.image}`}
24+
alt={user.alt}
25+
/>
26+
<div className="content-box px-4 pt-2">
2327
<p className="py-1 font-medium text-white break-words">{user.name}</p>
2428
<p className="date font-thin py-2 pr-3 text-zinc-400">{user.date}</p>
2529
<p className="description text-white font-light ">{truncatedText}</p>
26-
</div>
27-
<Link to={user.link} className="absolute bottom-0 left-0 right-0 text-center tracking-widest font-thin drop-shadow-lg text-white py-7 hover:text-red-600">READ MORE</Link>
28-
</div>
29-
</>
30+
</div>
31+
<Link
32+
to={user.link}
33+
className="absolute bottom-0 left-0 right-0 text-center tracking-widest font-thin drop-shadow-lg text-white py-7 hover:text-red-600"
34+
>
35+
READ MORE
36+
</Link>
37+
</div>
3038
);
3139
}
40+
Card.propTypes = {
41+
user: PropTypes.isRequired,
42+
};
43+
44+
export default Card;

‎src/pages/Events/index.jsx‎

Lines changed: 43 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,56 @@
1-
import React from 'react';
2-
import Card from './card';
3-
import userData from './events.json'
4-
import { useState, useEffect } from 'react';
1+
import { useState, useEffect } from "react";
2+
import Card from "./card";
3+
import userData from "./events.json";
54

6-
const EventPage = () => {
7-
const borderStyle = {
8-
color: 'transparent',
9-
WebkitTextStrokeWidth: '0.5px',
10-
WebkitTextStrokeColor: 'white',
11-
}
12-
const [users, setUsers] = useState([]);
5+
function EventPage() {
6+
const borderStyle = {
7+
color: "transparent",
8+
WebkitTextStrokeWidth: "0.5px",
9+
WebkitTextStrokeColor: "white",
10+
};
11+
const [users, setUsers] = useState([]);
1312

14-
useEffect(() => {
15-
setUsers(userData);
16-
}, []);
13+
useEffect(() => {
14+
setUsers(userData);
15+
}, []);
1716
return (
18-
1917
<div className="">
2018
<div className=" flex flex-row flex-nowrap w-full overflow-hidden ">
21-
22-
<p className="text-white text-7xl py-10 font-extrabold inline-block px-1 words" style={borderStyle}>EVENTS</p>
23-
<p className='text-white text-7xl py-10 font-extrabold inline-block px-2 words'> EVENTS</p>
24-
<p className='text-white text-7xl py-10 font-extrabold inline-block px-2 words'style={borderStyle}>EVENTS</p>
25-
<p className='text-white text-7xl py-10 font-extrabold inline-block px-2 words'> EVENTS</p>
26-
<p className='text-white text-7xl py-10 font-extrabold inline-block px-2 words'style={borderStyle}>EVENTS</p>
27-
19+
<p
20+
className="text-white text-7xl py-10 font-extrabold inline-block px-1 words"
21+
style={borderStyle}
22+
>
23+
EVENTS
24+
</p>
25+
<p className="text-white text-7xl py-10 font-extrabold inline-block px-2 words">
26+
{" "}
27+
EVENTS
28+
</p>
29+
<p
30+
className="text-white text-7xl py-10 font-extrabold inline-block px-2 words"
31+
style={borderStyle}
32+
>
33+
EVENTS
34+
</p>
35+
<p className="text-white text-7xl py-10 font-extrabold inline-block px-2 words">
36+
{" "}
37+
EVENTS
38+
</p>
39+
<p
40+
className="text-white text-7xl py-10 font-extrabold inline-block px-2 words"
41+
style={borderStyle}
42+
>
43+
EVENTS
44+
</p>
2845
</div>
29-
<div className=" flex flex-wrap gap-10 justify-center align-items py-10">
46+
<div className=" flex flex-wrap gap-10 justify-center align-items py-10">
3047
{/* Add enough content to exceed the width of the container */}
3148
{users.map((user) => (
32-
<Card key={user.name} user={user} />
33-
))}
34-
49+
<Card key={user.name} user={user} />
50+
))}
3551
</div>
3652
</div>
3753
);
38-
};
54+
}
3955

4056
export default EventPage;

‎src/routes/index.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Home from "@/pages/Home/index";
22
import Teams from "@/pages/Teams/index";
3-
import EventPage from "../pages/Events/index";
3+
import EventPage from "@/pages/Events/index";
44
import About from "@/pages/About/index";
55

66
const routes = [
@@ -23,11 +23,11 @@ const routes = [
2323
render: <Home />,
2424
},
2525
{
26-
lable:"Events",
26+
lable: "Events",
2727
path: "/events",
2828
requireAuth: false,
2929
render: <EventPage />,
30-
}
30+
},
3131
];
3232

3333
export default routes;

0 commit comments

Comments
 (0)