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
127 lines (124 loc) • 7.72 kB
JavaScript
import { j as jsxRuntimeExports } from './index46.mjs';
import { useState, useCallback } from 'react';
import { Avatar } from './index4.mjs';
import { Badge } from './index6.mjs';
import { Button } from './index8.mjs';
import { Dropdown } from './index10.mjs';
const NotificationItem = ({ notification, onItemClick }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "flex gap-3 rounded-lg border-b border-[oklch(var(--theme-border))] p-3 px-4.5 py-3 \r\n hover:bg-[oklch(var(--theme-muted))] transition-colors",
role: "menuitem",
onClick: onItemClick,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Avatar, { ...notification.avatar, size: "sm" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mb-1.5 space-x-1 text-theme-sm text-[oklch(var(--theme-muted-foreground))]", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-[oklch(var(--theme-foreground))]", children: notification.userName }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: notification.message }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-[oklch(var(--theme-foreground))]", children: notification.projectName })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-[oklch(var(--theme-muted-foreground))] text-theme-xs", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "light", color: notification.type, size: "sm", children: notification.type }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-1 h-1 bg-[oklch(var(--theme-muted-foreground))] rounded-full", "aria-hidden": "true" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("time", { dateTime: new Date(notification.time).toISOString(), children: notification.time })
] })
] })
]
}
);
function NotificationDropdown({ notifications, onViewAll }) {
const [isOpen, setIsOpen] = useState(false);
const [notifying, setNotifying] = useState(notifications.length > 0);
const closeDropdown = useCallback(() => {
setIsOpen(false);
}, []);
const trigger = /* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => {
setIsOpen((prev) => !prev);
setNotifying(false);
},
className: "relative dropdown-toggle flex items-center justify-center \r\n text-[oklch(var(--theme-muted-foreground))] \r\n bg-[oklch(var(--theme-background))] \r\n border border-[oklch(var(--theme-border))] \r\n rounded-full \r\n hover:text-[oklch(var(--theme-foreground))] \r\n hover:bg-[oklch(var(--theme-muted))] \r\n h-11 w-11 \r\n transition-colors",
"aria-label": `Notifications ${notifications.length > 0 ? `(${notifications.length} unread)` : ""}`,
children: [
notifying && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute right-0 top-0.5 z-10 h-2 w-2 rounded-full bg-[oklch(var(--theme-warning))]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute inline-flex w-full h-full bg-[oklch(var(--theme-warning))] rounded-full opacity-75 animate-ping" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "fill-current", width: "20", height: "20", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M10.75 2.29248C10.75 1.87827 10.4143 1.54248 10 1.54248C9.58583 1.54248 9.25004 1.87827 9.25004 2.29248V2.83613C6.08266 3.20733 3.62504 5.9004 3.62504 9.16748V14.4591H3.33337C2.91916 14.4591 2.58337 14.7949 2.58337 15.2091C2.58337 15.6234 2.91916 15.9591 3.33337 15.9591H4.37504H15.625H16.6667C17.0809 15.9591 17.4167 15.6234 17.4167 15.2091C17.4167 14.7949 17.0809 14.4591 16.6667 14.4591H16.375V9.16748C16.375 5.9004 13.9174 3.20733 10.75 2.83613V2.29248ZM14.875 14.4591V9.16748C14.875 6.47509 12.6924 4.29248 10 4.29248C7.30765 4.29248 5.12504 6.47509 5.12504 9.16748V14.4591H14.875ZM8.00004 17.7085C8.00004 18.1228 8.33583 18.4585 8.75004 18.4585H11.25C11.6643 18.4585 12 18.1228 12 17.7085C12 17.2943 11.6643 16.9585 11.25 16.9585H8.75004C8.33583 16.9585 8.00004 17.2943 8.00004 17.7085Z"
}
) })
]
}
);
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
Dropdown,
{
trigger,
isOpen,
onClose: closeDropdown,
className: "fixed right-4 top-16 z-50 flex h-[480px] w-[350px] flex-col rounded-xl \r\n border border-[oklch(var(--theme-border))] \r\n bg-[oklch(var(--theme-background))] \r\n p-4 shadow-md\r\n sm:absolute sm:right-0 sm:top-full sm:mt-2 sm:w-[400px]",
role: "dialog",
"aria-modal": true,
"aria-label": "Notifications panel",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between pb-3 mb-3 \r\n border-b border-[oklch(var(--theme-border))]", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "text-lg font-semibold text-[oklch(var(--theme-foreground))]", children: [
"Notifications (",
notifications.length,
")"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: closeDropdown,
className: "text-[oklch(var(--theme-muted-foreground)] \r\n hover:text-[oklch(var(--theme-foreground))]",
"aria-label": "Close notifications",
children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "fill-current", width: "24", height: "24", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6.21967 7.28131C5.92678 6.98841 5.92678 6.51354 6.21967 6.22065C6.51256 5.92775 6.98744 5.92775 7.28033 6.22065L11.999 10.9393L16.7176 6.22078C17.0105 5.92789 17.4854 5.92788 17.7782 6.22078C18.0711 6.51367 18.0711 6.98855 17.7782 7.28144L13.0597 12L17.7782 16.7186C18.0711 17.0115 18.0711 17.4863 17.7782 17.7792C17.4854 18.0721 17.0105 18.0721 16.7176 17.7792L11.999 13.0607L7.28033 17.7794C6.98744 18.0722 6.51256 18.0722 6.21967 17.7794C5.92678 17.4865 5.92678 17.0116 6.21967 16.7187L10.9384 12L6.21967 7.28131Z"
}
) })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"ul",
{
className: "flex flex-col h-auto overflow-y-auto custom-scrollbar",
role: "menu",
"aria-labelledby": "notification-title",
children: notifications.map((notification) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { role: "none", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
NotificationItem,
{
notification,
onItemClick: closeDropdown
}
) }, notification.id))
}
),
notifications.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
size: "sm",
className: "mt-3 w-full",
onClick: () => {
closeDropdown();
onViewAll?.();
},
children: "View All Notifications"
}
)
]
}
);
}
export { NotificationDropdown };