#591 - sites [wip]

resources/js/components/site-switch.tsx

@@ -0,0 +1,86 @@
+import { 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';
+import { type Site } from '@/types/site';
+import type { SharedData } from '@/types';
+import CreateSite from '@/pages/sites/components/create-site';
+
+export function SiteSwitch() {
+  const page = usePage<SharedData>();
+  const [selectedSite, setSelectedSite] = useState(page.props.site || null);
+  const initials = useInitials();
+  const form = useForm();
+
+  const handleSiteChange = (site: Site) => {
+    setSelectedSite(site);
+    form.post(route('sites.switch', { server: site.server_id, site: site.id }));
+  };
+
+  return (
+    page.props.server &&
+    page.props.serverSites && (
+      <div className="flex items-center">
+        <DropdownMenu modal={false}>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="px-1!">
+              {selectedSite && (
+                <>
+                  <Avatar className="size-6 rounded-sm">
+                    <AvatarFallback className="rounded-sm">{initials(selectedSite?.domain ?? '')}</AvatarFallback>
+                  </Avatar>
+                  <span className="hidden lg:flex">{selectedSite?.domain}</span>
+                </>
+              )}
+
+              {!selectedSite && (
+                <>
+                  <Avatar className="size-6 rounded-sm">
+                    <AvatarFallback className="rounded-sm">S</AvatarFallback>
+                  </Avatar>
+                  <span className="hidden lg:flex">Select a site</span>
+                </>
+              )}
+
+              <ChevronsUpDownIcon size={5} />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-56" align="start">
+            {page.props.serverSites.length > 0 ? (
+              page.props.serverSites.map((site) => (
+                <DropdownMenuCheckboxItem
+                  key={`site-${site.id.toString()}`}
+                  checked={selectedSite?.id === site.id}
+                  onCheckedChange={() => handleSiteChange(site)}
+                >
+                  {site.domain}
+                </DropdownMenuCheckboxItem>
+              ))
+            ) : (
+              <DropdownMenuItem disabled>No sites</DropdownMenuItem>
+            )}
+            <DropdownMenuSeparator />
+            <CreateSite server={page.props.server}>
+              <DropdownMenuItem className="gap-0" onSelect={(e) => e.preventDefault()}>
+                <div className="flex items-center">
+                  <PlusIcon size={5} />
+                  <span className="ml-2">Create new site</span>
+                </div>
+              </DropdownMenuItem>
+            </CreateSite>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    )
+  );
+}