Event stats

.gitignore

@@ -39,3 +39,5 @@ next-env.d.ts
 .amplify
 #amplify_outputs*
 amplifyconfiguration*
+
+.env

package.json

@@ -9,26 +9,28 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.21",
     "@mui/material": "^5.15.21",
     "@aws-amplify/adapter-nextjs": "^1.2.10",
     "@aws-amplify/auth": "^6.3.7",
     "@aws-amplify/ui-react": "^6.1.12",
-    "aws-amplify": "^6.3.8",
     "@radix-ui/react-checkbox": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.1",
     "@tanstack/react-table": "^8.17.3",
     "aws-amplify": "^6.3.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "framer-motion": "^11.2.10",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.396.0",
     "next": "14.2.3",
     "react": "^18",

src/components/ProfilePage/ProfileEventCard.tsx

@@ -0,0 +1,46 @@
+import { Card, CardFooter } from "@/components/ui/card";
+import Image from "next/image";
+import placeHolderImage from "../../assets/event-placeholder.jpeg";
+import { extractTime, extractMonthDay } from "@/util/extractDateAndTime";
+import { BiztechEvent } from "@/types";
+import { isMobile } from "@/util/isMobile";
+import { useState, useEffect } from "react";
+
+interface ProfileEventCardProps {
+  initialData: BiztechEvent | null;
+}
+
+const ProfileEventCard: React.FC<ProfileEventCardProps> = ({ initialData }) => {
+  const startTime = initialData?.startDate
+    ? extractTime(initialData.startDate)
+    : "";
+  const dateTime = initialData?.startDate
+    ? extractMonthDay(initialData.startDate)
+    : "";
+  const displayDate = initialData
+    ? startTime + " " + dateTime
+    : "Event not Found";
+  const [isMobileDevice, setIsMobileDevice] = useState(false);
+  useEffect(() => {
+    const userAgent = navigator.userAgent;
+    setIsMobileDevice(isMobile(userAgent));
+  }, []);
+  return (
+    <Card
+      className="w-1/3 border-none bg-events-card-bg"
+      style={{ width: isMobileDevice ? "50%" : "33%" }}
+    >
+      <Image
+        src={placeHolderImage}
+        alt="event-image"
+        className="w-full h-[100px] rounded-t-lg"
+      />
+      <CardFooter className="font-poppins p-3 gap-0.5 flex flex-col text-left items-start">
+        <h6 className="text-white font-500 text-sm">{initialData?.ename}</h6>
+        <p className="text-baby-blue text-xs">{displayDate}</p>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default ProfileEventCard;

src/components/ProfilePage/ProfileRow.tsx

@@ -0,0 +1,20 @@
+export const ProfileField = ({
+  field,
+  value,
+  className,
+}: {
+  field: string;
+  value: string;
+  className?: string;
+}) => {
+  return (
+    <div className={`w-1/2 font-poppins ${className}`}>
+      <h6 className="text-baby-blue text-sm">{field}</h6>
+      <p className="text-white text-xs">{value}</p>
+    </div>
+  );
+};
+
+export const ProfileRow = ({ children }: { children: React.ReactNode }) => {
+  return <div className="flex my-3">{children}</div>;
+};

src/components/ProfilePage/TextIcon.tsx

@@ -0,0 +1,32 @@
+import Image, { StaticImageData } from "next/image";
+
+interface TextIconProps {
+  text: any;
+  icon: string;
+  iconSize: number;
+  iconAtEnd?: boolean;
+  className?: string;
+}
+
+const TextIcon: React.FC<TextIconProps> = ({
+  text,
+  icon,
+  iconSize,
+  iconAtEnd = false,
+  className,
+}) => {
+  return (
+    <div
+      className={`flex items-center gap-3 ${className}`}
+      style={{
+        flexDirection: iconAtEnd ? "row" : "row-reverse",
+        justifyContent: "start",
+      }}
+    >
+      {text}
+      <Image src={icon} alt="Icon" width={iconSize} height={iconSize} />
+    </div>
+  );
+};
+
+export default TextIcon;

src/components/ProfilePage/UserEvents.tsx

@@ -0,0 +1,81 @@
+import Image from "next/image";
+import Link from "next/link";
+import * as Separator from "@radix-ui/react-separator";
+import TextIcon from "./TextIcon";
+import ProfileEventCard from "./ProfileEventCard";
+import RegisteredIcon from "../../../public/assets/icons/registered_events_icon.svg";
+import SavedIcon from "../../../public/assets/icons/bookmark_icon.svg";
+import BizBot from "../../../public/assets/bizbot_peeking.png";
+import { BiztechEvent } from "@/types";
+import { isMobile } from "@/util/isMobile";
+import { useState, useEffect } from "react";
+
+interface UserEventsProps {
+  registeredEvents: BiztechEvent[];
+  savedEvents: BiztechEvent[];
+}
+
+export const UserEvents: React.FC<UserEventsProps> = ({
+  registeredEvents,
+  savedEvents,
+}) => {
+  const [isMobileDevice, setIsMobileDevice] = useState(false);
+  useEffect(() => {
+    const userAgent = navigator.userAgent;
+    setIsMobileDevice(isMobile(userAgent));
+  }, []);
+  return (
+    <div className="relative bg-profile-card-bg rounded-md p-6 w-full lg:w-[55%]">
+      <Image
+        src={BizBot}
+        alt="BizBot"
+        className="absolute top-[-150px] right-[-10px] h-[150px] w-[auto] hidden lg:block"
+      />
+      <h4 className="text-biztech-green">Your Events</h4>
+      <Separator.Root className="SeparatorRoot my-3 mx-0 bg-profile-separator-bg h-[0.5px]" />
+      <TextIcon
+        className="mb-4"
+        text={<h5 className="text-white">Registered</h5>}
+        icon={RegisteredIcon}
+        iconSize={24}
+      />
+      <div
+        className="flex items-center justify-center gap-6 mb-6"
+        style={{
+          flexDirection: registeredEvents.length === 0 ? "column" : "row",
+        }}
+      >
+        {registeredEvents.length === 0 ? (
+          <h6 className="text-baby-blue text-center">No registered events</h6>
+        ) : (
+          registeredEvents
+            .slice(isMobileDevice ? -2 : -3)
+            .map((event) => <ProfileEventCard initialData={event} key={event.id} />)
+        )}
+      </div>
+
+      <TextIcon
+        className="my-4"
+        text={<h5 className="text-white">Saved</h5>}
+        icon={SavedIcon}
+        iconSize={24}
+      />
+      <div
+        className="flex flex-col items-center justify-center gap-6"
+        style={{ flexDirection: savedEvents.length === 0 ? "column" : "row" }}
+      >
+        {savedEvents.length === 0 ? (
+          <h6 className="text-baby-blue text-center">No saved events</h6>
+        ) : (
+          savedEvents
+            .slice(isMobileDevice ? -2 : -3)
+            .map((event) => <ProfileEventCard initialData={event} key={event.id} />)
+        )}
+      </div>
+      <Separator.Root className="SeparatorRoot my-6 mx-0 bg-profile-separator-bg h-[0.5px]" />
+      <Link href="">
+        <p className="text-white text-right underline text-xs">View all</p>
+      </Link>
+    </div>
+  );
+};