Skip to content

Events Sidebar UI update #505

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

Open
Bhanu780 wants to merge 1 commit into
base: staging
Choose a base branch
from
Open

Events Sidebar UI update #505

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
66 changes: 33 additions & 33 deletions components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
FaCheckCircle,
FaClock,
FaUserShield,
FaAward,
} from "react-icons/fa"; // Icons for various info
import { useState, useEffect } from "react";

Expand Down Expand Up @@ -32,24 +33,23 @@ const Sidebar: React.FC<SidebarProps> = ({ event, onClose, registrationLink }) =
// Trigger sidebar to open with animation when event is passed
useEffect(() => {
if (event) {
setIsVisible(true);
} else {
setIsVisible(false);
setIsVisible(false);
setTimeout(() => setIsVisible(true), 400);
}
}, [event]);
}, [event?.id]);

if (!event) return null; // Return nothing if no event is selected

return (
<div
className={`fixed top-0 right-0 w-96 h-full bg-gray-900 shadow-xl z-50 overflow-y-auto
className={`fixed top-0 right-0 w-96 h-full bg-gradient-to-b from-gray-900 via-gray-900 to-black shadow-xl z-50 overflow-y-auto
transition-transform duration-300 ease-in-out transform
${isVisible ? "translate-x-0" : "translate-x-full"}`}
>
<div className="relative p-6 text-white">
{/* Close Button */}
<button
className="absolute top-4 right-4 text-gray-400 hover:text-white focus:outline-none"
className="absolute top-4 right-4 text-red-400 hover:text-red-300 focus:outline-none"
onClick={() => {
setIsVisible(false);
setTimeout(onClose, 300); // Delay the onClose function to allow transition to complete
Expand All @@ -59,72 +59,72 @@ const Sidebar: React.FC<SidebarProps> = ({ event, onClose, registrationLink }) =
</button>

{/* Event Name */}
<h3 className="text-2xl font-semibold mb-4 flex items-center">
<FaCheckCircle className="text-green-400 mr-2" /> {event.eventName}
<h3 className="text-2xl font-semibold mt-2 mb-4 flex items-center">
<FaAward className="text-green-400 mr-2" /> {event.eventName}
</h3>

{/* Image */}
{event.imageURL ? (
<div className="mb-4 rounded-lg overflow-hidden shadow-lg">
<div className="mb-4 relative rounded-xl overflow-hidden shadow-[0_0px_12px_rgba(16,185,129,0.25)] border-[2px] border-[#10b98180]">
<Image
src={event.imageURL}
alt={event.eventName}
width={360}
height={200}
className="object-cover rounded-lg"
className="object-cover w-full h-full rounded-xl shadow-lg transition-transform duration-220 hover:scale-[103%] hover:rotate-[0.5deg]"
priority={true}
/>
/>
</div>
) : (
<div className="bg-gray-700 h-48 mb-4 rounded-lg flex items-center justify-center">
<div className="bg-gray-700 h-48 mb-4 rounded-t-xl flex items-center justify-center">
<span className="text-gray-400">No image available</span>
</div>
)}

{/* Event Details */}
<div className="bg-gray-800 p-4 rounded-lg mb-4 shadow-md">
<div className="bg-[#0b0b0b] p-4 rounded-t-xl mb-4 shadow-md">
<div className="flex items-center mb-3">
<FaCalendarAlt className="text-blue-500 mr-2" />
<p className="text-gray-200">Event Date: {event.eventDate}</p>
<p className="text-gray-300">Event Date: {event.eventDate}</p>
</div>
<div className="flex items-center mb-3">
<FaClock className="text-yellow-500 mr-2" />
<p className="text-gray-200">
<p className="text-gray-300">
Last Registration Date: {event.lastDateOfRegistration}
</p>
</div>
<div className="flex items-center">
<FaMapMarkerAlt className="text-red-500 mr-2" />
<p className="text-gray-200">Location: Bengaluru, Karnataka</p>{" "}
<FaMapMarkerAlt className="text-green-400 mr-2" />
<p className="text-gray-300">Location: Bengaluru, Karnataka</p>{" "}
{/* Can adjust dynamically if available */}
</div>
</div>

{/* Registration Section */}
<div className="bg-gray-800 p-4 rounded-lg mb-4 shadow-md">

{event.lastDateOfRegistration >= currentDate && registrationLink && (
<a
href={registrationLink}
target="_blank"
rel="noopener noreferrer"
className="w-full"
>
<button
className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg transition duration-200 shadow-md"
<div className="bg-[#0b0b0b] p-4 rounded-lg mb-4 shadow-md">
<a
href={registrationLink}
target="_blank"
rel="noopener noreferrer"
className="w-full"
>
Register Now
</button>
</a>
<button
className="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-xl transition duration-200 shadow-md"
>
Register Now
</button>
</a>
</div>
)}
</div>

{/* About Event */}
<div className="bg-gray-800 p-4 rounded-lg shadow-md">
<h4 className="text-lg font-semibold mb-2 text-gray-100">
<div className="bg-[#0b0b0b] p-4 rounded-b-xl shadow-md">
<h4 className="text-lg font-semibold mb-2 text-green-400">
About Event
</h4>
<p className="text-gray-300">{event.description}</p>
<p className="text-gray-500">{event.description}</p>
</div>
</div>
</div>
Expand Down