feat: setup workspaces

src/app/components/ReactiveButton.tsx

@@ -28,7 +28,9 @@ const Button: React.FC<{
       href={href}
       onMouseEnter={handleMouseEnter}
       className={classNames(
-        current ? "bg-dark-200 text-white" : "bg-dark-200 text-white",
+        current
+          ? "bg-dark-200 text-white"
+          : "bg-dark-50 text-white hover:bg-dark-200",
         "group flex items-center gap-x-3 rounded-md p-1.5 text-sm font-normal leading-6 text-dark-1000",
       )}
     >

src/app/components/SideNavigation.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
+import { api } from "~/trpc/react";
+
+import boardsIcon from "~/app/assets/boards.json";
+import membersIcon from "~/app/assets/members.json";
+import settingsIcon from "~/app/assets/settings.json";
+
+import ReactiveButton from "~/app/components/ReactiveButton";
+import UserMenu from "~/app/components/UserMenu";
+
+const navigation = [
+  { name: "Boards", href: "/boards", icon: boardsIcon },
+  { name: "Members", href: "/members", icon: membersIcon },
+  { name: "Settings", href: "/settings", icon: settingsIcon },
+];
+
+interface SideNavigationProps {
+  user: UserType;
+}
+
+interface UserType {
+  email?: string | null | undefined;
+  image?: string | null | undefined;
+}
+
+export default function SideNavigation({ user }: SideNavigationProps) {
+  const pathname = usePathname();
+
+  const { data } = api.workspace.all.useQuery();
+
+  const workspace = data?.[0];
+
+  return (
+    <nav className="flex w-72 flex-col justify-between border-r border-dark-600 px-5 py-5">
+      <div>
+        <div className="-mx-2 mb-4 flex items-center rounded-[5px] p-1.5 hover:bg-dark-200">
+          <span className="inline-flex h-6 w-6 items-center justify-center rounded-[5px] bg-dark-400">
+            <span className="text-xs font-medium leading-none text-white">
+              {workspace?.name.charAt(0).toUpperCase()}
+            </span>
+          </span>
+          <span className="ml-2 text-sm font-medium text-dark-1000">
+            {workspace?.name}
+          </span>
+        </div>
+        <ul role="list" className="-mx-2 my-3 space-y-1">
+          {navigation.map((item) => (
+            <li key={item.name}>
+              <ReactiveButton
+                href={item.href}
+                current={pathname.includes(item.href)}
+                name={item.name}
+                json={item.icon}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+      <UserMenu email={user?.email ?? ""} imageUrl={user?.image ?? undefined} />
+    </nav>
+  );
+}

src/app/components/dashboard.tsx

@@ -2,14 +2,7 @@ import { redirect } from "next/navigation";
 
 import { auth } from "~/server/auth";
 
-import boardsIcon from "~/app/assets/boards.json";
-
-import ReactiveButton from "~/app/components/ReactiveButton";
-import UserMenu from "~/app/components/UserMenu";
-
-const navigation = [
-  { name: "Boards", href: "/boards", icon: boardsIcon, current: true },
-];
+import SideNavigation from "./SideNavigation";
 
 export default async function Layout(props: { children: React.ReactNode }) {
   const session = await auth();
@@ -29,26 +22,7 @@ export default async function Layout(props: { children: React.ReactNode }) {
       </div>
 
       <div className="flex h-full w-full">
-        <nav className="flex w-72 flex-col justify-between border-r border-dark-600 px-5 py-5">
-          <div>
-            <ul role="list" className="-mx-2 my-3 space-y-1">
-              {navigation.map((item) => (
-                <li key={item.name}>
-                  <ReactiveButton
-                    href={item.href}
-                    current={item.current}
-                    name={item.name}
-                    json={item.icon}
-                  />
-                </li>
-              ))}
-            </ul>
-          </div>
-          <UserMenu
-            email={session?.user.email ?? ""}
-            imageUrl={session?.user.image ?? undefined}
-          />
-        </nav>
+        <SideNavigation user={session.user} />
         <div className="w-full overflow-hidden">{props.children}</div>
       </div>
     </main>