Hackathon 2.0

archive/pages/hackrplay/2022/registration/index.js

@@ -69,7 +69,7 @@ export default function Registration() {
 						? `:${process.env.NEXT_PUBLIC_DEV_PORT}`
 						: '';
 					const external_path = NHOST.AUTH_URL(
-						`${protocol}://${host}${port}/hackrplay/2022/registration`
+						`${protocol}://${host}${port}/event/22/hackrplay/registration`
 					);
 					window.location = external_path;
 				}

components/Hack-R-Play/IdeaFilter.js

@@ -12,6 +12,7 @@ export default function IdeaFilters({
   isAuthenticated,
 }) {
   const [filter, setFilter] = useState({});
+  const [completedActive, setCompletedActive] = useState(false);
 
   useEffect(() => {}, [total]);
 
@@ -27,21 +28,37 @@ export default function IdeaFilters({
 
   const onPageChanged = (index) => {
     const fl = resetFilter();
+
+    if (completedActive) {
+      fl.status_filter = "completed";
+    }
+
     fl.page = index;
+
     setFilter({ ...fl });
     invokeChange(fl);
   };
 
   const onOwnerChanged = (owner) => {
     const fl = resetFilter();
 
-    fl.owner = owner;
-    setFilter({ ...fl });
-    invokeChange(fl);
+    if (owner === "completed") {
+      setCompletedActive(true);
+      fl.status_filter = owner;
+      setFilter({ ...fl });
+      invokeChange(fl);
+    } else {
+      fl.owner = owner;
+      setFilter({ ...fl });
+      invokeChange(fl);
+    }
   };
 
   const onSortChanged = (button) => {
     const fl = resetFilter();
+    if (completedActive) {
+      fl.status_filter = "completed";
+    }
     fl.sort_col = button.field;
     fl.sort_asc = button.asc;
     setFilter({ ...fl });
@@ -72,10 +89,10 @@ export default function IdeaFilters({
         </div>
       ) : null}
       <div className="flex-1 hidden md:block">
-        <StatusFilter
+        {/* <StatusFilter
           onChange={(r) => onStatusFilterChanged(r)}
           selected={filter.status_filter}
-        ></StatusFilter>
+        ></StatusFilter> */}
       </div>
       <div className="flex border-b-2 ">
         <Pagination

components/Header.js

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { AiOutlineMenu, AiOutlineClose } from "react-icons/ai";
 import { PrimaryButton } from "./Buttons";
 import Image from "next/image";
-
+import { useUserData } from "@nhost/nextjs";
 import { useRouter } from "next/router";
 
 const MobileHeader = ({ links, setMobileActive, redirectToRegistration }) => {
@@ -40,24 +40,44 @@ const Header = ({ links, metainfo, secondary = false }) => {
   const [mobileActive, setMobileActive] = useState(false);
   const router = useRouter();
   const redirectToRegistration = () => {
-    router.push("/hackrplay/2022/registration");
+    router.push("events/22/hackrplay/registration");
   };
 
+  const userData = useUserData();
+
   return (
     <>
       {secondary ? (
-        <header className="pt-4 pb-2 md:px-10 px-5 inline-flex justify-between items-center bg-transparent font-primary text-white z-10 w-full">
+        <header className="pt-8 pb-2 md:px-10 px-5 inline-flex justify-between items-center bg-transparent font-primary text-white z-10 w-full">
           <div className="md:w-40 w-36 z-10">
             <Link href={`/`}>
               <a>
                 <Image
-                  src={require(`/public/${metainfo.name}/NavbarLogo.png`)}
+                  src={require(`/public/${metainfo.name}/BannerLogo.svg`)}
                   alt="Navbar Logo"
                   layout="responsive"
                 />
               </a>
             </Link>
           </div>
+
+          {userData && (
+            <div className="md:w-80 w-48 z-10 flex gap-4 items-center justify-end break-all">
+              <Image
+                className="rounded-full"
+                height={40}
+                width={40}
+                layout={"fixed"}
+                src={userData?.avatarUrl}
+                alt={"user avatar"}
+                aria-label="user avatar"
+              />
+              <div>
+                <h4 className="text-[#00f2fe]">{userData?.displayName}</h4>
+                <p>{userData?.email}</p>
+              </div>
+            </div>
+          )}
         </header>
       ) : (
         <header className="pt-6 pb-1 px-4 flex md:justify-center justify-end items-baseline bg-transparent font-primary text-white z-10">

components/Layout.js

@@ -77,7 +77,16 @@ const Layout = ({ children, title, description, metainfo }) => {
           <main>{children}</main>
           <Footer />
         </div>
-      ) : null}
+      ) : (
+        <>
+          <div className="h-[90vh] flex justify-center items-center p-[40px]">
+            <div
+              className="w-24 h-24 rounded-full animate-spin
+border-y border-solid border-1 border-blue-500 border-t-transparent shadow-md"
+            ></div>
+          </div>
+        </>
+      )}
     </>
   );
 };

components/LayoutWrapper.js

@@ -15,9 +15,9 @@ const links = [
 	},
 ];
 
-export default function LayoutWrapper({ title, description, children}) {
+export default function LayoutWrapper({ title, description, children, metainfo}) {
 	return (
-		<Layout links={links} title={title} description={description}>
+		<Layout links={links} title={title} description={description} metainfo={metainfo}>
 			<div className='absolute left-9 -top-10 opacity-50'>
 				<Image
 					src={DottedAndFilledTriangle}

components/OwnerFilter.js

@@ -31,6 +31,13 @@ export default function OwnerFilter({ onChange, selected }) {
       >
         My Ideas
       </ToolBarButton>
+      {/* <ToolBarButton
+        handleOnClick={() => onButtonClicked("completed")}
+        // disabled={selected === "me"}
+        cclas={selectedButton === "completed" ? `text-brand-hightlight` : ""}
+      >
+        Completed
+      </ToolBarButton> */}
     </div>
   );
 }

components/common/FormatDesc.js

@@ -0,0 +1,20 @@
+import ReactHtmlParser from "react-html-parser";
+import { stripHtml } from "string-strip-html";
+
+export function cleanHTMLInput(htmlInput) {
+  // Remove HTML tags and special characters
+  const strippedString = stripHtml(htmlInput).result;
+
+  // Convert HTML entities to plain text
+  const plainText = ReactHtmlParser(strippedString).join("");
+
+  // Remove newlines and extra spaces
+  const cleanedString = plainText
+    .replace(/\n/g, "")
+    .replace(/\s+/g, " ")
+    .replace(/"/g, "'")
+    .trim();
+  console.log(cleanedString);
+
+  return cleanedString;
+}

components/common/Hero.js

@@ -62,13 +62,13 @@ const Hero = ({ metainfo }) => {
           </div>
 
           <div className="flex flex-col justify-center items-center mx-auto md:pt-16 pt-8 md:max-w-3xl z-10">
-            <div className="scale-110">
+            <div className="scale-110 mb-4">
               <Image src={ReactPlayLogo} alt="ReactPlay Logo" layout="fixed" />
             </div>
 
             <div className="-mt-3 block md:w-1/2 md:h-1/2 w-11/12 h-11/12">
               <Image
-                src={require(`/public/${metainfo.name}/BannerLogo.png`)}
+                src={require(`/public/${metainfo.name}/BannerLogo.svg`)}
                 alt="Banner Logo"
                 layout="responsive"
               />

components/common/Judges.js

@@ -9,7 +9,7 @@ const Judges = ({ metainfo }) => {
   return (
     <section
       id="judges"
-      className={`relative mt-16 bg-brand-primary-highlight bg-opacity-10 flex flex-col justify-center items-center py-24 px-6`}
+      className={`relative bg-brand-primary-highlight bg-opacity-10 flex flex-col justify-center items-center py-24 px-6`}
     >
       <div className="absolute md:-left-16 md:top-6 -left-20 top-3">
         <Image

components/common/Partners.js

@@ -32,7 +32,7 @@ const Partners = ({ metainfo }) => {
                   <div className="md:w-2/5 md:h-2/5 w-1/2 h-1/2">
                     <a href={`${p.link}`} target="_blank" rel="noreferrer">
                       <Image
-                        src={require(`/public/${metainfo.name}/partner0.png`)}
+                        src={require(`/public/${metainfo.name}/bugfender-logo.png`)}
                         alt={`${p.display} logo`}
                         layout="responsive"
                       />

components/common/Prizes.js

@@ -0,0 +1,34 @@
+import React from "react";
+
+const Prizes = ({ metainfo }) => {
+  let prizeList = metainfo?.prizes;
+
+  return (
+    <section
+      id="cta"
+      className="relative bg-brand-highlight mt-16 flex flex-col  py-24 md:px-28 px-5 justify-center items-center overflow-clip "
+    >
+      <div className="container flex flex-col justify-center items-center gap-4 mx-auto max-w-screen-xl">
+        <h1 className="text-[#010326] font-primary text-5xl tracking-wider relative before:content[''] before:absolute before:w-1/4 before:h-1 before:-bottom-2 before:border-b-[3px] before:rounded-sm before:left-28 before:border-[#010326]">
+          Prizes and Rewards
+        </h1>
+        <div className="flex md:flex-row flex-col justify-center items-center md:mx-auto md:gap-12 gap-8 mt-16 flex-wrap justify-around md:w-auto w-[100%]">
+          {prizeList
+            ? prizeList.map((item, i) => (
+                <div
+                  key={i}
+                  className="text-black bg-[#010326] !text-white p-6 py-10 rounded-xl text-center md:w-[27%] w-[80%]"
+                >
+                  <p className="text-[50px]">{item?.icon}</p>
+                  <h4 className="py-2 font-bold text-xl"> {item.position}</h4>
+                  <p className="py-2 text-md">{item.prize}</p>
+                </div>
+              ))
+            : "No prizes"}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Prizes;