feat: Creator Dashboard

app/(dashboard)/u/[username]/(home)/page.tsx

@@ -0,0 +1,21 @@
+import { getUserByUsername } from "@/lib/user-service";
+import { currentUser } from "@clerk/nextjs";
+
+interface CreatorPageProps {
+  params: {
+    username: string;
+  };
+}
+
+const CreatorPage = async ({ params }: CreatorPageProps) => {
+  const externalUser = await currentUser();
+  const user = await getUserByUsername(params.username);
+
+  if (!user || user.externalUserId !== externalUser?.id) {
+    throw new Error("Unauthorized");
+  }
+
+  return <div className="h-full">CreatorPage</div>;
+};
+
+export default CreatorPage;

app/(dashboard)/u/[username]/_components/container.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useEffect } from "react";
+import { useMediaQuery } from "usehooks-ts";
+
+import { cn } from "@/lib/utils";
+import { useCreatorSidebar } from "@/store/use-creator-sidebar";
+
+interface ContainerProps {
+  children: React.ReactNode;
+}
+
+export const Container = ({ children }: ContainerProps) => {
+  const { collapsed, onCollapse, onExpand } = useCreatorSidebar(
+    (state) => state
+  );
+
+  const matches = useMediaQuery(`(max-width: 1024px)`);
+
+  useEffect(() => {
+    if (matches) {
+      onCollapse();
+    } else {
+      onExpand();
+    }
+  }, [matches, onCollapse, onExpand]);
+
+  return (
+    <div
+      className={cn("flex-1", collapsed ? "ml-[70px]" : "ml-[70px] lg:ml-60")}
+    >
+      {children}
+    </div>
+  );
+};

app/(dashboard)/u/[username]/_components/navbar/actions.tsx

@@ -0,0 +1,23 @@
+import { Button } from "@/components/ui/button";
+import { UserButton } from "@clerk/nextjs";
+import { LogOut } from "lucide-react";
+import Link from "next/link";
+
+export const Actions = () => {
+  return (
+    <div className="flex items-center justify-end gap-x-2">
+      <Button
+        size="sm"
+        variant="ghost"
+        className="text-muted-foreground hover:text-primary"
+        asChild
+      >
+        <Link href="/">
+          <LogOut className="h-5 w-5 mr-2" />
+          Exit
+        </Link>
+      </Button>
+      <UserButton afterSignOutUrl="/" />
+    </div>
+  );
+};

app/(dashboard)/u/[username]/_components/navbar/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Logo } from "./logo";
+import { Actions } from "./actions";
+
+export const Navbar = () => {
+  return (
+    <nav className="fixed top-0 w-full h-20 z-[49] bg-[#252731] px-2 lg:px-4 flex justify-between items-center shadow-sm">
+      <Logo />
+      <Actions />
+    </nav>
+  );
+};

app/(dashboard)/u/[username]/_components/navbar/logo.tsx

@@ -0,0 +1,25 @@
+import { cn } from "@/lib/utils";
+import { Poppins } from "next/font/google";
+import Image from "next/image";
+import Link from "next/link";
+
+const font = Poppins({
+  subsets: ["latin"],
+  weight: ["200", "300", "400", "500", "600", "700", "800"],
+});
+
+export const Logo = () => {
+  return (
+    <Link href="/">
+      <div className="flex items-center gap-x-4 hover:opacity-75 transition">
+        <div className="bg-white rounded-full p-1 mr-12 shrink-0 lg:mr-0 lg:shrink">
+          <Image src="/spooky.svg" alt="gamehub" height="32" width="32" />
+        </div>
+        <div className={cn(font.className, "hidden lg:block")}>
+          <p className="text-lg font-semibold">Gamehub</p>
+          <p className="text-xs text-muted-foreground">Creator Dashboard</p>
+        </div>
+      </div>
+    </Link>
+  );
+};

app/(dashboard)/u/[username]/_components/sidebar/index.tsx

@@ -0,0 +1,12 @@
+import { Navigation } from "./navigation";
+import { Toggle } from "./toggle";
+import { Wrapper } from "./wrapper";
+
+export const Sidebar = async () => {
+  return (
+    <Wrapper>
+      <Toggle />
+      <Navigation />
+    </Wrapper>
+  );
+};

app/(dashboard)/u/[username]/_components/sidebar/nav-item.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { useCreatorSidebar } from "@/store/use-creator-sidebar";
+import { LucideIcon } from "lucide-react";
+import Link from "next/link";
+
+interface NavItemProps {
+  icon: LucideIcon;
+  label: string;
+  href: string;
+  isActive: boolean;
+}
+
+export const NavItem = ({
+  icon: Icon,
+  label,
+  href,
+  isActive,
+}: NavItemProps) => {
+  const { collapsed } = useCreatorSidebar((state) => state);
+
+  return (
+    <Button
+      asChild
+      variant="ghost"
+      className={cn(
+        "w-full h-12",
+        collapsed ? "justify-center" : "justify-start",
+        isActive && "bg-accent"
+      )}
+    >
+      <Link href={href}>
+        <div className="flex items-center gap-x-4">
+          <Icon className={cn("h-4 w-4", collapsed ? "mr-0" : "mr-2")} />
+          {!collapsed && <span>{label}</span>}
+        </div>
+      </Link>
+    </Button>
+  );
+};
+
+export const NavItemSkeleton = () => {
+  return (
+    <li className="flex items-center gap-x-4 px-3 py-2">
+      <Skeleton className="min-h-[32px] min-w-[32px] rounded-full" />
+      <div className="flex-1">
+        <Skeleton className="h-6" />
+      </div>
+    </li>
+  );
+};

