Layout

Soumyadas15 · Dec 29, 2023 · 22d39c9 · 22d39c9
1 parent 86f9cff
commit 22d39c9
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 16 deletions.
diff --git a/app/components/dashboard/analytics/Eventbar.tsx b/app/components/dashboard/analytics/Eventbar.tsx
@@ -22,7 +22,7 @@ const EventBar: React.FC<EventBarInterface> = ({
                     flex 
                     items-center 
                     justify-center
-                    ${currentEvent ? 'bg-black' : 'bg-neutral-200'}
+                    ${currentEvent ? 'bg-black dark:bg-neutral-200' : 'bg-neutral-200 dark:bg-neutral-800'}
                     cursor-pointer
                 `}
                 onClick={() => router.push(`/dashboard/${event?.id}/analytics`)} 
@@ -44,7 +44,7 @@ const EventBar: React.FC<EventBarInterface> = ({
                             text-2xl 
                             font-semibold 
                             mt-1
-                            ${currentEvent ? 'text-white' : 'text-black'}
+                            ${currentEvent ? 'text-white dark:text-black' : 'text-black dark:text-white'}
                         `}>
                             {event?.title}
                     </div>
@@ -54,7 +54,8 @@ const EventBar: React.FC<EventBarInterface> = ({
                                 overflow-hidden 
                                 flex text-start
                                 
-                                ${currentEvent ? 'text-neutral-400' : 'text-neutral-600'}
+                        </div>
+                                ${currentEvent ? 'text-neutral-400 dark:text-neutral-800' : 'text-neutral-600 dark:text-neutral-400'}
                         `}>
                             Lorem ipsummdddmmmaesssa dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuuuuuuuuuuuuuuuuuuuuuuunt
                         </div>

diff --git a/app/components/events/secondaryLayout/EventDateInfo2.tsx b/app/components/events/secondaryLayout/EventDateInfo2.tsx
@@ -0,0 +1,59 @@
+import { SafeEvent } from "@/app/types";
+import EventDetail from "./EventDetail";
+import { Calendar, LocateIcon, MousePointerClick } from "lucide-react";
+import { BiLocationPlus } from "react-icons/bi";
+import { MdLocationPin } from "react-icons/md";
+import moment from "moment";
+
+interface EventDateInfo2Props {
+    event?: SafeEvent
+}
+
+const EventDateInfo2: React.FC<EventDateInfo2Props> = ({
+    event,
+}) => {
+
+   const date = event?.date;
+
+    const formattedDate = moment(date).format("MMMM D, YYYY");
+    const options = { year: 'numeric', month: 'long', day: 'numeric' };
+    const [month, day, year] = formattedDate.split(' ');
+    const abbreviatedMonth = month.substring(0, 3);
+    const trimmedDay = day.slice(0, -1);
+
+    return ( 
+        <div className="h-[10rem] w-full flex items-center justify-start">
+            <div className="h-[90%] w-full flex flex-col items-center justify-between gap-8">
+                <div className="flex items-center gap-4 w-full">
+                    <EventDetail
+                        label={event?.college}
+                        icon={{ component: <MdLocationPin size={30} className="text-rose-600"/>}}
+                    />
+                    <EventDetail
+                        label={formattedDate}
+                        icon={{ component: <Calendar size={30} className="text-rose-600"/>}}
+                    />
+                    <EventDetail
+                        label={event?.college}
+                        icon={{ component: <MdLocationPin size={30} className="text-rose-600"/>}}
+                    />
+                </div>
+                <div className="flex flex-col items-start gap-4 w-full">
+                    <EventDetail
+                        label={event?.college}
+                        icon={{ component: <MdLocationPin size={30} className="text-rose-600"/>}}
+                    />
+                    <EventDetail
+                        label={formattedDate}
+                        icon={{ component: <Calendar size={30} className="text-rose-600"/>}}
+                    />
+
+                </div>
+
+            </div>
+
+        </div>
+     );
+}
+
+export default EventDateInfo2;
diff --git a/app/components/events/secondaryLayout/EventDetail.tsx b/app/components/events/secondaryLayout/EventDetail.tsx
@@ -0,0 +1,30 @@
+interface Icon {
+    component: React.ReactElement;
+    style?: React.CSSProperties;
+}
+
+interface EventDetailProps {
+    label?: string | number | null;
+    subtitle?: string;
+    icon?: Icon;
+    gradient?: string;
+    increase?: number;
+}
+
+const EventDetail: React.FC<EventDetailProps> = ({
+    label,
+    icon
+}) => {
+    return ( 
+        <div className="h-[50%] w-[30%] flex items-center gap-3">
+            {icon && (
+                <div style={icon.style} className="">
+                    {icon.component}
+                </div>
+            )}
+            <div className="font-bold">{label}</div>
+        </div>
+     );
+}
+
+export default EventDetail;
diff --git a/app/dashboard/[eventId]/analytics/page.tsx b/app/dashboard/[eventId]/analytics/page.tsx
@@ -83,21 +83,21 @@ const DashboardAnaltics = async (
                             <DataCard 
                                     label={clicks!} 
                                     subtitle="Clicks"
-                                    gradient="bg-pink-200 dark:bg-pink-900 dark:bg-opacity-60 transition ease-in-out duration-100"
+                                    gradient="bg-pink-200 dark:bg-[#59223b] transition ease-in-out duration-100"
                                     increase={clicksToday}
                                     icon={{ component: <MousePointerClick size={30} className="dark:text-white text-black"/>, style: { color: 'black', opacity: '60%'}}}
                             />
                             <DataCard 
                                 label={likes!}
                                 subtitle="Likes"
                                 increase={likesToday}
-                                gradient="bg-indigo-200 dark:bg-indigo-800 dark:bg-opacity-50 transition ease-in-out duration-100"
+                                gradient="bg-indigo-200 dark:bg-[#21314a] transition ease-in-out duration-100"
                                 icon={{ component: <Heart size={30} className="dark:text-white text-black"/>, style: { color: 'black', opacity: '60%'}}}
                             />
                             <DataCard 
                                 label={registrations.length!} 
                                 subtitle="Registrations"
-                                gradient="bg-cyan-200 dark:bg-cyan-800 dark:bg-opacity-60 transition ease-in-out duration-100"
+                                gradient="bg-cyan-200 dark:bg-[#21464a] transition ease-in-out duration-100"
                                 increase={registrationsToday}
                                 icon={{ component: <Users size={30} className="dark:text-white text-black"/>}}
                             />
@@ -107,15 +107,23 @@ const DashboardAnaltics = async (
                             <div className="flex flex-col h-[10%] w-full text-2xl text-left">
                                 Department wise registrations
                             </div>
-                            <div className="h-[90%] flex items-center justify-center w-full rounded-xl">
+                            <div className="h-[90%] flex items-center justify-center w-full rounded-xl dark:bg-neutral-800">
                                 <LineChart/>
 
                             </div>
 
                         </div>
-                        <div className=" w-full h-[30%] flex rounded-lg items-center justify-center">
+
+                        <div className=" w-full h-[40%] flex flex-col rounded-lg items-center justify-center">
+                            <div className="flex flex-col h-[10%] w-full text-2xl text-left">
+                                Department wise registrations
+                            </div>
+                            <div className="h-[90%] flex items-center justify-center w-full rounded-xl dark:bg-neutral-800">
                                 <BarGraph data={registrationsByDepartment}/>
+
+                            </div>
                         </div>
+
                     </div>
                     <div className="w-[40%] h-full flex flex-col -mt-22 items-center p-3">
                         <EventList events={myEvents} currEvent={event!}/>

diff --git a/app/events/[eventId]/EventClient.tsx b/app/events/[eventId]/EventClient.tsx
@@ -136,7 +136,7 @@ const EventClient: React.FC<EventClientProps> = ({
 
     return ( 
        <Container>
-        <div className="max-w-screen-lg mx-auto">
+        <div className="max-w-screen-lg mx-auto pt-24 pb-20">
             <div className="flex flex-col gap-6 mt-[-25px]">
                 <EventHead
                     title={event.title}

diff --git a/app/events/[eventId]/EventClient2.tsx b/app/events/[eventId]/EventClient2.tsx
@@ -23,6 +23,7 @@ import axios from "axios";
 import toast from "react-hot-toast";
 import { useRouter } from "next/navigation";
 import useTicketModal from "@/app/hooks/useTicketModal";
+import EventDateInfo2 from "@/app/components/events/secondaryLayout/EventDateInfo2";
 
 interface EventClient2Props {
     registrations?: Registration[];
@@ -131,9 +132,6 @@ const EventClient2: React.FC<EventClient2Props> = ({
       }, []);
 
 
-
-
-
     //Handles registration cancellation
 
     const handleCancelRegistration = async () => {
@@ -186,7 +184,7 @@ const EventClient2: React.FC<EventClient2Props> = ({
 
     return ( 
        <Container>
-        <div className="flex w-full items-start gap-20"> 
+        <div className="flex w-full items-start gap-20 pb-20 pt-10"> 
             <div className="sticky top-0 flex h-screen w-full items-center">
                 <div className="relative w-full h-[90%] overflow-none transition duration-500">
                     {/* Gradient Div */}
@@ -224,9 +222,14 @@ const EventClient2: React.FC<EventClient2Props> = ({
                     <div className="text-4xl font-bold">
                         {event.title}
                     </div>
-                    <div className="">
-                       <p>Created by {event?.title}</p>
-                    </div>
+
+
+                    {/* event details */}
+
+                    <EventDateInfo2 event={event}/>
+
+                    {/* Buttons */}
+
                     <div className="w-full flex items-center justify-between">
                         <div className="w-[49%] h-full">
                         {isRegistered ? (
@@ -273,6 +276,9 @@ const EventClient2: React.FC<EventClient2Props> = ({
                             )}
                         </div>
                     </div>
+
+
+
                     <div className="flex flex-col gap-2 items-start mt-10">
                         <div className="text-xl font-bold">About {event.title}</div>
                         <div className="text-md dark:text-[#dadada] leading-8 font-light">