Profile Dropdown

1"use client";
2 
3import { CreditCard, FileText, LogOut, Settings, User } from "lucide-react";
4import Image from "next/image";
5import Link from "next/link";
6import * as React from "react";
7import {
8  DropdownMenu,
9  DropdownMenuContent,
10  DropdownMenuItem,
11  DropdownMenuSeparator,
12  DropdownMenuTrigger,
13} from "@/components/ui/dropdown-menu";
14import { cn } from "@/lib/utils";
15import Gemini from "../icons/gemini";
16 
17interface Profile {
18  name: string;
19  email: string;
20  avatar: string;
21  subscription?: string;
22  model?: string;
23}
24 
25interface MenuItem {
26  label: string;
27  value?: string;
28  href: string;
29  icon: React.ReactNode;
30  external?: boolean;
31}
32 
33const SAMPLE_PROFILE_DATA: Profile = {
34  name: "Eugene An",
35  email: "eugene@kokonutui.com",
36  avatar:
37    "https://ferf1mheo22r9ira.public.blob.vercel-storage.com/profile-mjss82WnWBRO86MHHGxvJ2TVZuyrDv.jpeg",
38  subscription: "PRO",
39  model: "Gemini 2.0 Flash",
40};
41 
42interface ProfileDropdownProps extends React.HTMLAttributes<HTMLDivElement> {
43  data?: Profile;
44  showTopbar?: boolean;
45}
46 
47export default function ProfileDropdown({
48  data = SAMPLE_PROFILE_DATA,
49  className,
50  ...props
51}: ProfileDropdownProps) {
52  const [isOpen, setIsOpen] = React.useState(false);
53  const menuItems: MenuItem[] = [
54    {
55      label: "Profile",
56      href: "#",
57      icon: <User className="h-4 w-4" />,
58    },
59    {
60      label: "Model",
61      value: data.model,
62      href: "#",
63      icon: <Gemini className="h-4 w-4" />,
64    },
65    {
66      label: "Subscription",
67      value: data.subscription,
68      href: "#",
69      icon: <CreditCard className="h-4 w-4" />,
70    },
71    {
72      label: "Settings",
73      href: "#",
74      icon: <Settings className="h-4 w-4" />,
75    },
76    {
77      label: "Terms & Policies",
78      href: "#",
79      icon: <FileText className="h-4 w-4" />,
80      external: true,
81    },
82  ];
83 
84  return (
85    <div className={cn("relative", className)} {...props}>
86      <DropdownMenu onOpenChange={setIsOpen}>
87        <div className="group relative">
88          <DropdownMenuTrigger asChild>
89            <button
90              className="flex items-center gap-16 rounded-2xl border border-zinc-200/60 bg-white p-3 transition-all duration-200 hover:border-zinc-300 hover:bg-zinc-50/80 hover:shadow-sm focus:outline-none dark:border-zinc-800/60 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/40"
91              type="button"
92            >
93              <div className="flex-1 text-left">
94// … truncated