Setup Inertia (#593)

resources/js/components/project-switch.tsx

@@ -0,0 +1,67 @@
+import { type SharedData } from '@/types';
+import { Link, useForm, usePage } from '@inertiajs/react';
+import { useState } from 'react';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { ChevronsUpDownIcon, PlusIcon } from 'lucide-react';
+import { useInitials } from '@/hooks/use-initials';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+
+export function ProjectSwitch() {
+  const page = usePage<SharedData>();
+  const { auth } = page.props;
+  const [selectedProject, setSelectedProject] = useState(auth.currentProject?.id?.toString() ?? '');
+  const initials = useInitials();
+  const form = useForm();
+
+  const handleProjectChange = (projectId: string) => {
+    const selectedProject = auth.projects.find((project) => project.id.toString() === projectId);
+    if (selectedProject) {
+      setSelectedProject(selectedProject.id.toString());
+      form.post(route('projects.switch', { project: projectId }));
+    }
+  };
+
+  return (
+    <div className="flex items-center">
+      <Link href={route('servers')}>
+        <Button variant="ghost" className="px-2">
+          <Avatar className="size-7 rounded-md">
+            <AvatarFallback className="rounded-md">{initials(auth.currentProject?.name ?? '')}</AvatarFallback>
+          </Avatar>
+          <span className="hidden lg:flex">{auth.currentProject?.name}</span>
+        </Button>
+      </Link>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="px-1!">
+            <ChevronsUpDownIcon size={5} />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56" align="start">
+          {auth.projects.map((project) => (
+            <DropdownMenuCheckboxItem
+              key={project.id.toString()}
+              checked={selectedProject === project.id.toString()}
+              onCheckedChange={() => handleProjectChange(project.id.toString())}
+            >
+              {project.name}
+            </DropdownMenuCheckboxItem>
+          ))}
+          <DropdownMenuSeparator />
+          <DropdownMenuItem className="gap-0">
+            <PlusIcon size={5} />
+            <span className="ml-2">Create new project</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}