Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement Dark Mode Toggle Button for Improved User Experience (#9) #17

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Implement Dark Mode Toggle Button for Improved User Experience (#9) #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d75898e
toggle theme (dark,light)
vikrant0563 Sep 30, 2024
aac87c4
Updated TeamSection component for better team layout
vikrant0563 Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 115 additions & 39 deletions frontend/components/Carousel.jsx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you check that it create any issue with recent code.

Original file line number Diff line number Diff line change
Expand Up @@ -63,15 +63,65 @@
// };

// export default Carousel;
import React, { useState, useEffect, useRef } from 'react';
import './style/carousel2.css';
import React, { useState, useEffect, useRef } from "react";
import "./style/carousel2.css";
import sunImg from "../public/image/sun-light.png";
import moonImg from "../public/image/moon-light.png";

const Carousel = () => {
// toggle button
const [theme, setTheme] = useState("light");

const toggleTheme = (newTheme) => {
setTheme(newTheme);

if (newTheme === "dark") {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
};

useEffect(() => {
// Set theme based on system preference
const prefersDark = window.matchMedia(
"(prefers-color-scheme: dark)"
).matches;
if (prefersDark) {
setTheme("dark");
document.documentElement.classList.add("dark");
}
}, []);

const [carouselItems, setCarouselItems] = useState([
{ id: 1, image: '../image/event.JPG', author: '', title: 'devXsphere gaianet', topic: 'meetup' },
{ id: 2, image: '../image/event 2.JPG', author: 'Author 2', title: 'Title 2', topic: 'Topic 2' },
{ id: 3, image: '../image/event 3.JPG', author: 'Author 3', title: 'Title 3', topic: 'Topic 3' },
{ id: 4, image: '../image/event4.jpg', author: 'Author 4', title: 'Title 4', topic: 'Topic 4' }
{
id: 1,
image: "../image/event.JPG",
author: "",
title: "devXsphere gaianet",
topic: "meetup",
},
{
id: 2,
image: "../image/event 2.JPG",
author: "Author 2",
title: "Title 2",
topic: "Topic 2",
},
{
id: 3,
image: "../image/event 3.JPG",
author: "Author 3",
title: "Title 3",
topic: "Topic 3",
},
{
id: 4,
image: "../image/event4.jpg",
author: "Author 4",
title: "Title 4",
topic: "Topic 4",
},
]);

const timeRunning = 1000;
Expand All @@ -82,57 +132,83 @@ const Carousel = () => {

useEffect(() => {
const runNextAuto = setTimeout(() => {
showSlider('next');
showSlider("next");
}, timeAutoNext);

return () => clearTimeout(runNextAuto);
}, [carouselItems]);

const showSlider = (type) => {
if (type === 'next') {
if (type === "next") {
setCarouselItems((prevItems) => [...prevItems.slice(1), prevItems[0]]);
carouselRef.current.classList.add('next');
carouselRef.current.classList.add("next");
} else {
setCarouselItems((prevItems) => [prevItems[prevItems.length - 1], ...prevItems.slice(0, -1)]);
carouselRef.current.classList.add('prev');
setCarouselItems((prevItems) => [
prevItems[prevItems.length - 1],
...prevItems.slice(0, -1),
]);
carouselRef.current.classList.add("prev");
}

clearTimeout(timeRef.current);
timeRef.current = setTimeout(() => {
carouselRef.current.classList.remove('next');
carouselRef.current.classList.remove('prev');
carouselRef.current.classList.remove("next");
carouselRef.current.classList.remove("prev");
}, timeRunning);
};

return (
<div className="carousel-container">
{/* Title Section */}
<div className="title-container">
<h1 className="carousel-title">
devXsphere
<span className="infinite-logo"> ∞ </span>
</h1>
</div>

{/* Carousel Section */}
<div className="carousel" ref={carouselRef}>
<div className="list">
{carouselItems.map((item, index) => (
<div className="item" key={index}>
<img src={item.image} alt={`Carousel item ${item.id}`} />
<div className="content">
<div className="author">{item.author}</div>
<div className="title">{item.title}</div>
<div className="topic">{item.topic}</div>
</div>
</div>
))}
<div className="carousel-body">
<div className="carousel-container">
<div className="toggle w-16 h-16">
{theme === "light" ? (
<img
src={moonImg}
alt="Switch to Dark Mode"
onClick={() => toggleTheme("dark")}
className="w-12 h-12 cursor-pointer bg-none"
/>
) : (
<img
src={sunImg}
alt="Switch to Light Mode"
onClick={() => toggleTheme("light")}
className="w-12 h-12 cursor-pointer"
/>
)}
</div>
{/* Title Section */}
<div className="title-container">
<h1 className="carousel-title dark:text-white">
devXsphere
<span className="infinite-logo"> ∞ </span>
</h1>
</div>

{/* Carousel Controls */}
<div className="arrows">
<button id="prev" onClick={() => showSlider('prev')}>Prev</button>
<button id="next" onClick={() => showSlider('next')}>Next</button>
{/* Carousel Section */}
<div className="carousel" ref={carouselRef}>
<div className="list">
{carouselItems.map((item, index) => (
<div className="item" key={index}>
<img src={item.image} alt={`Carousel item ${item.id}`} />
<div className="content">
<div className="author">{item.author}</div>
<div className="title">{item.title}</div>
<div className="topic">{item.topic}</div>
</div>
</div>
))}
</div>

{/* Carousel Controls */}
<div className="arrows">
<button id="prev" onClick={() => showSlider("prev")}>
Prev
</button>
<button id="next" onClick={() => showSlider("next")}>
Next
</button>
</div>
</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions frontend/components/Events.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@ const Events = () => {
<div className="w-fit text-white bg-black text-xs px-3 py-1 rounded-full font-bold mb-2">
Upcoming
</div>
<div className="font-bold text-lg md:text-xl my-2">
<div className="dark:text-black font-bold text-lg md:text-xl my-2">
Intro to React.js: Building Modern Web Apps
</div>
<div className="flex items-center gap-2 text-white my-2">
<div className="dark:text-black flex items-center gap-2 text-white my-2">
<IconCalendar /> June 15, 2023 <IconClock /> 6:30 PM - 8:30 PM
</div>
<div className="text-gray-600 text-sm md:text-base my-4">
Expand All @@ -39,10 +39,10 @@ const Events = () => {
<div className="w-fit text-white bg-black text-xs px-3 py-1 rounded-full font-bold mb-2">
Upcoming
</div>
<div className="font-bold text-lg md:text-xl my-2">
<div className="dark:text-black font-bold text-lg md:text-xl my-2">
Advanced React.js Workshop: State Management & Performance
</div>
<div className="flex items-center gap-2 text-white my-2">
<div className="dark:text-black flex items-center gap-2 text-white my-2">
<IconCalendar /> July 10, 2023 <IconClock /> 5:00 PM - 7:00 PM
</div>
<div className="text-gray-600 text-sm md:text-base my-4">
Expand Down
16 changes: 8 additions & 8 deletions frontend/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { IconBrandLinkedin, IconBrandFacebook, IconBrandX, IconBrandInstagram, I

export default function Footer() {
return (
<footer className="bg-black text-white py-8">
<footer className="dark:bg-black py-8">
<div className="container mx-auto flex justify-between items-center">

{/* Social Media Section */}
Expand All @@ -12,32 +12,32 @@ export default function Footer() {

{/* LinkedIn */}
<a href="https://www.linkedin.com/company/DevXsphere" target="_blank" rel="noopener noreferrer">
<IconBrandLinkedin className="text-white hover:text-gray-300 cursor-pointer" size={30} />
<IconBrandLinkedin className=" hover:text-gray-300 cursor-pointer" size={30} />
</a>

{/* Facebook */}
<a href="https://www.facebook.com" target="_blank" rel="noopener noreferrer">
<IconBrandFacebook className="text-white hover:text-gray-300 cursor-pointer" size={30} />
<IconBrandFacebook className=" hover:text-gray-300 cursor-pointer" size={30} />
</a>

{/* X (Twitter) */}
<a href="https://x.com/DevXsphere" target="_blank" rel="noopener noreferrer">
<IconBrandX className="text-white hover:text-gray-300 cursor-pointer" size={30} />
<IconBrandX className=" hover:text-gray-300 cursor-pointer" size={30} />
</a>

{/* Instagram */}
<a href="https://www.instagram.com/devXsphere/" target="_blank" rel="noopener noreferrer">
<IconBrandInstagram className="text-white hover:text-gray-300 cursor-pointer" size={30} />
<IconBrandInstagram className=" hover:text-gray-300 cursor-pointer" size={30} />
</a>

{/* Mastodon */}
<a href="https://mastodon.social" target="_blank" rel="noopener noreferrer">
<IconBrandMastodon className="text-white hover:text-gray-300 cursor-pointer" size={30} />
<IconBrandMastodon className=" hover:text-gray-300 cursor-pointer" size={30} />
</a>

{/* Zulip */}
<a href="https://zulip.com" target="_blank" rel="noopener noreferrer">
<IconBrandZulip className="text-white hover:text-gray-300 cursor-pointer" size={30} />
<IconBrandZulip className=" hover:text-gray-300 cursor-pointer" size={30} />
</a>
</div>

Expand All @@ -48,7 +48,7 @@ export default function Footer() {

{/* Copyright Section */}
<div>
<p className="text-white">Copyright © 2024 devxsphere</p>
<p >Copyright © 2024 devxsphere</p>
</div>

</div>
Expand Down
Loading