refactor: re-arranged components

apps/nextjs/src/app/_components/auth-showcase.tsx

@@ -10,7 +10,7 @@ import { signIn } from "@ubus/auth";
 import { cn } from "@ubus/ui";
 import { Button } from "@ubus/ui/button";
 
-import { LogoIcon } from "./logo-icon";
+import { LogoIcon } from "./logo";
 
 interface IAuthShowcaseProps {
   className?: string;

apps/nextjs/src/app/_components/landing-page/header/index.tsx → apps/nextjs/src/app/_components/header.tsx

@@ -4,9 +4,13 @@ import { IconMenu } from "@tabler/icons-react";
 import { Button } from "@ubus/ui/button";
 
 import { Logo } from "./logo";
-import { NavBar } from "./navbar";
+import { DashboardNavbar, LandingNavbar } from "./navbar";
 
-export const Header = () => {
+export const DashboardHeader = () => {
+  return <DashboardNavbar />;
+};
+
+export const LandingHeader = () => {
   return (
     <nav className="container border-outline">
       <div className="mx-auto flex h-24 flex-wrap items-center justify-between">
@@ -30,7 +34,7 @@ export const Header = () => {
             <IconMenu />
           </Button>
         </div>
-        <NavBar />
+        <LandingNavbar />
       </div>
     </nav>
   );

apps/nextjs/src/app/_components/landing-page/header/logo.tsx → apps/nextjs/src/app/_components/logo.tsx

@@ -3,6 +3,22 @@
 import Image from "next/image";
 
 import { useThemeBasedValue } from "@ubus/hooks";
+import { cn } from "@ubus/ui";
+
+export const LogoIcon = ({ className }: { className?: string }) => {
+  const logoSrc = useThemeBasedValue("ubus.svg", "ubus-dark.svg");
+
+  return (
+    <Image
+      width={48}
+      height={48}
+      src={logoSrc}
+      loading="lazy"
+      className={cn("mx-auto max-h-12 w-auto", className)}
+      alt="ubus logo"
+    />
+  );
+};
 
 export const Logo = () => {
   const logoSrc = useThemeBasedValue("ubus.svg", "ubus-dark.svg");

apps/nextjs/src/app/_components/logout-button.tsx

@@ -0,0 +1,31 @@
+"use server";
+
+import { IconLogout } from "@tabler/icons-react";
+
+import type { ButtonProps } from "@ubus/ui/button";
+import { signOut } from "@ubus/auth";
+import { Button } from "@ubus/ui/button";
+
+interface LogoutButtonProps extends ButtonProps {
+  withIcon?: boolean;
+}
+
+export const LogoutButton = ({
+  withIcon = true,
+  ...props
+}: LogoutButtonProps) => {
+  return (
+    <form className="contents">
+      <Button
+        {...props}
+        formAction={async () => {
+          "use server";
+          await signOut();
+        }}
+      >
+        {withIcon && <IconLogout className="mr-2" />}
+        Log out
+      </Button>
+    </form>
+  );
+};

apps/nextjs/src/app/_components/navbar.tsx

@@ -0,0 +1,29 @@
+import { landingNavLinks } from "@ubus/configs";
+
+import { LogoutButton } from "./logout-button";
+import { NavLink } from "./navlink";
+import { UserAvatar } from "./user-avatar";
+
+export const DashboardNavbar = () => {
+  return (
+    <div className="container flex h-20 w-full justify-between">
+      UBus
+      <UserAvatar />
+      <LogoutButton />
+    </div>
+  );
+};
+
+export const LandingNavbar = () => {
+  return (
+    <div className="hidden w-full items-center justify-between md:order-1 md:flex md:w-auto">
+      <ul className="mt-4 flex flex-col rounded-lg p-4 font-medium md:mt-0 md:flex-row md:gap-8 md:p-0">
+        {landingNavLinks.map((link) => (
+          <li key={link.href}>
+            <NavLink className="px-0" link={link} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

apps/nextjs/src/app/_components/landing-page/header/navbar.tsx → apps/nextjs/src/app/_components/navlink.tsx

@@ -4,24 +4,9 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 
 import type { INavLink } from "@ubus/configs";
-import { landingNavLinks } from "@ubus/configs";
 import { cn } from "@ubus/ui";
 import { Button } from "@ubus/ui/button";
 
-export const NavBar = () => {
-  return (
-    <div className="hidden w-full items-center justify-between md:order-1 md:flex md:w-auto">
-      <ul className="mt-4 flex flex-col rounded-lg p-4 font-medium md:mt-0 md:flex-row md:gap-8 md:p-0">
-        {landingNavLinks.map((link) => (
-          <li key={link.href}>
-            <NavLink className="px-0" link={link} />
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
 export const NavLink = ({
   link,
   className,

apps/nextjs/src/app/_components/user-avatar.tsx

@@ -0,0 +1,23 @@
+import { cn } from "@ubus/ui";
+import { Avatar, AvatarFallback, AvatarImage } from "@ubus/ui/avatar";
+import { Label } from "@ubus/ui/label";
+
+interface IUserAvatarProps {
+  className?: string;
+}
+export const UserAvatar = ({ className }: IUserAvatarProps) => {
+  return (
+    <div
+      className={cn(
+        "flex h-fit flex-nowrap items-center justify-center",
+        className,
+      )}
+    >
+      <Label>User Name</Label>
+      <Avatar>
+        <AvatarFallback>UN</AvatarFallback>
+        <AvatarImage src="" />
+      </Avatar>
+    </div>
+  );
+};

apps/nextjs/src/app/dashboard/page.tsx

@@ -0,0 +1,7 @@
+import { DashboardHeader } from "../_components/header";
+
+const Dashboard = () => {
+  return <DashboardHeader />;
+};
+
+export default Dashboard;

apps/nextjs/src/app/page.tsx

@@ -1,16 +1,24 @@
-import { auth } from "@ubus/auth";
+import { Contact } from "./_components/contact";
+import { EssentialFeatures, KeyFeatures } from "./_components/features";
+import { Footer } from "./_components/footer";
+import { LandingHeader } from "./_components/header";
+import { Hero } from "./_components/hero";
+import { OurTeam } from "./_components/our-team";
+import { Testimonials } from "./_components/testimonials";
 
-import { Dashboard } from "./_components/dashboard";
-import LandingPage from "./_components/landing-page";
-
-const HomePage = async () => {
-  const session = await auth();
-
-  if (!session) {
-    return <LandingPage />;
-  }
-
-  return <Dashboard />;
+const HomePage = () => {
+  return (
+    <>
+      <LandingHeader />
+      <Hero />
+      <KeyFeatures />
+      <EssentialFeatures />
+      <Testimonials />
+      <OurTeam />
+      <Contact />
+      <Footer />
+    </>
+  );
 };
 
 export default HomePage;

apps/nextjs/tsconfig.json

@@ -19,6 +19,6 @@
     ".",
     ".next/types/**/*.ts",
     "src/app/_components/auth-showcase.tsx",
-    "src/app/_components/logo-icon.tsx"
+    "src/app/_components/logo.tsx"
   ]
 }

package.json

@@ -16,6 +16,7 @@
     "lint:fix": "turbo run lint --continue -- --fix --cache --cache-location .cache/.eslintcache",
     "lint:ws": "pnpm dlx sherif@latest",
     "typecheck": "turbo run typecheck",
+    "turbo:restart": "turbo daemon restart",
     "ui-add": "turbo run ui-add"
   },
   "prettier": "@ubus/prettier-config",