59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import * as React from "react";
|
|
import { X } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type DialogProps = {
|
|
open: boolean;
|
|
title: string;
|
|
description?: string;
|
|
children: React.ReactNode;
|
|
footer?: React.ReactNode;
|
|
onClose: () => void;
|
|
className?: string;
|
|
};
|
|
|
|
export function Dialog({
|
|
open,
|
|
title,
|
|
description,
|
|
children,
|
|
footer,
|
|
onClose,
|
|
className,
|
|
}: DialogProps): React.ReactElement | null {
|
|
if (!open) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-end justify-center bg-black/32 p-3 backdrop-blur-sm sm:items-center">
|
|
<section
|
|
aria-modal="true"
|
|
className={cn(
|
|
"flex max-h-[92svh] w-full max-w-3xl flex-col overflow-hidden rounded-lg border bg-card shadow-xl",
|
|
className,
|
|
)}
|
|
role="dialog"
|
|
>
|
|
<header className="flex shrink-0 items-start justify-between gap-4 border-b p-5">
|
|
<div className="min-w-0">
|
|
<h2 className="text-lg font-semibold">{title}</h2>
|
|
{description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
|
|
</div>
|
|
<button
|
|
aria-label="关闭弹窗"
|
|
className="inline-flex size-10 shrink-0 items-center justify-center rounded-md border bg-background text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
onClick={onClose}
|
|
type="button"
|
|
>
|
|
<X className="size-4" aria-hidden="true" />
|
|
</button>
|
|
</header>
|
|
<div className="min-h-0 flex-1 overflow-y-auto p-5">{children}</div>
|
|
{footer ? <footer className="shrink-0 border-t bg-secondary/35 p-4">{footer}</footer> : null}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|