fix(header / page): add redirects to button hrefs

waldo-vision · Mar 18, 2024 · 92cdb2b · 92cdb2b
1 parent 78022a3
commit 92cdb2b
Show file tree

Hide file tree

Showing 17 changed files with 930 additions and 587 deletions.
diff --git a/apps/app/app/components/Header.tsx b/apps/app/app/components/Header.tsx
@@ -14,7 +14,7 @@ export default function Header() {
 
   return (
     <>
-      <div className="  text-gray-500 min-w-max items-center gap-2 w-[100%] z-100">
+      <div className="  text-gray-400 min-w-max items-center gap-2 w-[100%] z-100">
         <div className="flex m-8 mx-12">
           <div className="font-semibold text-md gap-3 items-center flex flex-row">
             <h1>Hey,</h1>

diff --git a/apps/app/app/components/Sidebar.tsx b/apps/app/app/components/Sidebar.tsx
@@ -1,53 +1,12 @@
 'use client';
-import { HomeIcon, InboxIcon } from '@heroicons/react/24/solid';
-import * as React from 'react';
+import { GlobeAltIcon, HomeIcon, InboxIcon } from '@heroicons/react/24/solid';
+import React from 'react';
 
 import { Button, Input } from 'ui';
 import { usePathname, useRouter } from 'next/navigation';
 import { useSession } from '@contexts/SessionContext';
-const data = [
-  {
-    goal: 400,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 278,
-  },
-  {
-    goal: 189,
-  },
-  {
-    goal: 239,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 278,
-  },
-  {
-    goal: 189,
-  },
-  {
-    goal: 349,
-  },
-];
 
-export default function Sidebar() {
+const Sidebar = () => {
   const pathname = usePathname();
   const router = useRouter();
   const s = useSession();
@@ -60,7 +19,7 @@ export default function Sidebar() {
         <div className="mt-12 flex flex-col gap-7">
           {/* Icon Container */}
           <div className="items-center flex flex-row gap-5">
-            <div className="py-2 px-[1px] bg-yellow-500 absolute rounded-md"></div>
+            <div className="py-2 px-[1px] bg-[#6F1DD8] absolute rounded-md"></div>
 
             <div className="px-2 py-2 bg-gray-900 rounded-2xl">
               <img
@@ -112,7 +71,11 @@ export default function Sidebar() {
       </div>
     </>
   );
-}
+};
+
+export default Sidebar;
+
+Sidebar.displayName = 'Sidebar';
 
 interface NavItem {
   icon: React.ReactNode;
@@ -131,4 +94,9 @@ const NAV_ITEMS: NavItem[] = [
     name: 'Inbox',
     href: '/d/inbox',
   },
+  {
+    icon: <GlobeAltIcon color="white" />,
+    name: 'Waldo Hub',
+    href: '/d/w_hub',
+  },
 ];
diff --git a/apps/app/app/globals.css b/apps/app/app/globals.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Mona+Sans&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
 
 @tailwind base;
 @tailwind components;

diff --git a/apps/app/app/layout.tsx b/apps/app/app/layout.tsx
@@ -1,22 +1,26 @@
-import React from 'react';
 import './globals.css';
+import React from 'react';
 import Header from './components/Header';
 import Sidebar from './components/Sidebar';
 import { SessionProvider } from '@contexts/SessionContext';
 function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html>
-      <body className="bg-white flex flex-row">
-        <SessionProvider>
-          <Sidebar />
-          <div className="flex flex-col">
+      <SessionProvider>
+        <body>
+          <div className="bg-white flex flex-row">
             <div>
-              <Header />
+              <Sidebar />
+            </div>
+            <div className="flex flex-col">
+              <div>
+                <Header />
+              </div>
+              <div>{children}</div>
             </div>
-            <div>{children}</div>
           </div>
-        </SessionProvider>
-      </body>
+        </body>
+      </SessionProvider>
     </html>
   );
 }

diff --git a/apps/app/app/page.tsx b/apps/app/app/page.tsx
@@ -6,10 +6,8 @@ const Page = () => {
   // console.log(data);
 
   return (
-    <div className="flex max-h-screen text-gray-700">
-      <div className="ml-12 text-2xl font-bold">
-        Welcome to the Waldo Platform
-      </div>
+    <div className="flex max-h-screen text-black">
+      <div className="ml-12 text-2xl font-bold">Waldo Dashboard</div>
     </div>
   );
 };

diff --git a/apps/app/contexts/SessionContext.tsx b/apps/app/contexts/SessionContext.tsx
@@ -1,13 +1,13 @@
 // context/SessionContext.tsx
 'use client';
-import {
+import React, {
   createContext,
   useContext,
   useState,
   useEffect,
   ReactNode,
 } from 'react';
-import { V2Session, getUserData } from 'identity';
+import { V2Session, createSession } from 'identity';
 
 interface SessionContextType {
   session: V2Session | undefined;
@@ -30,7 +30,7 @@ export const SessionProvider = ({ children }: { children: ReactNode }) => {
   useEffect(() => {
     const querySession = async () => {
       try {
-        const user = await getUserData();
+        const user = await createSession();
         setSessionState(user);
       } catch (error) {
         // Handle error

diff --git a/apps/app/package.json b/apps/app/package.json
@@ -12,59 +12,59 @@
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
-    "@emotion/react": "^11.11.3",
+    "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@fontsource/nunito": "^5.0.16",
+    "@fontsource/nunito": "^5.0.17",
     "@heroicons/react": "^2.1.1",
-    "@logto/express": "^2.2.0",
-    "@logto/next": "2.4.0",
-    "@marsidev/react-turnstile": "^0.4.0",
+    "@logto/express": "^2.3.1",
+    "@logto/next": "3.1.0",
+    "@marsidev/react-turnstile": "^0.5.3",
     "@next-auth/prisma-adapter": "^1.0.7",
-    "@sentry/integrations": "^7.92.0",
-    "@sentry/nextjs": "^7.92.0",
-    "@sentry/profiling-node": "^1.3.2",
-    "@tanstack/query-core": "^4.29.1",
-    "@tanstack/react-query": "^4.29.3",
-    "@trpc/client": "^10.21.1",
-    "@trpc/next": "^10.21.1",
-    "@trpc/react-query": "^10.21.1",
-    "@trpc/server": "^10.21.1",
-    "argon2": "^0.31.2",
-    "autoprefixer": "^10.4.14",
-    "axios": "^1.6.4",
+    "@sentry/integrations": "^7.107.0",
+    "@sentry/nextjs": "^7.107.0",
+    "@sentry/profiling-node": "^7.107.0",
+    "@tanstack/query-core": "^5.28.4",
+    "@tanstack/react-query": "^5.28.4",
+    "@trpc/client": "^10.45.2",
+    "@trpc/next": "^10.45.2",
+    "@trpc/react-query": "^10.45.2",
+    "@trpc/server": "^10.45.2",
+    "argon2": "^0.40.1",
+    "autoprefixer": "^10.4.18",
+    "axios": "^1.6.8",
     "database": "workspace:^",
-    "framer-motion": "^10.17.6",
+    "framer-motion": "^11.0.14",
     "identity": "workspace:*",
-    "jose": "^5.2.0",
-    "next": "^14.0.4",
-    "next-auth": "^4.24.5",
+    "jose": "^5.2.3",
+    "next": "^14.1.3",
+    "next-auth": "^4.24.7",
     "next-plausible": "^3.12.0",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.36",
     "postcss-100vh-fix": "^1.0.2",
-    "qs": "^6.11.2",
+    "qs": "^6.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.12.0",
-    "sharp": "^0.33.1",
+    "react-icons": "^5.0.1",
+    "sharp": "^0.33.2",
     "superjson": "^2.2.1",
     "tailwindconfig": "workspace:*",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^3.4.1",
     "trpc-openapi": "^1.2.0",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.2",
     "ui": "workspace:*",
     "validator": "^13.11.0",
     "ytdl-core": "^4.11.5",
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@types/node": "^20.10.6",
-    "@types/react": "^18.2.46",
-    "@types/react-dom": "^18.2.18",
-    "@types/validator": "^13.11.7",
+    "@types/node": "^20.11.28",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@types/validator": "^13.11.9",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-custom": "workspace:*",
-    "eslint-config-next": "^14.0.4",
+    "eslint-config-next": "^14.1.3",
     "identity": "workspace:*",
     "postcss": "^8.4.33",
     "tailwindcss": "^3.4.0",

diff --git a/apps/landing/app/globals.css b/apps/landing/app/globals.css
@@ -1,5 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Mona+Sans&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

diff --git a/apps/landing/app/page.tsx b/apps/landing/app/page.tsx
@@ -3,7 +3,9 @@ import { ArrowRightIcon } from '@heroicons/react/24/outline';
 import React from 'react';
 import { Button, RecArray, WaldoButton } from 'ui';
 import { CodeBracketSquareIcon } from '@heroicons/react/24/outline';
-const test = () => {
+import { useRouter } from 'next/navigation';
+const Page = () => {
+  const router = useRouter();
   return (
     <>
       <div className="flex flex-col max-h-screen h-screen bg-[#16182c] ">
@@ -29,13 +31,26 @@ const test = () => {
               sportsmanship are upheld in the world of competitive gaming.
             </h2>
             <div className="flex flex-col  mt-4">
-              <div className="flex flex-row items-center gap-4">
-                <WaldoButton className="text-sm text-white" size="md">
-                  Learn More
+              <div
+                className="flex flex-row items-center gap-4"
+                onClick={() => router.push('https://app.waldo.vision')}
+              >
+                <WaldoButton
+                  className="text-sm text-white font-semibold"
+                  size="md"
+                >
+                  <div className="flex flex-row gap-2">
+                    <h1>Go to Waldo Vision</h1>
+                    <ArrowRightIcon height={20} width={20} color="white" />
+                  </div>
                 </WaldoButton>
-                <div className="flex flex-row gap-2 cursor-pointer transition hover:bg-[#E545FF] hover:bg-opacity-[0.07] duration-300 ease-in-out p-4 hover:rounded-md">
+
+                <div
+                  className="flex flex-row gap-2 cursor-pointer transition hover:bg-[#E545FF] hover:bg-opacity-[0.07] duration-300 ease-in-out p-4 hover:rounded-md"
+                  onClick={() => router.push('https://hub.waldo.vision')}
+                >
                   <h1 className="text-white font-semibold text-sm">
-                    Go to the App
+                    Go to Waldo Hub
                   </h1>
                   <ArrowRightIcon height={20} width={20} color="white" />
                 </div>
@@ -75,7 +90,10 @@ const test = () => {
               sportsmanship are upheld in the world of competitive gaming.
             </h2>
             <div className="flex flex-col  mt-4">
-              <div className="flex flex-row items-center gap-4">
+              <div
+                className="flex flex-row items-center gap-4"
+                onClick={() => router.push('https://app.waldo.vision')}
+              >
                 <WaldoButton className="text-sm text-white" size="md">
                   Learn More
                 </WaldoButton>
@@ -102,4 +120,4 @@ const test = () => {
   );
 };
 
-export default test;
+export default Page;
diff --git a/apps/landing/components/Header.tsx b/apps/landing/components/Header.tsx
@@ -3,8 +3,9 @@ import Image from 'next/image';
 import React from 'react';
 import { WaldoButton } from 'ui';
 import { cn } from 'ui/lib/utils';
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 export const Header = () => {
+  const router = useRouter();
   const pathname = usePathname();
   return (
     <div className="min-w-max items-center gap-2 fixed w-[100%] z-[100] mt-3">
@@ -25,6 +26,7 @@ export const Header = () => {
           {NAV_ITEMS.map((item: NavItem, index: number) => {
             return (
               <h1
+                onClick={() => router.push(item.href)}
                 className={`text-white cursor-pointer ${
                   pathname.includes(item.href) ? 'font-bold' : 'font-regular'
                 }`}
@@ -72,9 +74,14 @@ const NAV_ITEMS: NavItem[] = [
     label: 'Account',
   },
   {
-    name: 'app',
-    href: 'https://app.waldo.vision/submissions',
-    label: 'App',
+    name: 'Waldo Vision',
+    href: 'https://app.waldo.vision/',
+    label: 'Waldo Vision',
+  },
+  {
+    name: 'Waldo Hub',
+    href: 'https://hub.waldo.vision/',
+    label: 'Hub',
   },
   {
     name: 'docs',

diff --git a/packages/identity/package.json b/packages/identity/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@logto/next": "2.4.0",
-    "@types/node": "^20.10.8"
+    "@types/node": "^20.10.8",
+    "database": "workspace:"
   }
 }
diff --git a/packages/identity/tsconfig.json b/packages/identity/tsconfig.json
@@ -2,5 +2,10 @@
   "extends": "tsconfig/base.json",
   "include": ["./"],
   "exclude": ["dist", "build", "node_modules"],
-  "compilerOptions": {}
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@server/*": ["../../apps/app/server/*"]
+    }
+  }
 }