Clerk Organization Switcher

1"use client";
2 
3import { useCallback, useEffect, useRef, useState } from "react";
4 
5import { useOrganization, useOrganizationList, useUser } from "@clerk/nextjs";
6 
7function cn(...classes: (string | boolean | undefined)[]) {
8  return classes.filter(Boolean).join(" ");
9}
10 
11function ChevronDownIcon({ className }: { className?: string }) {
12  return (
13    <svg
14      aria-hidden="true"
15      className={className}
16      xmlns="http://www.w3.org/2000/svg"
17      width="16"
18      height="16"
19      viewBox="0 0 24 24"
20      fill="none"
21      stroke="currentColor"
22      strokeWidth="2"
23      strokeLinecap="round"
24      strokeLinejoin="round"
25    >
26      <path d="m6 9 6 6 6-6" />
27    </svg>
28  );
29}
30 
31function CheckIcon({ className }: { className?: string }) {
32  return (
33    <svg
34      aria-hidden="true"
35      className={className}
36      xmlns="http://www.w3.org/2000/svg"
37      width="16"
38      height="16"
39      viewBox="0 0 24 24"
40      fill="none"
41      stroke="currentColor"
42      strokeWidth="2"
43      strokeLinecap="round"
44      strokeLinejoin="round"
45    >
46      <polyline points="20 6 9 17 4 12" />
47    </svg>
48  );
49}
50 
51function PlusIcon({ className }: { className?: string }) {
52  return (
53    <svg
54      aria-hidden="true"
55      className={className}
56      xmlns="http://www.w3.org/2000/svg"
57      width="16"
58      height="16"
59      viewBox="0 0 24 24"
60      fill="none"
61      stroke="currentColor"
62      strokeWidth="2"
63      strokeLinecap="round"
64      strokeLinejoin="round"
65    >
66      <path d="M5 12h14" />
67      <path d="M12 5v14" />
68    </svg>
69  );
70}
71 
72function UserIcon({ className }: { className?: string }) {
73  return (
74    <svg
75      aria-hidden="true"
76      className={className}
77      xmlns="http://www.w3.org/2000/svg"
78      width="16"
79      height="16"
80      viewBox="0 0 24 24"
81      fill="none"
82      stroke="currentColor"
83      strokeWidth="2"
84      strokeLinecap="round"
85      strokeLinejoin="round"
86    >
87      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
88      <circle cx="12" cy="7" r="4" />
89    </svg>
90  );
91}
92 
93const AVATAR_COLORS = [
94  "bg-violet-600",
95  "bg-blue-600",
96  "bg-emerald-600",
97  "bg-amber-600",
98  "bg-rose-600",
99  "bg-cyan-600",
100  "bg-fuchsia-600",
101  "bg-lime-600",
102];
103 
104function getAvatarColor(id: string) {
105  let hash = 0;
106  for (let i = 0; i < id.length; i++) {
107    hash = ((hash << 5) - hash + id.charCodeAt(i)) | 0;
108  }
109  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
110}
111 
112function getInitials(name: string) {
113  return name
114// … truncated