Skip to content

Commit

Permalink
Redesigned Events Page
Browse files Browse the repository at this point in the history
  • Loading branch information
deveshsawant05 committed Oct 27, 2024
1 parent c64f9f6 commit 272793a
Show file tree
Hide file tree
Showing 5 changed files with 174 additions and 103 deletions.
70 changes: 70 additions & 0 deletions src/app/events/components/eventCard.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import React, { useState } from "react";

import { getPublicUrl } from "@/lib/utils";
import Link from "next/link";

import { Montserrat, Alata } from "next/font/google";
const montserratFont = Montserrat({
weight: ["100", "200", "400", "600"],
subsets: ["latin"],
});
const boldMontserratFont = Montserrat({
weight: ["600"],
subsets: ["latin"],
});

export default function EventCard(props) {
const [event, setEvent] = useState(props.event);
const [eventDate, setEventDate] = useState(event.date);
const [eventTime, setEventTime] = useState(event.time);
let posterUrl = getPublicUrl(`/events/${event.id}/poster`);
return (
<div className={`${montserratFont.className} lg:row-span-2 lg:col-span-1 w-full h-full`}>
<Link href={`\\event\\${event.id}`}>
<div className="flex flex-col">
<div className="w-full h-full border-2 border-primary rounded-2xl overflow-hidden">
<img src={posterUrl} className="object-cover" />
</div>
<div className={`${montserratFont.className} ms-2 mt-1`}>
<p className="text-primary">{formatDate(eventDate)} | {formatTime(eventTime)}</p>
<p className="font-semibold text-xl">{event.name}</p>
<p className="text-sm">{trimString(event.description,50)}</p>
</div>
</div>
</Link>
</div>
);
}
function formatDate(dateString) {
const [year, month, day] = dateString.split("-");
const date = new Date(year, month - 1, day); // Month is 0-indexed

const formattedDay = date.getDate();
const monthName = date.toLocaleString("default", { month: "long" });
const formattedYear = date.getFullYear();

return `${formattedDay} ${monthName} ${formattedYear}`;
}


const formatTime = (timeString) => {
const timeRegex = /^(\d{2}):(\d{2}):(\d{2})$/;
const match = timeString.match(timeRegex);
if (!match) {
return 'Invalid Time Format';
}
let hours = parseInt(match[1], 10);
const minutes = parseInt(match[2], 10);
const ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12;
const formattedMinutes = String(minutes).padStart(2, '0');
return `${hours}:${formattedMinutes} ${ampm}`;
};

const trimString = (str, maxLength) => {
if (str.length > maxLength) {
return str.substring(0, maxLength) + '...';
}
return str;
};
17 changes: 17 additions & 0 deletions src/app/events/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from "react";
import Navbar from "@/components/navbar";
import Footer from "@/components/footer";

interface RootLayoutProps {
children: React.ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
return (
<>
<Navbar />
{children}
<Footer />
</>
);
}
118 changes: 57 additions & 61 deletions src/app/events/page.jsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,40 @@
"use client";
import { useEffect, useState } from "react";
import EventBox from "../../components/ui/EventBox";
import { getPublicUrl } from "@/lib/utils";
function Page() {
import React, { useState ,useEffect } from "react";
import { useRouter } from "next/navigation";
import "./styles.css"
import Loader from "@/components/ui/loader";
import EventCard from "./components/eventCard"

import { Montserrat, Alata } from "next/font/google";
const montserratFont = Montserrat({
weight: ["100", "200", "400", "600"],
subsets: ["latin"],
});
const alataFont = Alata({ weight: ["400"], subsets: ["latin"] });

export default function Events() {
const router = useRouter();
const [events, setEvents] = useState([]);
const [nextPageEvents, setNextPageEvents] = useState([]);
const [pageCount, setPageCount] = useState(1);
const [hasMoreEvents, setHasMoreEvents] = useState(true);
const [columnCount, setColumnCount] = useState(3);
const [hasMoreEvents, setHasMoreEvents] = useState(false);
const [loading, setLoading] = useState(false);

const fetchEvents = async (page) => {
try {
setHasMoreEvents(false);
setLoading(true);
const response = await fetch(`/api/v1/get/events?page=${page}`);
const data = await response.json();
return data;
} catch (error) {
console.error("Error fetching events:", error);
return [];
}
finally {
setHasMoreEvents(true);
setLoading(false);
}
};

const getMoreEvents = async () => {
Expand All @@ -44,69 +61,48 @@ function Page() {
setHasMoreEvents(false);
}
};

const handleResize = () => {
if (window.innerWidth < 768) {
setColumnCount(2);
} else {
setColumnCount(3);
}
};

window.addEventListener("resize", handleResize);
handleResize();
loadInitialEvents();

return () => {
window.removeEventListener("resize", handleResize);
};
}, []);

