nextuiq
Version:
NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat
100 lines (97 loc) • 6.46 kB
JavaScript
import { j as jsxRuntimeExports } from './index46.mjs';
import { useState, useId } from 'react';
import { Dropdown } from './index10.mjs';
import { Avatar } from './index4.mjs';
import { Button } from './index8.mjs';
const defaultUserData = {
name: "John Doe",
email: "john@example.com",
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=John"
};
const UserDropdown = ({ userData = defaultUserData, onAction }) => {
const [isOpen, setIsOpen] = useState(false);
const menuId = useId();
const trigger = /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "ghost",
onClick: () => setIsOpen(!isOpen),
className: "flex items-center gap-2 rounded-full \r\n border border-[oklch(var(--theme-border))] \r\n bg-[oklch(var(--theme-background))] p-1 \r\n text-sm text-[oklch(var(--theme-muted-foreground))] \r\n hover:bg-[oklch(var(--theme-muted))]",
"aria-label": `User menu for ${userData.name}`,
"aria-expanded": isOpen,
"aria-controls": menuId,
"aria-haspopup": "menu",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Avatar, { src: userData.avatar, alt: userData.name, size: "sm" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pr-2", children: userData.name })
]
}
);
return /* @__PURE__ */ jsxRuntimeExports.jsx(
Dropdown,
{
trigger,
isOpen,
onClose: () => setIsOpen(false),
align: "end",
className: "w-64",
id: menuId,
role: "menu",
"aria-label": `${userData.name}'s account menu`,
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-3 space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-b border-[oklch(var(--theme-border))] pb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Avatar, { src: userData.avatar, alt: userData.name, size: "md" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 truncate", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-[oklch(var(--theme-foreground))]", children: userData.name }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "truncate text-sm text-[oklch(var(--theme-muted-foreground))]", children: userData.email })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-1 space-y-1", role: "group", "aria-label": "User actions", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "ghost",
className: "flex w-full items-center gap-3 justify-start rounded-lg px-3 py-2.5 \r\n text-[oklch(var(--theme-muted-foreground))] transition-colors \r\n hover:bg-[oklch(var(--theme-muted))]",
onClick: () => onAction?.("profile"),
role: "menuitem",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "h-5 w-5 text-[oklch(var(--theme-muted-foreground))]", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.75", d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Profile" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "ghost",
className: "flex w-full items-center gap-3 justify-start rounded-lg px-3 py-2.5 \r\n text-[oklch(var(--theme-muted-foreground))] transition-colors \r\n hover:bg-[oklch(var(--theme-muted))]",
onClick: () => onAction?.("settings"),
role: "menuitem",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "h-5 w-5 text-[oklch(var(--theme-muted-foreground))]", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.75", d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.75", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Settings" })
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-t border-[oklch(var(--theme-border))] pt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "ghost",
className: "flex w-full items-center gap-3 justify-start rounded-lg px-3 py-2.5 \r\n text-[oklch(var(--theme-error))] transition-colors \r\n hover:bg-[oklch(var(--theme-error)/0.1)]",
onClick: () => onAction?.("signout"),
role: "menuitem",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.75", d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Sign out" })
]
}
) })
] })
}
);
};
export { UserDropdown };