update: homepage (auth and non-auth)

Technoculture · Sep 23, 2024 · d8015b8 · d8015b8
1 parent 7975477
commit d8015b8
Showing 1 changed file with 107 additions and 53 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -44,27 +44,37 @@ const footerAnimationStates = {
 };
 
 export default function Home() {
+  const { isSignedIn, orgId, orgSlug, userId } = useAuth();
+
+  return isSignedIn ? (
+    <AuthenticatedHome
+      isSignedIn={isSignedIn}
+      orgId={orgId as string}
+      orgSlug={orgSlug as string}
+      userId={userId as string}
+    />
+  ) : (
+    <UnAuthenticatedHome isSignedIn={isSignedIn as boolean} />
+  );
+}
+
+const AuthenticatedHome = ({
+  isSignedIn,
+  orgId,
+  orgSlug,
+  userId,
+}: {
+  isSignedIn: boolean;
+  orgId: string;
+  orgSlug: string;
+  userId: string;
+}) => {
   const [input, setInput] = useState("");
-  const router = useRouter();
-  const controls = useAnimation();
-  const [ref, inView] = useInView();
-  useEffect(() => {
-    if (inView) {
-      controls.start("visible");
-    } else {
-      controls.start("hidden");
-    }
-  }, [controls, inView]);
   const [chatType, setChattype] = useQueryState(
     "model",
     parseAsString.withDefault("chat"),
   );
-
-  const { isSignedIn, orgId, orgSlug, userId } = useAuth();
-  // if (isSignedIn) {
-  //   redirect("/dashboard/user");
-  // }
-
+  const router = useRouter();
   const handleInputChange = (e: any) => {
     setInput(e.target.value);
     navigator.clipboard.writeText(e.target.value);
@@ -88,6 +98,79 @@ export default function Home() {
     }
   };
 
+  return (
+    <div>
+      <div className="h-screen relative">
+        <Header className="bg-background/10 backdrop-blur-sm">
+          <Button
+            className="mr-4 h-[32px]"
+            variant="secondary"
+            asChild
+          ></Button>
+        </Header>
+        <div className="absolute inset-0 -z-5">
+          <Image
+            src="/isometric.png"
+            alt="image of echoes being used"
+            className="w-full h-full object-cover dark:mix-blend-soft-light opacity-30 brightness-125"
+            fill={true}
+            quality={5}
+          />
+        </div>
+
+        <div className="pt-[72px] z-10 flex flex-col items-center h-screen overflow-y-scroll scrollbar-hide">
+          <div className="flex flex-col items-center ">
+            <h1 className="text-4xl font-bold tracking-tight text-foreground">
+              Hello Innovator,
+            </h1>
+            <h1 className="text-2xl text-popover-foreground flex-wrap w-72 text-center">
+              Let's hyper-accelerate your research.
+            </h1>
+            <div className="grid md:grid-col-2 gap-4 sm:grid-col-1 p-4">
+              <div className="w-full md:min-w-[400px] lg:min-w-[600px] xl:min-w-[800px] ">
+                <InputBar
+                  isHome={true}
+                  value={input}
+                  onChange={handleInputChange}
+                  setInput={setInput}
+                  submitInput={handleSubmit}
+                  orgId={orgId as string}
+                  chattype={chatType as ChatType}
+                  setChattype={
+                    setChattype as Dispatch<SetStateAction<ChatType>>
+                  }
+                />
+                <div className="flex flex-col gap-y-4">
+                  <OrgChatToggler orgId={orgId} orgSlug={orgSlug} />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="md:max-w-[600px] lg:max-w-[800px] xl:max-w-[1080px] overflow-y-scroll scrollbar-hide">
+            <ChatCardWrapper
+              isHome={true}
+              org_id={orgId}
+              org_slug={orgSlug!}
+              uid={userId}
+              initialData={[]}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const UnAuthenticatedHome = ({ isSignedIn }: { isSignedIn: boolean }) => {
+  const controls = useAnimation();
+  const [ref, inView] = useInView();
+  useEffect(() => {
+    if (inView) {
+      controls.start("visible");
+    } else {
+      controls.start("hidden");
+    }
+  }, [controls, inView]);
   return (
     <div>
       <AnimatePresence onExitComplete={handleSmoothScroll}>
@@ -117,42 +200,13 @@ export default function Home() {
                 Let's hyper-accelerate your research.
               </h1>
               <div className="grid md:grid-col-2 gap-4 sm:grid-col-1 p-4">
-                {isSignedIn && orgId && orgSlug ? (
-                  <div className="w-full md:min-w-[400px] lg:min-w-[600px] xl:min-w-[800px] ">
-                    <InputBar
-                      isHome={true}
-                      value={input}
-                      onChange={handleInputChange}
-                      setInput={setInput}
-                      submitInput={handleSubmit}
-                      orgId={orgId as string}
-                      chattype={chatType as ChatType}
-                      setChattype={
-                        setChattype as Dispatch<SetStateAction<ChatType>>
-                      }
-                    />
-                    <div className="flex flex-col gap-y-4">
-                      <OrgChatToggler orgId={orgId} orgSlug={orgSlug} />
-                      <div className="w-full md:w-[400px] lg:w-[600px] xl:w-[800px] h-[500px] overflow-y-scroll scrollbar-hide">
-                        <ChatCardWrapper
-                          isHome={true}
-                          org_id={orgId}
-                          org_slug={orgSlug!}
-                          uid={userId}
-                          initialData={[]}
-                        />
-                      </div>
-                    </div>
-                  </div>
-                ) : (
-                  <Link
-                    href="/dashboard"
-                    className={buttonVariants({ variant: "default" })}
-                  >
-                    <LayoutDashboard className="mr-2 w-4 h-4" />
-                    Dashboard
-                  </Link>
-                )}
+                <Link
+                  href="/dashboard"
+                  className={buttonVariants({ variant: "default" })}
+                >
+                  <LayoutDashboard className="mr-2 w-4 h-4" />
+                  Dashboard
+                </Link>
                 {isSignedIn || (
                   <Link
                     className={buttonVariants({ variant: "secondary" })}
@@ -252,4 +306,4 @@ export default function Home() {
       </div>
     </div>
   );
-}
+};