const columns = Array.from({ length: columnCount }, () => []);

events.forEach((event, index) => {
let posterUrl = getPublicUrl(`/events/${event.id}/poster`);

columns[index % columnCount].push(
<EventBox
img={posterUrl}
key={event.id}
caption={event.description}
time={event.date}
category={event.name}
hostLink={event.host_link}
/>,
);
});
}, []);

return (
<div className="flex flex-col w-full h-full">
<div className="self-center h-fit py-2 w-11/12 flex flex-col bg-[#201f31] mt-4">
<p className="md:pl-12 pt-5 text-2xl font-medium mb-7 ">Events Near</p>
<div className="self-center w-full grid grid-flow-row grid-cols-2 md:grid-cols-3">
{columns.map((column, colIndex) => (
<section
key={colIndex}
className={`h-fit w-full gap-8 py-4 grid grid-flow-row md:pl-12 ${
colIndex === 1 && columnCount === 3 ? "mt-32" : ""
}
${colIndex === 1 && columnCount === 2 ? "mt-20" : ""}`}
>
{column}
</section>
<div className="w-full flex justify-center mt-6">
<div className="w-[95%]">
<p className={`underline text-3xl ml-4 ${alataFont.className}`}>
Events
</p>
<div className="grid lg:grid-cols-3 gap-8 px-4 mt-6 sm:grid-cols-2 grid-cols-1 grid-rows-1">
{/* Static Quote Box in 2nd column, 1st row */}
<div className="h-full lg:col-start-2 lg:col-span-1 lg:row-start-1 lg:row-span-1 sm:col-span-2 col-span-1 p-4 bg-gray-700 rounded-2xl flex items-center justify-center text-white text-center">
Random image or quote
</div>

{events.map((event, index) => (
<EventCard event={event} key={index}/>
))}
</div>
{hasMoreEvents && (
<button
onClick={getMoreEvents}
className="text-sm md:text-xl hover:border-[#e890bd] text-[#FFBADE] border-[#FFBADE] border-[0.5vh] w-fit px-24 md:px-32 active:scale-95 transition-all duration-100 self-center rounded-3xl py-3"

{loading ? (
<div className="w-full flex justify-center p-12">
<p className={`text-xl px-5 ${montserratFont.className}`}>
Loading...{" "}
</p>
<Loader />
</div>
) : (
hasMoreEvents && (
<div
className={`${montserratFont.className} w-full flex justify-center my-10`}
>
Show More
</button>
<button
className="show-more-button"
onClick={getMoreEvents}
>
<p>Show More</p>
</button>
</div>
)
)}
</div>
</div>
);
}

export default Page;
30 changes: 30 additions & 0 deletions src/app/events/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
.show-more-button{

box-sizing: border-box;
width: 300px;
height: 45px;

background-color : color-mix(in srgb, var(--primary) 5%, transparent);
box-shadow: color-mix(in srgb, #fff 5%, transparent) 1px 1px 15px;
border: solid color-mix(in srgb, var(--primary) 20%, transparent) 1px;
border-radius: 43px;

transition: 0.5s;
}
.show-more-button:hover{
background-color : color-mix(in srgb, var(--muted-foreground) 40%, transparent);
}
.show-more-button>p{
font-weight: 700;
font-size: 18px;

color: var(--primary);
}

@media screen and (max-width : 1024px){
.show-more-button{

box-sizing: border-box;
width: 200px;
}
}
42 changes: 0 additions & 42 deletions src/components/ui/EventBox.jsx

This file was deleted.

0 comments on commit 272793a

Please sign in to comment.