Updating project

webscopeio · Mar 15, 2024 · a77d0e4 · a77d0e4
1 parent 47e0cf6
commit a77d0e4
Show file tree

Hide file tree

Showing 27 changed files with 240 additions and 325 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,4 +5,5 @@ node_modules
 .turbo
 
 #  Env files
-.env
+.env
+.env.local
diff --git a/apps/next/app/layout.tsx b/apps/next/app/layout.tsx
@@ -24,12 +24,14 @@ export default function RootLayout({
     <html lang="en" className="dark" suppressHydrationWarning>
       <body
         className={cn(
-          "bg-background min-h-dvh font-sans antialiased",
+          "bg-background flex min-h-dvh flex-col font-sans antialiased",
           fontSans.variable
         )}
       >
         <Providers>
-          <main className="mx-auto max-w-xl px-4">{children}</main>
+          <nav className="bg-muted/80 sticky top-0 z-20 h-24 w-full backdrop-blur-lg" />
+          <main className="z-10 p-4">{children}</main>
+          <footer className="bg-muted/80 bottom-0 mt-auto h-48 w-full backdrop-blur-lg" />
         </Providers>
       </body>
     </html>

diff --git a/apps/next/app/login/layout.tsx b/apps/next/app/login/layout.tsx
@@ -0,0 +1,10 @@
+import { DynamicBreadCrumbs } from "@/components/dynamic-breadcrumbs";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <section className="mx-auto max-w-lg space-y-2 py-12">
+      <DynamicBreadCrumbs />
+      {children}
+    </section>
+  );
+}
diff --git a/apps/next/app/register/page.tsx → apps/next/app/login/new/page.tsx b/apps/next/app/register/page.tsx → apps/next/app/login/new/page.tsx
@@ -14,9 +14,5 @@ export default async function Page() {
     redirect("/settings");
   }
 
-  return (
-    <div className="grid min-h-dvh items-center">
-      <RegisterForm />
-    </div>
-  );
+  return <RegisterForm />;
 }
diff --git a/apps/next/app/login/otp/page.tsx b/apps/next/app/login/otp/page.tsx
@@ -34,9 +34,5 @@ export default async function Page({
     redirect("/login");
   }
 
-  return (
-    <div className="grid min-h-dvh items-center">
-      <OtpLoginForm email={searchParams.email} />
-    </div>
-  );
+  return <OtpLoginForm email={searchParams.email} />;
 }
diff --git a/apps/next/app/login/page.tsx b/apps/next/app/login/page.tsx
@@ -15,9 +15,5 @@ export default async function Page() {
     redirect("/settings");
   }
 
-  return (
-    <div className="grid min-h-dvh items-center">
-      <LoginForm />
-    </div>
-  );
+  return <LoginForm />;
 }
diff --git a/apps/next/app/login/reset-password/new/page.tsx b/apps/next/app/login/reset-password/new/page.tsx
@@ -15,9 +15,5 @@ export default async function Page() {
     redirect("/login");
   }
 
-  return (
-    <div className="grid min-h-dvh items-center">
-      <NewResetPasswordForm />
-    </div>
-  );
+  return <NewResetPasswordForm />;
 }
diff --git a/apps/next/app/login/reset-password/page.tsx b/apps/next/app/login/reset-password/page.tsx
@@ -15,9 +15,5 @@ export default async function Page() {
     redirect("/settings");
   }
 
-  return (
-    <div className="grid min-h-dvh items-center">
-      <ResetPasswordForm />
-    </div>
-  );
+  return <ResetPasswordForm />;
 }
diff --git a/apps/next/app/page.tsx b/apps/next/app/page.tsx
@@ -16,7 +16,7 @@ export default async function Home() {
   }
 
   return (
-    <div className="grid min-h-dvh items-center">
+    <div className="mx-auto w-full max-w-2xl py-52">
       <div className="space-y-6">
         <header className="space-y-2 text-center">
           <h2 className="text-6xl font-bold tracking-tight">
@@ -26,12 +26,12 @@ export default async function Home() {
             Build smarter with pre-built modules today
           </p>
         </header>
-        <footer className="mx-auto w-full max-w-md md:flex md:w-fit">
-          <Button asChild className="w-full">
+        <footer className="flex flex-col justify-center gap-2 sm:flex-row">
+          <Button asChild>
             <Link href="/login">Sign in</Link>
           </Button>
-          <Button variant="link" className="w-full">
-            <Link href="/register">Create an account</Link>
+          <Button variant="link">
+            <Link href="/login/new">Create an account</Link>
           </Button>
         </footer>
       </div>

diff --git a/apps/next/app/settings/accounts/page.tsx b/apps/next/app/settings/accounts/page.tsx
@@ -0,0 +1,18 @@
+import { Accounts } from "@/components/user/accounts";
+import { useSupabaseServer } from "@/modules/utils/server";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+
+export default async function Page() {
+  const supabase = useSupabaseServer({ cookies });
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    redirect("/login");
+  }
+
+  return <Accounts userId={user.id} />;
+}
diff --git a/apps/next/app/settings/account/page.tsx → apps/next/app/settings/credentials/page.tsx b/apps/next/app/settings/account/page.tsx → apps/next/app/settings/credentials/page.tsx
@@ -1,4 +1,4 @@
-import { AccountForm } from "@/components/user/account-form";
+import { CredentialsForm } from "@/components/user/credentials-form";
 import { useSupabaseServer } from "@/modules/utils/server";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
@@ -14,9 +14,5 @@ export default async function Page() {
     redirect("/login");
   }
 
-  return (
-    <div className="grid min-h-dvh items-center">
-      <AccountForm userEmail={user.email} />
-    </div>
-  );
+  return <CredentialsForm userEmail={user.email} />;
 }
