feat: events screen

.gitignore

@@ -103,4 +103,10 @@ node_modules/
 .env
 
 # Docker
-docker-compose.yml
+docker-compose.yml
+
+# Configuration files
+*.yml
+
+# GraphQL Plugin configuration
+*.graphql

app/components/BondscapeLogo.tsx

@@ -5,9 +5,11 @@ const BondscapeLogo = () => {
   return (
     <div className="w-[123px] h-[28px] md:w-[175px] md:h-[40px] relative">
       <Image
+        priority
         alt={"Bondscape logo"}
         src={"/bondscapeLogo.png"}
         fill
+        sizes="(max-width: 768px) 10vw, (max-width: 1200px) 15vw"
         quality={75}
       />
     </div>

app/components/EventComponent.tsx

@@ -0,0 +1,44 @@
+"use client";
+import React from "react";
+import { Event } from "@/types/event";
+import Image from "next/image";
+import useFormatDateToTZ from "@/hooks/timeformat/useFormatDateToTZ";
+
+interface Props {
+  event: Event;
+  lastItemRef: any;
+}
+
+const EventComponent = ({ event, lastItemRef }: Props) => {
+  const { getEventPeriod } = useFormatDateToTZ();
+  return (
+    <div
+      className={`flex flex-col w-full p-[24px] rounded-[24px] bg-bondscape-surface gap-[1rem] bondscape-box-shadow-event-card`}
+      ref={lastItemRef}
+    >
+      <div className="relative w-full h-[16.5rem] xl:h-[23.5rem]">
+        <Image
+          key={event.id}
+          alt={"Event image"}
+          src={event.coverPic}
+          fill
+          sizes="(max-width: 1920px) 50vw, (max-width: 1200px) 40vw, 33vw"
+          className="rounded-[12px] w-full h-full top-0 left-0 transition-opacity opacity-[0] duration-[1s] object-cover"
+          onLoadingComplete={(image) => {
+            image.classList.remove("opacity-[0]");
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-[0.25rem]">
+        <div className="text-[20px] font-semibold text-bondscape-text_neutral_900 leading-[1.75rem]">
+          {event.name}
+        </div>
+        <div className="text-[14px] font-semibold text-bondscape-primary leading-[1.3rem]">
+          {getEventPeriod(event.startDate, event.endDate)}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EventComponent;

app/components/EventsHeader.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+interface Props {
+  readonly onPressCreateEvent: () => void;
+}
+
+const EventsHeader = ({ onPressCreateEvent }: Props) => {
+  return (
+    <div className="inline-flex h-11 justify-between items-center gap-96">
+      <div className="text-neutral-100 text-3xl font-semibold font-['Poppins'] leading-10">
+        My Events
+      </div>
+      <div className="justify-start items-start inline-flex">
+        <button
+          className="py-1 rounded-full justify-center items-center gap-2 flex"
+          onClick={onPressCreateEvent}
+        >
+          <div className="w-4 h-4 p-0.5 justify-center items-center flex">
+            <div className="w-3 h-3 relative">
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M7 0.843185C7.27614 0.843185 7.5 1.06704 7.5 1.34318L7.5 12.6569C7.5 12.933 7.27614 13.1569 7 13.1569C6.72386 13.1569 6.5 12.933 6.5 12.6569L6.5 1.34318C6.5 1.06704 6.72386 0.843185 7 0.843185Z"
+                  fill="#A579FF"
+                  stroke="#A579FF"
+                  strokeLinecap="round"
+                />
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M13.1562 6.99997C13.1562 6.72383 12.9323 6.49997 12.6562 6.49997L1.34247 6.49997C1.06632 6.49997 0.842466 6.72383 0.842467 6.99997C0.842466 7.27611 1.06632 7.49997 1.34247 7.49997L12.6562 7.49997C12.9323 7.49997 13.1562 7.27611 13.1562 6.99997Z"
+                  fill="#A579FF"
+                  stroke="#A579FF"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </div>
+          </div>
+          <div className="text-center text-violet-400 text-base font-semibold font-['Poppins'] leading-normal">
+            Create Event
+          </div>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default EventsHeader;

app/components/Footer.tsx

@@ -5,13 +5,13 @@ const Footer = () => {
   return (
     <div className="flex bg-bondscape-background-primary px-xMobile md:px-xMd lg:px-xLg xl:px-xXl py-yMobile lg:py-[30px]">
       <div className="flex flex-1 flex-col lg:flex-row lg:items-center">
-        <span className="text-bondscape-text_neutral_600 text-[14px] font-light leading-none pb-2 lg:pb-0 lg:pr-[40px]">
+        <span className="text-[#8F8F8F] text-[14px] font-light leading-none pb-2 lg:pb-0 lg:pr-[40px]">
           Copyright © Desmos Labs {new Date().getFullYear()}
         </span>
         <div className="flex flex-row lg:flex-1 justify-between items-center">
           <div className="flex flex-row text-[14px] font-light">
             <Link
-              className="text-bondscape-text_neutral_400 leading-tight hover:text-bondscape-hover hover:underline transition-colors ease-in-out duration-300 cursor-pointer"
+              className="text-[#CDCDCD] leading-tight hover:text-[#8F8F8F] hover:underline transition-colors ease-in-out duration-300 cursor-pointer"
               href={"/terms"}
             >
               Terms of Service
@@ -20,7 +20,7 @@ const Footer = () => {
               |
             </span>
             <Link
-              className="text-bondscape-text_neutral_400 leading-tight hover:text-bondscape-hover hover:underline transition-colors ease-in-out duration-300 cursor-pointer"
+              className="text-[#CDCDCD] leading-tight hover:text-[#8F8F8F] hover:underline transition-colors ease-in-out duration-300 cursor-pointer"
               href={"/privacy"}
             >
               Privacy Policy
@@ -33,7 +33,7 @@ const Footer = () => {
               height="28"
               viewBox="0 0 28 28"
               fill="none"
-              className="fill-bondscape-text_neutral_500 hover:fill-bondscape-hover transition-colors ease-in-out duration-300 cursor-pointer"
+              className="fill-[#B3B3B3] hover:fill-[#E8E8E8] transition-colors ease-in-out duration-300 cursor-pointer"
             >
               <g clipPath="url(#clip0_457_125)">
                 <path

app/components/NavigationBar.tsx

@@ -8,45 +8,67 @@ import useUser from "@/hooks/user/useUser";
 import SelectComponent from "@/components/SelectComponent";
 import { AnimatePresence, motion } from "framer-motion";
 
-const NavigationBar = () => {
+const NavigationBar = ({
+  disableNavbarBgInDesktop,
+  forceNavbarBgVisible,
+}: {
+  forceNavbarBgVisible?: boolean;
+  disableNavbarBgInDesktop?: boolean;
+}) => {
   const [navbarBgVisible, setNavbarBgVisible] = useState(false);
   // Hooks
-  const [isMobile, isMd, isBreakpointReady] = useBreakpoints();
+  const [isMobile, isMd, isLg, isXl, isDesktop, isBreakpointReady] =
+    useBreakpoints();
   const pathname = usePathname();
   const { user } = useUser();
   const handleScroll = useCallback(() => {
-    const currentScrollPos = window.scrollY;
-    if (currentScrollPos >= 20 && (isMobile || isMd)) {
+    if (window.scrollY >= 60 && (isMobile || isMd)) {
       setNavbarBgVisible(true);
+    } else if (window.scrollY >= 80 && isDesktop && !disableNavbarBgInDesktop) {
+      setNavbarBgVisible(true);
+    } else if (window.scrollY > 0 && forceNavbarBgVisible) {
+      setNavbarBgVisible(true);
+    } else {
+      setNavbarBgVisible(false);
     }
-  }, [isMd, isMobile]);
+  }, [
+    disableNavbarBgInDesktop,
+    forceNavbarBgVisible,
+    isDesktop,
+    isMd,
+    isMobile,
+  ]);
 
   useEffect(() => {
-    handleScroll();
+    window.addEventListener("scroll", handleScroll);
   }, [handleScroll, isBreakpointReady]);
 
   const RightButton = useMemo(() => {
-    if (!user) {
+    if (
+      pathname === "/creator/login" ||
+      pathname === "/creator/privacy" ||
+      pathname === "/creator/terms"
+    ) {
       return;
     }
-    return (
-      pathname !== "/creator/login" &&
-      (user.profile ? (
-        <SelectComponent profile={user.profile} />
-      ) : (
-        <Link href={"/creator/login"}>
-          <div className="text-white font-semibold">
-            <button>Login</button>
-          </div>
-        </Link>
-      ))
+    if (!user || !isDesktop) {
+      return;
+    }
+    return user.profile ? (
+      <SelectComponent profile={user.profile} />
+    ) : (
+      <Link href={"/creator/login"}>
+        <div className="text-white font-semibold">
+          <button>Login</button>
+        </div>
+      </Link>
     );
-  }, [pathname, user]);
+  }, [isDesktop, pathname, user]);
 
   return (
     <nav
       className={`${
-        navbarBgVisible ? "bg-bondscape-background-primary" : "bg-transparent"
+        navbarBgVisible ? "backdrop-blur-lg" : "bg-transparent"
       } transition-colors ease-in-out sticky flex justify-between items-center w-full h-navbar-mobile md:h-navbar-md lg:h-navbar-lg xl:h-navbar-xl px-xMobile md:px-xMd lg:px-xLg xl:px-xXl`}
     >
       <Link href="/">

app/components/SelectComponent.tsx

@@ -34,10 +34,11 @@ export default function SelectComponent({
             alt={"Profile picture"}
             src={profile.profilePicture || "/defaultProfilePicture.png"}
             fill
+            sizes={"(max-width: 1920px) 10vw"}
             className="rounded-[20px] object-cover bg-bondscape-surface"
           />
         </div>
-        <div className="text-bondscape-text_neutral_100 hover:text-bondscape-text_neutral_400 transition ease-in-out text-[16px] font-normal leading-normal">
+        <div className="text-bondscape-text_neutral_900 hover:text-bondscape-text_neutral_700 transition ease-in-out text-[16px] font-normal leading-normal">
           {profile?.nickname || profile?.dTag}
         </div>
       </button>
@@ -61,7 +62,7 @@ export default function SelectComponent({
                 width={24}
                 height={24}
               />
-              <div className="text-bondscape-text_neutral_100 hover:text-bondscape-text_neutral_400 transition ease-in-out text-[16px] font-normal leading-normal">
+              <div className="text-bondscape-text_neutral_900 hover:text-bondscape-text_neutral_700 transition ease-in-out text-[16px] font-normal leading-normal">
                 My Events
               </div>
             </Link>
@@ -75,7 +76,7 @@ export default function SelectComponent({
                 width={24}
                 height={24}
               />
-              <div className="text-bondscape-text_neutral_100 hover:text-bondscape-text_neutral_400 transition ease-in-out text-[16px] font-normal leading-normal">
+              <div className="text-bondscape-text_neutral_900 hover:text-bondscape-text_neutral_700 transition ease-in-out text-[16px] font-normal leading-normal">
                 Logout
               </div>
             </button>

app/components/Tabs.tsx

@@ -0,0 +1,61 @@
+"use client";
+import React from "react";
+
+interface Props {
+  activeTab: number;
+  setActiveTab: React.Dispatch<React.SetStateAction<number>>;
+}
+
+const MyComponent = ({ activeTab, setActiveTab }: Props) => {
+  return (
+    <div className="w-64 h-11 py-2 justify-start items-start gap-12 inline-flex">
+      <button
+        className="flex-col justify-start items-center gap-1 inline-flex"
+        onClick={() => setActiveTab(0)}
+      >
+        <div
+          className={` ${
+            activeTab === 0 ? "text-neutral-100" : "text-bondscape-inactiveTab"
+          } self-stretch text-center text-base font-semibold leading-normal`}
+        >
+          Upcoming
+        </div>
+        {activeTab === 0 && (
+          <div className="self-stretch h-0.5 bg-neutral-100 rounded" />
+        )}
+      </button>
+      <button
+        className="flex-col justify-start items-center gap-1 inline-flex"
+        onClick={() => setActiveTab(1)}
+      >
+        <div
+          className={` ${
+            activeTab === 1 ? "text-neutral-100" : "text-bondscape-inactiveTab"
+          } self-stretch text-center text-base font-semibold leading-normal`}
+        >
+          Past
+        </div>
+        {activeTab === 1 && (
+          <div className="self-stretch h-0.5 bg-neutral-100 rounded" />
+        )}
+      </button>
+      <button
+        className="flex-col justify-start items-center gap-1 inline-flex"
+        onClick={() => setActiveTab(2)}
+      >
+        <div
+          className={` ${
+            activeTab === 2 ? "text-neutral-100" : "text-bondscape-inactiveTab"
+          } self-stretch text-center text-base font-semibold leading-normal`}
+        >
+          Drafts
+        </div>
+        {activeTab === 2 && (
+          <div className="self-stretch h-0.5 bg-neutral-100 rounded" />
+        )}
+      </button>
+    </div>
+  );
+};
+
+export default MyComponent;