app/(dashboard)/u/[username]/_components/sidebar/navigation.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useUser } from "@clerk/nextjs";
+import { Fullscreen, KeyRound, MessageSquare, Users } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { NavItem } from "./nav-item";
+
+export const Navigation = () => {
+  const pathname = usePathname();
+  const { user } = useUser();
+
+  const routes = [
+    {
+      label: "Stream",
+      href: `/u/${user?.username}`,
+      icon: Fullscreen,
+    },
+    {
+      label: "Keys",
+      href: `/u/${user?.username}/keys`,
+      icon: KeyRound,
+    },
+    {
+      label: "Chat",
+      href: `/u/${user?.username}/chat`,
+      icon: MessageSquare,
+    },
+    {
+      label: "Community",
+      href: `/u/${user?.username}/community`,
+      icon: Users,
+    },
+  ];
+
+  return (
+    <div className="space-y-2 px-2 pt-4 lg:pt-0">
+      {routes.map((route) => (
+        <NavItem
+          key={route.href}
+          label={route.label}
+          icon={route.icon}
+          href={route.href}
+          isActive={pathname === route.href}
+        />
+      ))}
+    </div>
+  );
+};

app/(dashboard)/u/[username]/_components/sidebar/toggle.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Hint } from "@/components/hint";
+import { Button } from "@/components/ui/button";
+import { useCreatorSidebar } from "@/store/use-creator-sidebar";
+import { ArrowLeftFromLine, ArrowRightFromLine } from "lucide-react";
+
+export const Toggle = () => {
+  const { collapsed, onExpand, onCollapse } = useCreatorSidebar(
+    (state) => state
+  );
+
+  const label = collapsed ? "Expand" : "Collapse";
+
+  return (
+    <>
+      {collapsed && (
+        <div className="w-full hidden lg:flex items-center justify-center pt-4 mb-4">
+          <Hint label={label} side="right" asChild>
+            <Button onClick={onExpand} variant="ghost" className="h-auto p-2">
+              <ArrowRightFromLine className="h-4 w-4" />
+            </Button>
+          </Hint>
+        </div>
+      )}
+      {!collapsed && (
+        <div className="p-3 pl-6 mb-2 hidden lg:flex items-center w-full">
+          <p className="font-semibold text-primary">Dashboard</p>
+          <Hint label={label} side="right" asChild>
+            <Button
+              onClick={onCollapse}
+              variant="ghost"
+              className="h-auto p-2 ml-auto"
+            >
+              <ArrowLeftFromLine className="h-4 w-4" />
+            </Button>
+          </Hint>
+        </div>
+      )}
+    </>
+  );
+};

app/(dashboard)/u/[username]/_components/sidebar/wrapper.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { useCreatorSidebar } from "@/store/use-creator-sidebar";
+import React from "react";
+
+interface WrapperProps {
+  children: React.ReactNode;
+}
+
+export const Wrapper = ({ children }: WrapperProps) => {
+  const { collapsed } = useCreatorSidebar((state) => state);
+
+  return (
+    <aside
+      className={cn(
+        "fixed left-0 flex flex-col w-[70px] lg:w-60 h-full bg-background border-r border-[#2D2E35] z-50",
+        collapsed && "lg:w-[70px]"
+      )}
+    >
+      {children}
+    </aside>
+  );
+};

app/(dashboard)/u/[username]/layout.tsx

@@ -0,0 +1,33 @@
+import { getSelfByUsername } from "@/lib/auth-service";
+import { redirect } from "next/navigation";
+import React from "react";
+import { Container } from "./_components/container";
+import { Navbar } from "./_components/navbar";
+import { Sidebar } from "./_components/sidebar";
+
+interface CreatorLayoutProps {
+  params: {
+    username: string;
+  };
+  children: React.ReactNode;
+}
+
+const CreatorLayout = async ({ params, children }: CreatorLayoutProps) => {
+  const self = await getSelfByUsername(params.username);
+
+  if (!self) {
+    redirect("/");
+  }
+
+  return (
+    <>
+      <Navbar />
+      <div className="flex h-full pt-20">
+        <Sidebar />
+        <Container>{children}</Container>
+      </div>
+    </>
+  );
+};
+
+export default CreatorLayout;

lib/auth-service.ts

@@ -2,21 +2,45 @@ import { currentUser } from "@clerk/nextjs";
 import { db } from "./db";
 
 export const getSelf = async () => {
-    const self = await currentUser();
+  const self = await currentUser();
 
-    if (!self || !self.username) {
-        throw new Error("Unauthorized");
-    }
+  if (!self || !self.username) {
+    throw new Error("Unauthorized");
+  }
 
-    const user = await db.user.findUnique({
-        where: {
-            externalUserId: self.id,
-        },
-    });
+  const user = await db.user.findUnique({
+    where: {
+      externalUserId: self.id,
+    },
+  });
 
-    if (!user) {
-        throw new Error("Not Found");
-    }
+  if (!user) {
+    throw new Error("Not Found");
+  }
 
-    return user;
+  return user;
+};
+
+export const getSelfByUsername = async (username: string) => {
+  const self = await currentUser();
+
+  if (!self || !self.username) {
+    throw new Error("Unauthorized");
+  }
+
+  const user = await db.user.findUnique({
+    where: {
+      username,
+    },
+  });
+
+  if (!user) {
+    throw new Error("User not found");
+  }
+
+  if (self.username !== user.username) {
+    throw new Error("Unauthorized");
+  }
+
+  return self;
 };