feat: ui updates, add getter for bounty and bountyCount

ETHPrague-BRX · Jun 1, 2024 · 3055f3c · 3055f3c
1 parent 02abbd6
commit 3055f3c
Show file tree

Hide file tree

Showing 13 changed files with 607 additions and 19 deletions.
diff --git a/packages/nextjs/app/_components/Bounty/Bounty.tsx b/packages/nextjs/app/_components/Bounty/Bounty.tsx
@@ -17,7 +17,7 @@ const Bounty: React.FC<BountyProps> = ({ title, description, creator, reward, du
     >
       <div>
         <h3 className="text-xl">{title}</h3>
-        <p className="text-md text-slate-300">by {creator}</p>
+        <p className="text-md text-slate-300 line-clamp-1 text-ellipsis">{creator}</p>
         <p className="text-sm h-[100px] line-clamp-4 text-slate-400">{description}</p>
       </div>
       <div className="flex flex-col gap-1 mb-4">

diff --git a/packages/nextjs/app/_components/BountyCreator/BountyCreator.tsx b/packages/nextjs/app/_components/BountyCreator/BountyCreator.tsx
@@ -21,7 +21,9 @@ const BountyCreator = () => {
         {openCreator && (
           <motion.div>
             <Backdrop onClick={() => setOpenCreator(false)}>
-              <div>Hello</div>
+              <div
+                className={`flex flex-col gap-2 bg-slate-800 p-10 w-[100%] minh-[400px] rounded justify-between`}
+              ></div>
             </Backdrop>
           </motion.div>
         )}

diff --git a/packages/nextjs/app/_components/BountyList/BountyList.tsx b/packages/nextjs/app/_components/BountyList/BountyList.tsx
@@ -3,17 +3,22 @@ import Backdrop from "../Backdrop/Backdrop";
 import Bounty, { BountyProps } from "../Bounty/Bounty";
 import BountyInfo from "../BountyInfo";
 import { AnimatePresence, motion } from "framer-motion";
+import useBounties from "~~/hooks/useBounties";
 
 type BountyListProps = {
   bounties: BountyProps[];
 };
 
-const BountyList: React.FC<BountyListProps> = ({ bounties }) => {
+const BountyList: React.FC<BountyListProps> = () => {
   const [selectedId, setSelectedId] = useState<number | null>(null);
 
+  const { bounties, bountyCount } = useBounties();
+
+  console.log(bounties);
+
   return (
-    <div className="p-8">
-      <h2 className="text-3xl mb-8">Current bounties</h2>
+    <div className="p-8 w-[100%]">
+      <p className="text-left ml-0">{parseInt(bountyCount)} bounties found</p>
       <div className="flex gap-4 flex-wrap items-center justify-between">
         {bounties.map((bounty, i) => {
           return (

diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx
@@ -12,10 +12,15 @@ export const metadata = getMetadata({
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   return (
     <html suppressHydrationWarning lang="en">
-      <body>
-        <ThemeProvider enableSystem>
-          <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
-        </ThemeProvider>
+      <body className="w-[100vw] overflow-hidden">
+        <video className="fixed absolute z-0 top-[0px] left-0 scale-150 overflow-hidden" autoPlay muted loop>
+          <source src="/animation.mp4" type="video/mp4"></source>
+        </video>
+        <div className="bg-[#000000a3]">
+          <ThemeProvider enableSystem>
+            <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
+          </ThemeProvider>
+        </div>
       </body>
     </html>
   );

diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -1,19 +1,33 @@
 "use client";
 
+import { useEffect, useRef } from "react";
 import BountyCreator from "./_components/BountyCreator";
 import BountyList from "./_components/BountyList";
 import data from "./_components/BountyList/data.json";
 import type { NextPage } from "next";
 
 const Home: NextPage = () => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      // document.querySelector("video").defaultPlaybackRate = 0.5;
+      // document.querySelector("video").playbackRate = 0.5;
+      // videoRef?.current?.setAttribute("defaultPlaybackRate", "0.5");
+    }
+  }, []);
   return (
     <>
-      <div className="flex items-center flex-col flex-grow pt-10 bg-gradient-to-tr from-[#7e5dc8] to-[#84b9ee]">
-        <h1 className="text-5xl">Think 2 Earn</h1>
-        <h2 className="text-xl">Empowering humans to earn by helping ML models decypher visuals using BCI datasets.</h2>
-        <p></p>
-        <BountyCreator />
-        <BountyList bounties={data} />
+      <div className="w-[100vw] h-[100vh] overflow-x-hidden bg-[#00000033]">
+        <div className="z-2 flex items-center flex-col flex-grow pt-10">
+          <h1 className="text-5xl drop-shadow-xl">Think 2 Earn</h1>
+          <h2 className="text-xl drop-shadow-md">
+            Empowering humans to earn by helping ML models decypher visuals using BCI datasets.
+          </h2>
+          <p></p>
+          <BountyCreator />
+          <BountyList bounties={data} />
+        </div>
       </div>
     </>
   );

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -54,7 +54,7 @@ export const Header = () => {
   );
 
   return (
-    <div className="sticky lg:static top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 shadow-md shadow-secondary px-0 sm:px-2">
+    <div className="sticky lg:static top-0 navbar min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2 bg-gradient-to-b from-[#00000055] to-[#00000033]">
       <div className="navbar-start w-auto lg:w-1/2">
         <div className="lg:hidden dropdown" ref={burgerMenuRef}>
           <label
@@ -79,8 +79,8 @@ export const Header = () => {
           )}
         </div>
         <Link href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
-          <div className="flex relative w-10 h-10">
-            <Image alt="SE2 logo" className="cursor-pointer" fill src="/logo.svg" />
+          <div className="flex relative w-10 h-10 rounded">
+            <Image alt="SE2 logo" className="cursor-pointer rounded" fill src="/favicon.jpg" />
           </div>
           <div className="flex flex-col">
             <span className="font-bold leading-tight">Think-2-Earn</span>