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
116 lines (113 loc) • 4.65 kB
JavaScript
import { j as jsxRuntimeExports } from './index46.mjs';
import { FiArrowRight, FiInfo, FiAlertCircle, FiXCircle, FiCheckCircle } from './index47.mjs';
import { Button } from './index8.mjs';
const Alert = ({
variant,
title,
message,
showLink = false,
linkHref = "#",
linkText = "Learn more",
onClose,
className = "",
id = `alert-${Math.random().toString(36).substr(2, 9)}`
}) => {
const variantClasses = {
success: {
container: "bg-[oklch(var(--theme-success)/0.1)] border-[oklch(var(--theme-success)/0.2)]",
icon: "text-[oklch(var(--theme-success))]",
title: "text-[oklch(var(--theme-success)/0.9)]",
text: "text-[oklch(var(--theme-success)/0.8)]",
link: "text-[oklch(var(--theme-success))] hover:text-[oklch(var(--theme-success)/0.8)] underline"
},
error: {
container: "bg-[oklch(var(--theme-error)/0.1)] border-[oklch(var(--theme-error)/0.2)]",
icon: "text-[oklch(var(--theme-error))]",
title: "text-[oklch(var(--theme-error)/0.9)]",
text: "text-[oklch(var(--theme-error)/0.8)]",
link: "text-[oklch(var(--theme-error))] hover:text-[oklch(var(--theme-error)/0.8)] underline"
},
warning: {
container: "bg-[oklch(var(--theme-warning)/0.1)] border-[oklch(var(--theme-warning)/0.2)]",
icon: "text-[oklch(var(--theme-warning))]",
title: "text-[oklch(var(--theme-warning)/0.9)]",
text: "text-[oklch(var(--theme-warning)/0.8)]",
link: "text-[oklch(var(--theme-warning))] hover:text-[oklch(var(--theme-warning)/0.8)] underline"
},
info: {
container: "bg-[oklch(var(--theme-info)/0.1)] border-[oklch(var(--theme-info)/0.2)]",
icon: "text-[oklch(var(--theme-info))]",
title: "text-[oklch(var(--theme-info)/0.9)]",
text: "text-[oklch(var(--theme-info)/0.8)]",
link: "text-[oklch(var(--theme-info))] hover:text-[oklch(var(--theme-info)/0.8)] underline"
}
};
const icons = {
success: /* @__PURE__ */ jsxRuntimeExports.jsx(FiCheckCircle, { className: "w-5 h-5" }),
error: /* @__PURE__ */ jsxRuntimeExports.jsx(FiXCircle, { className: "w-5 h-5" }),
warning: /* @__PURE__ */ jsxRuntimeExports.jsx(FiAlertCircle, { className: "w-5 h-5" }),
info: /* @__PURE__ */ jsxRuntimeExports.jsx(FiInfo, { className: "w-5 h-5" })
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: `rounded-lg border p-4 ${variantClasses[variant].container} ${className}`,
role: "alert",
"aria-labelledby": `${id}-title`,
"aria-describedby": `${id}-message`,
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: variantClasses[variant].icon, "aria-hidden": "true", children: icons[variant] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"h4",
{
id: `${id}-title`,
className: `text-sm font-semibold ${variantClasses[variant].title}`,
children: title
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"p",
{
id: `${id}-message`,
className: `mt-1 text-sm ${variantClasses[variant].text}`,
children: message
}
),
showLink && /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
tag: "a",
href: linkHref,
variant: "ghost",
size: "sm",
className: "mt-2 p-0 hover:underline",
endIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(FiArrowRight, { className: "ml-1" }),
children: linkText
}
)
] }),
onClose && /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: onClose,
className: `${variantClasses[variant].text} hover:opacity-70 p-1 rounded-lg`,
"aria-label": `Close ${title} alert`,
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"svg",
{
className: "h-5 w-5",
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor",
"aria-hidden": "true",
children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })
}
)
}
)
] })
}
);
};
export { Alert };