Skip to content

Commit c0cc38b

Browse files
Dios-001Dios-001
committed
feat: fixed suggested changes
2 parents 5e79d09 + e83d0a4 commit c0cc38b

File tree

11 files changed

+599
-35
lines changed

11 files changed

+599
-35
lines changed

‎src/App.jsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,24 @@ import { ToastContainer } from "react-toastify";
33
import routes from "@/routes/index";
44
import Navbar from "@/components/Navbar/index";
55

6-
7-
86
const navLinks = [
9-
{name: "About Us", path: "/about-us"},
10-
{name: "Our Team", path: "/teams"},
11-
{name: "Gallery", path: "/gallery"},
12-
{name: "Events", path:"/events"},
13-
{name: "Contact", path: "/contact"},
14-
{name: "Projects", path: "/projects"}
15-
7+
{ name: "About Us", path: "/about-us" },
8+
{ name: "Our Team", path: "/teams" },
9+
{ name: "Gallery", path: "/gallery" },
10+
{ name: "Events", path: "/events" },
11+
{ name: "Contact", path: "/contact" },
12+
{ name: "Community", path: "/community" },
1613
];
1714

1815
function App() {
1916
return (
2017
<Router>
21-
<Navbar links={navLinks}/>
18+
<Navbar links={navLinks} />
2219

2320
<ToastContainer />
2421
<Routes>
2522
{routes.map((route) => (
26-
<Route path={route.path} element={route.render} key={route.lable} />
23+
<Route path={route.path} element={route.render} key={route.label} />
2724
))}
2825
</Routes>
2926
</Router>

‎src/assets/images/close.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎src/assets/images/error404.svg‎

Lines changed: 398 additions & 0 deletions
Loading

‎src/assets/images/menu.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎src/components/Navbar/index.jsx‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,29 @@ function Navbar({ links }) {
1010
const location = useLocation();
1111

1212
return (
13-
<nav className=" shadow-md w-full flex justify-between items-center px-6 bg-secondary-dark">
14-
<Link to="/" className="cursor-pointer">
15-
<img src={Logo} alt="logo" />
16-
</Link>
17-
13+
<nav
14+
className={`shadow-md w-full flex xs:flex-col md:flex-row ${isOpen ? "xs:h-screen" : ""} md:h-full justify-between items-center px-6 bg-secondary-dark`}
15+
>
16+
<div className="flex flex-row justify-between xs:w-full md:w-auto items-center">
17+
<Link to="/" className="cursor-pointer">
18+
<img src={Logo} className="w-[10rem]" alt="logo" />
19+
</Link>
20+
<button
21+
type="button"
22+
onClick={() => setIsOpen(!isOpen)}
23+
className="w-7 h-7 text-white cursor-pointer md:hidden"
24+
>
25+
{isOpen ? (
26+
<img src={closeIcon} alt="close" />
27+
) : (
28+
<img src={menuIcon} alt="menu" />
29+
)}
30+
</button>
31+
</div>
1832
<ul
1933
className={`
20-
md:flex pl-0 justify-start md:justify-center md:items-center md:pb-0 md:z-auto left-0
21-
transition-all duration-500 ease-in
22-
${isOpen ? "flex flex-col " : "hidden"}
34+
md:flex pl-0 justify-start md:justify-center md:items-center md:pb-0 md:z-auto left-0 xs:justify-center xs:gap-y-12
35+
${isOpen ? "flex flex-col grow" : "hidden"}
2336
`}
2437
>
2538
{links.map((link) => (
@@ -38,9 +51,18 @@ function Navbar({ links }) {
3851
`}
3952
>
4053
<Link to={link.path}>{link.name}</Link>
54+
<span
55+
className={`block group-hover:max-w-full transition-all duration-500 h-0.5 bg-primary rounded ${
56+
location.pathname
57+
.toLowerCase()
58+
.includes(link.path.toLowerCase())
59+
? "w-full"
60+
: "max-w-0"
61+
}`}
62+
/>
4163
</li>
4264
))}
43-
</ul>
65+
</ul>
4466
<button
4567
type="button"
4668
onClick={() => setIsOpen(!isOpen)}

‎src/pages/Events/card.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ function Card({ event }) {
3838
);
3939
}
4040
Card.propTypes = {
41-
event: PropTypes.isRequired,
41+
event: PropTypes.object.isRequired,
4242
};
4343

4444
export default Card;

‎src/pages/Events/index.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState, useEffect } from "react";
1+
// import { useState, useEffect } from "react";
22
import Card from "./card";
33
import events from "./events.json";
44

@@ -8,11 +8,11 @@ function EventPage() {
88
WebkitTextStrokeWidth: "0.5px",
99
WebkitTextStrokeColor: "white",
1010
};
11-
const [events, setEvent] = useState([]);
11+
// const [events, setEvent] = useState([]);
1212

13-
useEffect(() => {
14-
setEvent(events);
15-
}, []);
13+
// useEffect(() => {
14+
// setEvent(events);
15+
// }, []);
1616
return (
1717
<div className="">
1818
<div className=" flex flex-row flex-nowrap w-full overflow-hidden ">

‎src/pages/Gallery/Gallery.jsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import { useState } from "react";
2+
import Heading from "@/components/Heading/index";
3+
4+
const images = [
5+
"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image.jpg",
6+
"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-1.jpg",
7+
"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-2.jpg",
8+
"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-3.jpg",
9+
"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-4.jpg",
10+
"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-5.jpg",
11+
"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-6.jpg",
12+
"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-7.jpg",
13+
"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-8.jpg",
14+
];
15+
16+
export default function Gallery() {
17+
const [modalOpen, setModalOpen] = useState(false);
18+
const [selectedImageIndex, setSelectedImageIndex] = useState(null);
19+
20+
const openModal = (index = 0) => {
21+
setSelectedImageIndex(index);
22+
setModalOpen(true);
23+
};
24+
25+
const closeModal = () => {
26+
setModalOpen(false);
27+
};
28+
29+
const goToPrevious = () => {
30+
setSelectedImageIndex((prevIndex) =>
31+
prevIndex === 0 ? images.length - 1 : prevIndex - 1,
32+
);
33+
};
34+
35+
const goToNext = () => {
36+
setSelectedImageIndex((prevIndex) =>
37+
prevIndex === images.length - 1 ? 0 : prevIndex + 1,
38+
);
39+
};
40+
41+
const handleKeyDown = (event) => {
42+
if (event.key === "Escape") {
43+
closeModal();
44+
}
45+
// You can add more key handlers here as needed
46+
};
47+
48+
return (
49+
<div>
50+
<Heading
51+
text="Gallery"
52+
className="text-center absolute top-0 left-0 right-0 mb-24"
53+
/>
54+
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 m-[5%]">
55+
{images.map((image, index) => (
56+
<div
57+
role="button"
58+
aria-label="Open"
59+
onClick={() => openModal(index)}
60+
onKeyDown={(e) => handleKeyDown(e, index)}
61+
tabIndex={0}
62+
key={image}
63+
className="cursor-pointer"
64+
>
65+
<img
66+
className="h-auto max-w-full rounded-lg aspect-square"
67+
src={image}
68+
alt={`Gallery img ${index + 1}`}
69+
/>
70+
</div>
71+
))}
72+
73+
{modalOpen ? (
74+
<div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-75">
75+
<div className="relative">
76+
<button
77+
type="button"
78+
className="absolute top-0 right-0 m-4 text-white bg-gray-500 hover:bg-gray-700 font-bold py-2 px-4 border border-gray-700 rounded"
79+
onClick={closeModal}
80+
aria-label="Close"
81+
>
82+
<i className="fa-solid fa-xmark" />
83+
</button>
84+
<button
85+
className="absolute left-0 top-1/2 transform -translate-y-1/2 text-black font-bold py-2 px-4 border border-black rounded-3xl ml-5"
86+
onClick={goToPrevious}
87+
aria-label="Previous Image"
88+
type="button"
89+
>
90+
<i className="fa-solid fa-backward" />
91+
</button>
92+
<button
93+
className="absolute right-0 top-1/2 transform -translate-y-1/2 text-black font-bold py-2 px-4 border border-black rounded-3xl mr-5"
94+
onClick={goToNext}
95+
aria-label="Next Image"
96+
type="button"
97+
>
98+
<i className="fa-solid fa-forward" />
99+
</button>
100+
<img
101+
className="max-w-full rounded-lg"
102+
src={images[selectedImageIndex]}
103+
alt={`Selected gallery img ${selectedImageIndex + 1}`}
104+
/>
105+
</div>
106+
</div>
107+
) : (
108+
<div> </div>
109+
)}
110+
</div>
111+
</div>
112+
);
113+
}

‎src/pages/Home/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Heading from "@/components/Heading";
33
function Home() {
44
return (
55
<>
6-
<div className="bg-background-dark h-screen flex">
6+
<div className="bg-background-dark h-[calc(100vh-4.6rem)] flex">
77
<div className="m-auto">
88
<div className="text-7xl md:text-9xl lg:text-[11rem] text-primary text-center font-gothic uppercase">
99
Codex, SIT

‎src/pages/PageNotFound/index.jsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import error404Image from "@/assets/images/error404.svg";
2+
3+
function PageNotFound() {
4+
return (
5+
<div className="w-full h-[calc(100vh-4.6rem)] flex items-center justify-center text-center">
6+
<div className="text-center">
7+
<img
8+
className="block m-auto xs:w-[90vw] sm:w-[70vw] md:w-[45vw]"
9+
src={error404Image}
10+
alt="Error 404"
11+
/>
12+
<p className="text-white xs:m-6 xs:text-lg lg:text-xl">
13+
The page you are looking for does not exist.
14+
</p>
15+
</div>
16+
</div>
17+
);
18+
}
19+
20+
export default PageNotFound;

0 commit comments

Comments
 (0)