Skip to content

Refactor EventDetailPage to update social icons section and add organ #63

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

Merged
codeunia-dev merged 1 commit into from
Jul 12, 2025
Merged

Refactor EventDetailPage to update social icons section and add organ #63

Show file tree
Hide file tree
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
81 changes: 40 additions & 41 deletions app/events/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -367,26 +367,6 @@ export default function EventDetailPage() {
<span>Registration deadline</span>
<span className="font-medium text-foreground">{event?.registration_deadline ? new Date(event.registration_deadline).toLocaleDateString() : '-'}</span>
</div>
{/* Social Icons Row */}
{event?.socials && (
<div className="flex justify-center gap-4 mb-4">
{event.socials.whatsapp && (
<a href={event.socials.whatsapp} target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" className="rounded-full bg-green-100 dark:bg-green-900/30 p-3 hover:bg-green-200 dark:hover:bg-green-800 transition-colors shadow">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.477 2 2 6.477 2 12c0 1.85.504 3.59 1.38 5.08L2 22l5.09-1.36A9.953 9.953 0 0 0 12 22c5.523 0 10-4.477 10-10S17.523 2 12 2Zm0 18a7.95 7.95 0 0 1-4.09-1.13l-.29-.17-3.02.8.81-2.95-.19-.3A7.96 7.96 0 1 1 20 12c0 4.411-3.589 8-8 8Zm4.29-5.38c-.22-.11-1.3-.64-1.5-.71-.2-.07-.35-.11-.5.11-.15.22-.57.71-.7.86-.13.15-.26.16-.48.05-.22-.11-.93-.34-1.77-1.09-.66-.59-1.1-1.31-1.23-1.53-.13-.22-.01-.34.1-.45.1-.1.22-.26.33-.39.11-.13.15-.22.22-.37.07-.15.04-.28-.02-.39-.07-.11-.5-1.21-.68-1.66-.18-.44-.36-.38-.5-.39-.13-.01-.28-.01-.43-.01-.15 0-.39.06-.6.28-.21.22-.8.78-.8 1.9 0 1.12.82 2.2.93 2.35.11.15 1.62 2.48 3.93 3.38.55.19.98.3 1.31.38.55.14 1.05.12 1.44.07.44-.07 1.3-.53 1.48-1.04.18-.51.18-.95.13-1.04-.05-.09-.2-.14-.42-.25Z"/></svg>
</a>
)}
{event.socials.instagram && (
<a href={event.socials.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="rounded-full bg-pink-100 dark:bg-pink-900/30 p-3 hover:bg-pink-200 dark:hover:bg-pink-800 transition-colors shadow">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="5" fill="none" stroke="currentColor" strokeWidth="2"/><circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" strokeWidth="2"/><circle cx="17.5" cy="6.5" r="1.5" fill="currentColor"/></svg>
</a>
)}
{event.socials.linkedin && (
<a href={event.socials.linkedin} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" className="rounded-full bg-blue-100 dark:bg-blue-900/30 p-3 hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors shadow">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="4" fill="none" stroke="currentColor" strokeWidth="2"/><path d="M8 11v5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/><circle cx="8" cy="8" r="1" fill="currentColor"/><path d="M12 16v-3a2 2 0 0 1 4 0v3" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
</a>
)}
</div>
)}
{isAuthenticated ? (
<Button className="w-full bg-primary hover:bg-primary/90 text-white font-semibold rounded-lg mt-2">Register Now</Button>
) : (
Expand Down Expand Up @@ -420,26 +400,6 @@ export default function EventDetailPage() {
<span>Registration deadline</span>
<span className="font-medium text-foreground">{event?.registration_deadline ? new Date(event.registration_deadline).toLocaleDateString() : '-'}</span>
</div>
{/* Social Icons Row */}
{event?.socials && (
<div className="flex justify-center gap-4 mb-4">
{event.socials.whatsapp && (
<a href={event.socials.whatsapp} target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" className="rounded-full bg-green-100 dark:bg-green-900/30 p-3 hover:bg-green-200 dark:hover:bg-green-800 transition-colors shadow">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.477 2 2 6.477 2 12c0 1.85.504 3.59 1.38 5.08L2 22l5.09-1.36A9.953 9.953 0 0 0 12 22c5.523 0 10-4.477 10-10S17.523 2 12 2Zm0 18a7.95 7.95 0 0 1-4.09-1.13l-.29-.17-3.02.8.81-2.95-.19-.3A7.96 7.96 0 1 1 20 12c0 4.411-3.589 8-8 8Zm4.29-5.38c-.22-.11-1.3-.64-1.5-.71-.2-.07-.35-.11-.5.11-.15.22-.57.71-.7.86-.13.15-.26.16-.48.05-.22-.11-.93-.34-1.77-1.09-.66-.59-1.1-1.31-1.23-1.53-.13-.22-.01-.34.1-.45.1-.1.22-.26.33-.39.11-.13.15-.22.22-.37.07-.15.04-.28-.02-.39-.07-.11-.5-1.21-.68-1.66-.18-.44-.36-.38-.5-.39-.13-.01-.28-.01-.43-.01-.15 0-.39.06-.6.28-.21.22-.8.78-.8 1.9 0 1.12.82 2.2.93 2.35.11.15 1.62 2.48 3.93 3.38.55.19.98.3 1.31.38.55.14 1.05.12 1.44.07.44-.07 1.3-.53 1.48-1.04.18-.51.18-.95.13-1.04-.05-.09-.2-.14-.42-.25Z"/></svg>
</a>
)}
{event.socials.instagram && (
<a href={event.socials.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="rounded-full bg-pink-100 dark:bg-pink-900/30 p-3 hover:bg-pink-200 dark:hover:bg-pink-800 transition-colors shadow">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="5" fill="none" stroke="currentColor" strokeWidth="2"/><circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" strokeWidth="2"/><circle cx="17.5" cy="6.5" r="1.5" fill="currentColor"/></svg>
</a>
)}
{event.socials.linkedin && (
<a href={event.socials.linkedin} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" className="rounded-full bg-blue-100 dark:bg-blue-900/30 p-3 hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors shadow">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="4" fill="none" stroke="currentColor" strokeWidth="2"/><path d="M8 11v5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/><circle cx="8" cy="8" r="1" fill="currentColor"/><path d="M12 16v-3a2 2 0 0 1 4 0v3" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
</a>
)}
</div>
)}
{isAuthenticated ? (
<Button className="w-full bg-primary hover:bg-primary/90 text-white font-semibold rounded-lg mt-2">Register Now</Button>
) : (
Expand Down Expand Up @@ -485,8 +445,34 @@ export default function EventDetailPage() {
<div className="text-lg font-semibold mb-2">Need Help?</div>
<div className="text-sm text-muted-foreground mb-2">Have questions about this event? Contact the organizers or check the FAQ section.</div>

{/* Social Icons Row */}
{event?.socials && (
<div className="flex justify-center gap-4 mb-4">
{event.socials.whatsapp && (
<a href={event.socials.whatsapp} target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" className="rounded-full bg-green-100 dark:bg-green-900/30 p-3 hover:bg-green-200 dark:hover:bg-green-800 transition-colors shadow">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.477 2 2 6.477 2 12c0 1.85.504 3.59 1.38 5.08L2 22l5.09-1.36A9.953 9.953 0 0 0 12 22c5.523 0 10-4.477 10-10S17.523 2 12 2Zm0 18a7.95 7.95 0 0 1-4.09-1.13l-.29-.17-3.02.8.81-2.95-.19-.3A7.96 7.96 0 1 1 20 12c0 4.411-3.589 8-8 8Zm4.29-5.38c-.22-.11-1.3-.64-1.5-.71-.2-.07-.35-.11-.5.11-.15.22-.57.71-.7.86-.13.15-.26.16-.48.05-.22-.11-.93-.34-1.77-1.09-.66-.59-1.1-1.31-1.23-1.53-.13-.22-.01-.34.1-.45.1-.1.22-.26.33-.39.11-.13.15-.22.22-.37.07-.15.04-.28-.02-.39-.07-.11-.5-1.21-.68-1.66-.18-.44-.36-.38-.5-.39-.13-.01-.28-.01-.43-.01-.15 0-.39.06-.6.28-.21.22-.8.78-.8 1.9 0 1.12.82 2.2.93 2.35.11.15 1.62 2.48 3.93 3.38.55.19.98.3 1.31.38.55.14 1.05.12 1.44.07.44-.07 1.3-.53 1.48-1.04.18-.51.18-.95.13-1.04-.05-.09-.2-.14-.42-.25Z"/></svg>
</a>
)}
{event.socials.instagram && (
<a href={event.socials.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="rounded-full bg-pink-100 dark:bg-pink-900/30 p-3 hover:bg-pink-200 dark:hover:bg-pink-800 transition-colors shadow">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="5" fill="none" stroke="currentColor" strokeWidth="2"/><circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" strokeWidth="2"/><circle cx="17.5" cy="6.5" r="1.5" fill="currentColor"/></svg>
</a>
)}
{event.socials.linkedin && (
<a href={event.socials.linkedin} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" className="rounded-full bg-blue-100 dark:bg-blue-900/30 p-3 hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors shadow">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="4" fill="none" stroke="currentColor" strokeWidth="2"/><path d="M8 11v5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/><circle cx="8" cy="8" r="1" fill="currentColor"/><path d="M12 16v-3a2 2 0 0 1 4 0v3" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
</a>
)}
</div>
)}

<Button
className="w-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-semibold rounded-xl py-3 px-4 shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-200 border-0 group relative overflow-hidden"
onClick={() => {
const phoneNumber = event?.organizer_contact?.phone || '+91 86990 25107';
const cleanPhoneNumber = phoneNumber.replace(/\s+/g, '');
window.open(`tel:${cleanPhoneNumber}`, '_self');
}}
>
<div className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></div>
<div className="relative flex items-center justify-center gap-2">
Expand All @@ -495,14 +481,27 @@ export default function EventDetailPage() {
</svg>
<span>Contact Organizer</span>
</div>
<div className="text-xs opacity-90 mt-1">+91 86990 25107</div>
<div className="text-xs opacity-90 mt-1">{event?.organizer_contact?.phone || '+91 86990 25107'}</div>
</Button>
</div>
</div>
</div> {/* end grid */}
{/* Disclaimer Section - left aligned, bordered box */}
<div className="mt-6 mb-2 max-w-3xl">
<div className="bg-background/50 border border-primary/10 rounded-xl p-4">
<p className="text-xs text-muted-foreground text-left">
This opportunity has been listed by Codeunia. Codeunia is not liable for any content mentioned in this opportunity or the process followed by the organizers for this opportunity. However, please
<Link href="/contact" className="text-green-600 underline ml-1 hover:text-green-700 transition-colors inline-block">
Raise a Complaint
</Link>{' '}
if you want Codeunia to look into the matter.
</p>
</div>
</div>
</div>
</div>
</div>

<Footer/>
</div>
)
Expand Down
12 changes: 12 additions & 0 deletions components/data/events.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ export interface Event {
excerpt: string;
description: string;
organizer: string;
organizer_contact?: {
phone?: string;
email?: string;
};
date: string;
time: string;
duration: string;
Expand Down Expand Up @@ -66,6 +70,10 @@ export const mockEvents: Event[] = [
excerpt: "India's Smartest Innovation Showdown - A reality-show-style hackathon where entertainment meets engineering",
description: "India's first reality-show-style hackathon where entertainment meets engineering. Compete in live eliminations, technical battles, and collaborative problem-solving across 5 adrenaline-filled rounds. Join 5,000+ participants for a prize pool of ₹1,00,000+ and experience innovation, adaptability, and showmanship like never before.",
organizer: "Codeunia",
organizer_contact: {
phone: "+91 86990 25107",
email: "codeunia@gmail.com"
},
date: "2025-08-25",
time: "12:00 AM",
duration: "Multi-round",
Expand Down Expand Up @@ -133,6 +141,10 @@ export const mockEvents: Event[] = [
excerpt: "Your weekly coding showdown – Compete, Learn, and Win!",
description: "Join CodeRush Weekly – a fair, proctored, and competitive coding challenge that tests your aptitude, DSA, and interview readiness in a real hiring simulation. Solve curated problems, compete with top coders, and climb the leaderboard with weekly challenges. Rankings, certificates, and exclusive rewards await the best minds.",
organizer: "Codeunia & Devantra Community",
organizer_contact: {
phone: "+91 86990 25107",
email: "codeunia@gmail.com"
},
date: "2025-07-13", // You can update this weekly
time: "7:00 PM",
duration: "2 hrs",
Expand Down