1"use client";
2
3import { User } from "lucide-react";
4import { useParams, usePathname, useRouter } from "next/navigation";
5import { useUser } from "@/(main)/providers/user-provider";
6import { signout } from "@/actions";
7import {
8  DropdownMenu,
9  DropdownMenuContent,
10  DropdownMenuItem,
11  DropdownMenuTrigger,
12} from "@/ui/dropdown-menu";
13import Link from "@/ui/link";
14import { cn } from "@/util";
15
16export function MainHeader() {
17  const pathname = usePathname();
18  const params = useParams();
19  const segments = pathname.split("/").filter(Boolean);
20  const pathLinks: React.ReactNode[] = [];
21
22  segments.forEach((segment, index) => {
23    let path = `/${segments.slice(0, index + 1).join("/")}`;
24    if ("filePath" in params && index === 1) {
25      path = `${path}/files`;
26    }
27
28    if (index > 0) {
29      pathLinks.push(<span key={`sep-${segment}`}>/</span>);
30    }
31    pathLinks.push(
32      <Link
33        className="hover:underline"
34        href={path}
35        key={`segment-${segment}`}
36        prefetch={true}
37      >
38        {segment}
39      </Link>,
40    );
41  });
42
43  return (
44    <div className="shrink-0 flex flex-row w-full h-9 items-center justify-between border-b bg-sidebar">
45      <div className="flex-1 pl-2 text-sm font-mono flex items-center">
46        {pathLinks}
47      </div>
48      <UserDropdown />
49    </div>
50  );
51}
52
53function UserDropdown() {
54  const { user } = useUser();
55
56  return (
57    <DropdownMenu>
58      <DropdownMenuTrigger asChild>
59        <button
60          type="submit"
61          className="w-5.5 h-5.5 mr-2 rounded-full bg-primary flex items-center justify-center hover:bg-primary/70 data-[state=open]:bg-primary/70 outline-none transition-colors"
62        >
63          <User
64            className={cn(
65              "size-4 transition-all duration-300",
66              user
67                ? "text-primary-foreground stroke-[2.5]"
68                : "text-primary-foreground/60",
69            )}
70          />
71        </button>
72      </DropdownMenuTrigger>
73      <DropdownMenuContent
74        side="bottom"
75        align="end"
76        className="rounded-none min-w-32 p-0"
77      >
78        {user ? <AuthenticatedMenuItems /> : <UnauthenticatedMenuItems />}
79      </DropdownMenuContent>
80    </DropdownMenu>
81  );
82}
83
84function AuthenticatedMenuItems() {
85  const router = useRouter();
86
87  return (
88    <>
89      <DropdownMenuItem
90        onClick={() => router.push("/settings")}
91        className="rounded-none px-2 py-1.5 text-sm cursor-pointer"
92      >
93        Profile
94      </DropdownMenuItem>
95      <DropdownMenuItem
96        onClick={async () => {
97          await signout();
98          router.push("/login");
99        }}
100        className="rounded-none px-2 py-1.5 text-sm cursor-pointer"
101      >
102        Sign out
103      </DropdownMenuItem>
104    </>
105  );
106}
107
108function UnauthenticatedMenuItems() {
109  const router = useRouter();
110
111  return (
112    <>
113      <DropdownMenuItem
114        onClick={() => router.push("/login")}
115        className="rounded-none px-2 py-1.5 text-sm cursor-pointer"
116      >
117        Log in
118      </DropdownMenuItem>
119      <DropdownMenuItem
120        onClick={() => router.push("/signup")}
121        className="rounded-none px-2 py-1.5 text-sm cursor-pointer"
122      >
123        Sign up
124      </DropdownMenuItem>
125    </>
126  );
127}
128