Clerk User Button

1"use client";
2 
3import * as React from "react";
4 
5import { useClerk, useUser } from "@clerk/nextjs";
6 
7function cn(...classes: (string | boolean | undefined)[]) {
8  return classes.filter(Boolean).join(" ");
9}
10 
11function UserIcon({ className }: { className?: string }) {
12  return (
13    <svg
14      aria-hidden="true"
15      xmlns="http://www.w3.org/2000/svg"
16      viewBox="0 0 24 24"
17      fill="none"
18      stroke="currentColor"
19      strokeWidth={2}
20      strokeLinecap="round"
21      strokeLinejoin="round"
22      className={className}
23    >
24      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
25      <circle cx="12" cy="7" r="4" />
26    </svg>
27  );
28}
29 
30function SettingsIcon({ className }: { className?: string }) {
31  return (
32    <svg
33      aria-hidden="true"
34      xmlns="http://www.w3.org/2000/svg"
35      viewBox="0 0 24 24"
36      fill="none"
37      stroke="currentColor"
38      strokeWidth={2}
39      strokeLinecap="round"
40      strokeLinejoin="round"
41      className={className}
42    >
43      <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
44      <circle cx="12" cy="12" r="3" />
45    </svg>
46  );
47}
48 
49function LogOutIcon({ className }: { className?: string }) {
50  return (
51    <svg
52      aria-hidden="true"
53      xmlns="http://www.w3.org/2000/svg"
54      viewBox="0 0 24 24"
55      fill="none"
56      stroke="currentColor"
57      strokeWidth={2}
58      strokeLinecap="round"
59      strokeLinejoin="round"
60      className={className}
61    >
62      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
63      <polyline points="16 17 21 12 16 7" />
64      <line x1="21" x2="9" y1="12" y2="12" />
65    </svg>
66  );
67}
68 
69interface MenuItem {
70  label: string;
71  onClick?: () => void;
72  icon?: React.ReactNode;
73}
74 
75export interface ClerkUserButtonProps {
76  className?: string;
77  menuItems?: MenuItem[];
78}
79 
80function getInitials(name: string): string {
81  return name
82    .split(" ")
83    .map((part) => part[0])
84    .join("")
85    .toUpperCase()
86    .slice(0, 2);
87}
88 
89// … truncated