1import { RefreshIcon } from "~/components/ui/refresh-icon";
2
3import type { ReactNode } from "react";
4
5import { cn } from "../../lib/utils";
6import { Button } from "../ui/button";
7
8export function ClerkUserProfilePage({
9 action,
10 children,
11 className,
12 description,
13 title,
14}: {
15 readonly action?: ReactNode;
16 readonly children: ReactNode;
17 readonly className?: string;
18 readonly description?: ReactNode;
19 readonly title: ReactNode;
20}) {
21 return (
22 <div className={cn("w-full min-w-0 text-foreground", className)}>
23 <header className="flex flex-col gap-3 pb-4 sm:flex-row sm:items-center sm:justify-between sm:gap-4 sm:pr-8">
24 <div className="min-w-0">
25 <h2 className="text-base leading-6 font-semibold">{title}</h2>
26 {description ? (
27 <p className="mt-1 max-w-[34rem] text-xs leading-4.5 text-muted-foreground sm:min-h-9">
28 {description}
29 </p>
30 ) : null}
31 </div>
32 {action ? <div className="shrink-0">{action}</div> : null}
33 </header>
34
35 {children}
36 </div>
37 );
38}
39
40export function ClerkUserProfileRefreshButton({
41 className,
42 disabled = false,
43 isPending,
44 onClick,
45}: {
46 readonly className?: string;
47 readonly disabled?: boolean;
48 readonly isPending: boolean;
49 readonly onClick: () => void;
50}) {
51 return (
52 <Button
53 size="sm"
54 variant="outline"
55 className={className}
56 disabled={disabled || isPending}
57 onClick={onClick}
58 >
59 <RefreshIcon aria-hidden="true" size="sm" refreshing={isPending} />
60 Refresh
61 </Button>
62 );
63}
64
65export function ClerkUserProfileRow({
66 children,
67 className,
68 icon,
69}: {
70 readonly children: ReactNode;
71 readonly className?: string;
72 readonly icon: ReactNode;
73}) {
74 return (
75 <li className={cn("border-t py-4 first:border-t-0", className)}>
76 <div className="flex items-start gap-3">
77 <div
78 aria-hidden="true"
79 className="flex size-8 shrink-0 items-center justify-center rounded-lg border bg-muted/32 text-muted-foreground"
80 >
81 {icon}
82 </div>
83 <div className="min-w-0 flex-1">{children}</div>
84 </div>
85 </li>
86 );
87}