Merge branch 'cesium:main' into fixed/back_button

.env.local.sample

@@ -1,2 +1,4 @@
-NEXT_PUBLIC_API_URL=https://sei23-staging.herokuapp.com
+NEXT_PUBLIC_API_URL=http://locahost:4000
+NEXT_PUBLIC_WS_URL=ws://localhost:4000/socket
 NEXT_PUBLIC_QRCODE_HOST=seium.org
+NEXT_PUBLIC_BACKOFFICE_FEATURE_FLAG=true

README.md

@@ -38,7 +38,7 @@ documentation](https://nextjs.org/docs/deployment) for more details.
 <img src=".github/brand/cesium-DARK.svg#gh-light-mode-only" width="300">
 <img src=".github/brand/cesium-LIGHT.svg#gh-dark-mode-only" width="300">
 
-Copyright (c) 2023, CeSIUM.
+Copyright (c) 2024, CeSIUM.
 
 This project is licensed under the MIT License - see the [LICENSE][license]
 file for details.

components/Badge/index.tsx

@@ -1,56 +1,73 @@
 import Link from "next/link";
-import { ReactEventHandler, useState } from "react";
+import { AllHTMLAttributes, memo, useState } from "react";
 
-interface BadgeProps {
+interface BadgeProps
+  extends Omit<AllHTMLAttributes<HTMLDivElement>, "id" | "name" | "type"> {
   name: string;
   id: string | number;
   avatar: string;
   tokens: string | number;
   owned: boolean;
+  disableLink?: boolean;
+  disableOwnedHighlight?: boolean;
 }
 
-export default function Badge({ name, id, avatar, tokens, owned }: BadgeProps) {
+const Badge: React.FC<BadgeProps> = ({
+  name,
+  id,
+  avatar,
+  tokens,
+  owned,
+  disableLink = false,
+  disableOwnedHighlight = false,
+  ...rest
+}) => {
   const [badgeLoaded, setBadgeLoaded] = useState(false);
-  const [fallbackRan, setFallbackRan] = useState(false);
+  const [badge404, setBadge404] = useState(false);
 
-  const imageOnError: ReactEventHandler<HTMLImageElement> = (e) => {
-    // prevent infinite loop fallback
-    if (fallbackRan) {
-      setBadgeLoaded(true);
-      return;
-    }
-
-    setBadgeLoaded(false);
-    e.currentTarget.src = "/images/badges/badge-not-found.svg";
-    setFallbackRan(true);
-  };
+  const highlightBadge = owned || disableOwnedHighlight || !badgeLoaded;
 
   return (
-    <Link
-      href={`/badge/${id}`}
-      className={`h-full w-full ${owned ? "opacity-100" : "opacity-30"}`}
+    <div
+      className={`h-full w-full ${
+        highlightBadge ? "opacity-100" : "opacity-30"
+      }`}
+      id={id.toString()}
+      {...rest}
     >
-      <div className="flex aspect-square w-full select-none items-center justify-center">
-        {!badgeLoaded && <BadgeSkeleton />}
-
-        <img
-          src={avatar}
-          alt={name}
-          onLoad={() => setBadgeLoaded(true)}
-          onError={imageOnError}
-        />
-      </div>
-
-      <div className="flex flex-col justify-items-center text-center font-iregular">
-        <div>{name}</div>
-        <div>{tokens} 💰 </div>
-      </div>
-    </Link>
+      <Link href={disableLink ? "" : `/badge/${id}`}>
+        <div className="flex aspect-square w-full select-none items-center justify-center">
+          {!badgeLoaded && <BadgeSkeleton />}
+
+          {badge404 && (
+            <img src={"/images/badges/badge-not-found.svg"} alt={name} />
+          )}
+
+          <img
+            src={avatar}
+            alt={name}
+            onLoad={() => setBadgeLoaded(true)}
+            onError={() => {
+              setBadge404(true);
+              setBadgeLoaded(true);
+            }}
+            hidden={!badgeLoaded || badge404}
+          />
+        </div>
+
+        <div className="flex flex-col justify-items-center text-center font-iregular">
+          <div>{name}</div>
+          <div>{tokens} 💰 </div>
+        </div>
+      </Link>
+    </div>
   );
-}
+};
+
+export default memo(Badge);
 
 const BadgeSkeleton = () => {
   return (
-    <div className="aspect-square w-10/12 animate-pulse rounded-full bg-gray-500 opacity-10" />
+    <div className="aspect-square w-10/12 animate-pulse rounded-full bg-gray-500 opacity-5" />
   );
 };

components/Checkbox/index.tsx

@@ -0,0 +1,18 @@
+export default function Checkbox({ onChange, selected, children }) {
+  return (
+    <div>
+      <label className="rounded-sm bg-quinary">
+        <input className="hidden" type="checkbox" onChange={onChange}></input>
+        <span
+          className={`text-sm text-white ${
+            selected ? "bg-quinary" : "bg-white"
+          } select-none border-2 border-quinary px-1 font-ibold`}
+        >
+          {" "}
+          &#10003;
+        </span>
+      </label>
+      <label className="text-md ml-2 select-none text-white">{children}</label>
+    </div>
+  );
+}

components/Dashboard/index.jsx

@@ -7,7 +7,7 @@ import { Dialog, Transition } from "@headlessui/react";
 
 import Return from "/components/Return";
 
-const navigation = ["dashboard", "spotlight"];
+const navigation = ["dashboard", "spotlights"];
 
 export default function Dashboard(props) {
   const [sidebarOpen, setSidebarOpen] = useState(false);

components/FeatureFlags/BackOfficeWrapper.tsx

@@ -0,0 +1,13 @@
+type BackOfficeWrapperProps = {
+  children: React.ReactNode;
+};
+
+export default function BackOfficeWrapper({
+  children,
+}: BackOfficeWrapperProps) {
+  if (process.env.NEXT_PUBLIC_BACKOFFICE_FEATURE_FLAG === "true") {
+    return <>{children}</>;
+  }
+
+  return null;
+}

components/Footer/index.tsx

@@ -118,26 +118,26 @@ export default function Footer(props: IFooterProps) {
         <div className="flex-2">
           <div className="grid select-none grid-rows-2 justify-items-center gap-8 whitespace-nowrap font-iregular text-sm text-white lg:grid-cols-2 lg:justify-items-start">
             <Link
-              href="https://2022.seium.org/"
+              href="https://2023.seium.org/"
               className="text-white hover:underline"
             >
               Previous Edition
             </Link>
             <Link
-              href="https://docs.google.com/forms/d/e/1FAIpQLSdV1bSyW2tcLuTC_jJCGdZ5NZHUlgETK7nQkOmyDzwb7eFS4Q/viewform"
+              href="https://forms.gle/AmWefKeDN3XNtVh57"
               className="hover:underline"
             >
               Report a Problem
             </Link>
             <Link href="/docs/survival.pdf" className="hover:underline">
               Survival Guide
             </Link>
-            <Link href="/docs/regulamento.pdf" className="hover:underline">
+            <Link href="/docs/regulation.pdf" className="hover:underline">
               General Regulation
             </Link>
           </div>
           <div className="flex justify-center lg:justify-end">
-            <div className="mt-10 text-white sm:w-1/2 lg:mt-0">
+            <div className="mt-10 text-white lg:mt-0">
               <Social />
             </div>
           </div>

components/JoinUs/index.jsx

@@ -1,10 +1,11 @@
-export default function JoinUs(props) {
+export default function JoinUs() {
   return (
     <a
-      href="https://sei23.eventbrite.pt"
-      className={`flex h-28 w-28 flex-shrink-0 rotate-15 transform items-center justify-center font-ibold text-xl text-${props.fgColor} bg-${props.button} translate-x-0 select-none rounded-full`}
+      href="https://sei24.eventbrite.pt"
+      target="_blank"
+      className="before:ease font-terminal-uppercase relative flex h-10 w-28 flex-wrap content-center justify-center overflow-hidden rounded-full border-2 border-white bg-quinary text-white transition-transform before:absolute before:left-0 before:-ml-2 before:h-48 before:w-48 before:origin-top-right before:-translate-x-full before:translate-y-12 before:-rotate-90 before:bg-quinary before:transition-all before:duration-300 hover:scale-105 hover:text-white hover:before:-rotate-180 lg:bg-transparent"
     >
-      Join us 👋
+      <span className="relative z-10">Join Us</span>
     </a>
   );
 }