61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { AlertCircle, CheckCircle2, Info, X } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export type InlineAlertType = "error" | "success" | "warning" | "info";
|
|
|
|
export interface InlineAlertProps {
|
|
type: InlineAlertType;
|
|
message: string;
|
|
title?: string;
|
|
onDismiss?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
const tone: Record<InlineAlertType, string> = {
|
|
error: "border-danger-border bg-danger-bg text-danger",
|
|
success: "border-success-border bg-success-bg text-success",
|
|
warning: "border-warning-border bg-warning-bg text-warning",
|
|
info: "border-border bg-muted/60 text-foreground",
|
|
};
|
|
|
|
const icons: Record<InlineAlertType, typeof AlertCircle> = {
|
|
error: AlertCircle,
|
|
success: CheckCircle2,
|
|
warning: AlertCircle,
|
|
info: Info,
|
|
};
|
|
|
|
export function InlineAlert({ type, message, title, onDismiss, className }: InlineAlertProps) {
|
|
const Icon = icons[type];
|
|
return (
|
|
<div
|
|
role="alert"
|
|
className={cn(
|
|
"flex items-start gap-2.5 rounded-lg border px-3 py-2.5 text-[13px] leading-relaxed",
|
|
tone[type],
|
|
className
|
|
)}
|
|
>
|
|
<Icon className="mt-0.5 h-4 w-4 shrink-0" />
|
|
<div className="min-w-0 flex-1">
|
|
{title && <p className="font-medium">{title}</p>}
|
|
<p className={title ? "mt-0.5 opacity-90" : undefined}>{message}</p>
|
|
</div>
|
|
{onDismiss && (
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant="ghost"
|
|
className="h-7 w-7 shrink-0 p-0 opacity-70 hover:opacity-100"
|
|
onClick={onDismiss}
|
|
aria-label="關閉"
|
|
>
|
|
<X className="h-3.5 w-3.5" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
} |