@useatlas/create 0.0.6 → 0.0.7

package/templates/nextjs-standalone/src/ui/components/org-switcher.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { ChevronsUpDown, Check, Building2, AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { authClient } from "@/lib/auth/client";
+
+interface OrgOption {
+  id: string;
+  name: string;
+  slug: string;
+  logo?: string | null;
+}
+
+export function OrgSwitcher() {
+  const session = authClient.useSession();
+  const [orgs, setOrgs] = useState<OrgOption[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [switchError, setSwitchError] = useState<string | null>(null);
+
+  const activeOrgId = (session.data?.session as Record<string, unknown> | undefined)?.activeOrganizationId as string | undefined;
+
+  useEffect(() => {
+    if (!session.data?.user) return;
+    let cancelled = false;
+
+    async function fetchOrgs() {
+      try {
+        const result = await authClient.organization.list();
+        if (!cancelled && result.data) {
+          setOrgs(result.data as OrgOption[]);
+        }
+      } catch (err) {
+        // Log fetch failure — component gracefully hides when no orgs
+        console.error("Failed to load organizations:", err);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    fetchOrgs();
+    return () => { cancelled = true; };
+  }, [session.data?.user]);
+
+  const activeOrg = orgs.find((o) => o.id === activeOrgId);
+
+  async function switchOrg(orgId: string) {
+    setSwitchError(null);
+    try {
+      await authClient.organization.setActive({ organizationId: orgId });
+      window.location.reload();
+    } catch (err) {
+      console.error("Failed to switch organization:", err);
+      setSwitchError("Failed to switch organization. Please try again.");
+    }
+  }
+
+  // Don't render if no session or no orgs
+  if (!session.data?.user || (orgs.length <= 1 && !loading)) return null;
+
+  return (
+    <div>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            className="w-full justify-start gap-2 px-3 py-2 text-left"
+          >
+            <div className="bg-primary/10 flex size-6 items-center justify-center rounded text-xs font-semibold">
+              {activeOrg?.name.charAt(0).toUpperCase() ?? <Building2 className="size-3.5" />}
+            </div>
+            <span className="flex-1 truncate text-sm font-medium">
+              {activeOrg?.name ?? "Select organization"}
+            </span>
+            <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56" align="start">
+          <DropdownMenuLabel>Organizations</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {orgs.map((org) => (
+            <DropdownMenuItem
+              key={org.id}
+              onClick={() => switchOrg(org.id)}
+              className="gap-2"
+            >
+              <div className="bg-primary/10 flex size-6 items-center justify-center rounded text-xs font-semibold">
+                {org.name.charAt(0).toUpperCase()}
+              </div>
+              <span className="flex-1 truncate">{org.name}</span>
+              {org.id === activeOrgId && <Check className="size-4" />}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {switchError && (
+        <div className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-destructive">
+          <AlertCircle className="size-3 shrink-0" />
+          <span>{switchError}</span>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/nextjs-standalone/src/ui/components/region-picker.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import type { RegionPickerItem } from "@/ui/lib/types";
+import { Check, MapPin } from "lucide-react";
+
+// ── Compliance Badge ───────────────────────────────────────────
+
+function getComplianceLabel(regionId: string): string | null {
+  const lower = regionId.toLowerCase();
+  if (/(?:^|[-_])eu(?:[-_]|$)/.test(lower)) return "GDPR compliant";
+  if (/(?:^|[-_])us(?:[-_]|$)/.test(lower)) return "SOC 2 compliant";
+  return null;
+}
+
+export function ComplianceBadge({
+  regionId,
+  className,
+}: {
+  regionId: string;
+  className?: string;
+}) {
+  const label = getComplianceLabel(regionId);
+  if (!label) return null;
+  return (
+    <Badge variant="secondary" className={cn("text-xs", className)}>
+      {label}
+    </Badge>
+  );
+}
+
+// ── Region Card Grid ───────────────────────────────────────────
+
+export function RegionCardGrid({
+  regions,
+  selected,
+  onSelect,
+  disabled,
+}: {
+  regions: RegionPickerItem[];
+  selected: string;
+  onSelect: (regionId: string) => void;
+  disabled?: boolean;
+}) {
+  if (regions.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        No regions are available. Contact support for assistance.
+      </p>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {regions.map((region) => (
+        <Card
+          key={region.id}
+          role="button"
+          tabIndex={disabled ? -1 : 0}
+          aria-pressed={selected === region.id}
+          className={cn(
+            "relative cursor-pointer transition-all hover:shadow-md",
+            selected === region.id
+              ? "ring-2 ring-primary border-primary"
+              : "hover:border-muted-foreground/30",
+            disabled && "pointer-events-none opacity-50",
+          )}
+          onClick={() => {
+            if (!disabled) onSelect(region.id);
+          }}
+          onKeyDown={(e) => {
+            if (!disabled && (e.key === "Enter" || e.key === " ")) {
+              e.preventDefault();
+              onSelect(region.id);
+            }
+          }}
+        >
+          <CardContent className="flex flex-col items-center gap-3 p-6 text-center">
+            <MapPin className="h-8 w-8 text-muted-foreground" />
+            <div className="space-y-1">
+              <p className="font-medium">{region.label}</p>
+              <div className="flex flex-wrap items-center justify-center gap-1.5">
+                {region.isDefault && (
+                  <Badge variant="outline" className="text-xs">
+                    Default
+                  </Badge>
+                )}
+                <ComplianceBadge regionId={region.id} />
+              </div>
+            </div>
+            {selected === region.id && (
+              <Badge variant="default" className="absolute right-3 top-3">
+                <Check className="h-3 w-3" />
+              </Badge>
+            )}
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}