diff --git a/apps/next/app/settings/layout.tsx b/apps/next/app/settings/layout.tsx
@@ -0,0 +1,35 @@
+import { DynamicBreadCrumbs } from "@/components/dynamic-breadcrumbs";
+import { DynamicNavigationLinks } from "@/components/dynamic-navigation-links";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <section className="mx-auto max-w-2xl space-y-6 py-12 lg:max-w-4xl">
+      <header className="space-y-2">
+        <DynamicBreadCrumbs />
+        <h2 className="text-5xl font-semibold tracking-tight">Settings</h2>
+        <p>Manage your accounts, profile and credentials settings</p>
+      </header>
+      <div className="flex flex-col gap-6 lg:flex-row">
+        <nav className="-ml-4 h-full min-w-[30%]">
+          <DynamicNavigationLinks
+            items={[
+              {
+                href: "/settings/accounts",
+                label: "Accounts",
+              },
+              {
+                href: "/settings/profile",
+                label: "Profile",
+              },
+              {
+                href: "/settings/credentials",
+                label: "Credentials",
+              },
+            ]}
+          />
+        </nav>
+        <div className="w-full">{children}</div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/next/app/settings/page.tsx b/apps/next/app/settings/page.tsx
@@ -1,4 +1,3 @@
-import { Settings } from "@/components/user/settings";
 import { useSupabaseServer } from "@/modules/utils/server";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
@@ -14,9 +13,5 @@ export default async function Page() {
     redirect("/login");
   }
 
-  return (
-    <div className="grid min-h-dvh items-center">
-      <Settings userId={user.id} />
-    </div>
-  );
+  redirect("/settings/accounts");
 }
diff --git a/apps/next/app/settings/profile/page.tsx b/apps/next/app/settings/profile/page.tsx
@@ -14,9 +14,5 @@ export default async function Page() {
     redirect("/login");
   }
 
-  return (
-    <div className="grid min-h-dvh items-center">
-      <ProfileForm userId={user.id} />
-    </div>
-  );
+  return <ProfileForm userId={user.id} />;
 }
diff --git a/apps/next/components/dynamic-breadcrumbs.tsx b/apps/next/components/dynamic-breadcrumbs.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export const DynamicBreadCrumbs: React.FC = () => {
+  const pathname = usePathname();
+
+  const paths = React.useMemo(() => {
+    const segments = pathname.split("/").filter(Boolean);
+
+    return segments.reduce<{ href: string; label: string }[]>(
+      (acc, curr, index) => {
+        const href = `/${segments.slice(0, index + 1).join("/")}`;
+        const label =
+          curr.charAt(0).toUpperCase() + curr.slice(1).replaceAll("-", " ");
+
+        acc.push({ href, label });
+        return acc;
+      },
+      [{ href: "/", label: "Home" }]
+    );
+  }, [pathname]);
+
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        {paths.map(({ href, label }, index) => (
+          <React.Fragment key={href}>
+            {index !== paths.length - 1 ? (
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link href={href}>{label}</Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+            ) : (
+              <BreadcrumbItem>
+                <span className="text-foreground">{label}</span>
+              </BreadcrumbItem>
+            )}
+            {index !== paths.length - 1 && <BreadcrumbSeparator />}
+          </React.Fragment>
+        ))}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};
diff --git a/apps/next/components/dynamic-navigation-links.tsx b/apps/next/components/dynamic-navigation-links.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export const DynamicNavigationLinks: React.FC<{
+  items: { href: string; label: string }[];
+}> = ({ items }) => {
+  const pathname = usePathname();
+
+  return (
+    <div className="space-x-1 lg:space-x-0 lg:space-y-1">
+      {items.map(({ href, label }) => (
+        <Button
+          key={href}
+          className="lg:w-full lg:justify-start"
+          asChild
+          variant="ghost"
+        >
+          {href === pathname ? (
+            <span className="bg-accent">{label}</span>
+          ) : (
+            <Link href={href}>{label}</Link>
+          )}
+        </Button>
+      ))}
+    </div>
+  );
+};