remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add view transitions, smooth scroll, bundle analyzer, SSE radio stream, and AnimatePresence animations
Local Build and Deploy / deploy (push) Successful in 1m24s
Details

Browse Source
This commit is contained in:
openhands committed 2026-07-20 14:06:43 +02:00
1 parent 57c3fe601a
commit f53d25e0a5
11 files changed
+519 -229
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/admin/confirm-dialog.tsx
+74 -50
View File
@@ -1,9 +1,11 @@
"use client";
import { AnimatePresence, motion } from "framer-motion";
import { useCallback, useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { modalContentVariants, modalOverlayVariants } from "@/lib/motion";
export type ConfirmDialogProps = {
open: boolean;
@@ -57,61 +59,83 @@ export function ConfirmDialog({
}
}
if (!open || !mounted) return null;
if (!mounted) return null;
const isOpen = open;
return createPortal(
<div className="fixed inset-0 z-[200] flex items-center justify-center p-4">
<button
type="button"
aria-label="Dismiss"
className="absolute inset-0 bg-black/50"
disabled={isLoading}
onClick={() => {
if (!isLoading) onOpenChange(false);
}}
/>
<div
role="alertdialog"
aria-modal="true"
aria-labelledby="confirm-dialog-title"
aria-describedby="confirm-dialog-desc"
className="relative z-10 w-full max-w-md rounded-lg border bg-card p-6 text-card-foreground shadow-lg"
>
<div className="flex flex-col gap-2 text-left">
<h2
id="confirm-dialog-title"
className="text-lg font-semibold leading-none"
>
{title}
</h2>
<p id="confirm-dialog-desc" className="text-sm text-muted-foreground">
{description}
</p>
</div>
<div className="mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
<Button
<AnimatePresence>
{isOpen ? (
<motion.div
key="confirm-overlay"
className="fixed inset-0 z-[200] flex items-center justify-center p-4"
variants={modalOverlayVariants}
initial="hidden"
animate="visible"
exit="exit"
>
<button
type="button"
variant="outline"
aria-label="Dismiss"
className="absolute inset-0 bg-black/50"
disabled={isLoading}
onClick={() => onOpenChange(false)}
onClick={() => {
if (!isLoading) onOpenChange(false);
}}
/>
<motion.div
key="confirm-content"
role="alertdialog"
aria-modal="true"
aria-labelledby="confirm-dialog-title"
aria-describedby="confirm-dialog-desc"
className="relative z-10 w-full max-w-md rounded-lg border bg-card p-6 text-card-foreground shadow-lg"
variants={modalContentVariants}
initial="hidden"
animate="visible"
exit="exit"
>
{cancelLabel}
</Button>
<Button
type="button"
variant={variant === "danger" ? "destructive" : "default"}
disabled={isLoading}
onClick={handleConfirm}
className={cn(
variant === "danger" && "bg-destructive text-destructive-foreground",
)}
autoFocus
>
{confirmLabel}
</Button>
</div>
</div>
</div>,
<div className="flex flex-col gap-2 text-left">
<h2
id="confirm-dialog-title"
className="text-lg font-semibold leading-none"
>
{title}
</h2>
<p
id="confirm-dialog-desc"
className="text-sm text-muted-foreground"
>
{description}
</p>
</div>
<div className="mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
<Button
type="button"
variant="outline"
disabled={isLoading}
onClick={() => onOpenChange(false)}
>
{cancelLabel}
</Button>
<Button
type="button"
variant={variant === "danger" ? "destructive" : "default"}
disabled={isLoading}
onClick={handleConfirm}
className={cn(
variant === "danger" &&
"bg-destructive text-destructive-foreground",
)}
autoFocus
>
{confirmLabel}
</Button>
</div>
</motion.div>
</motion.div>
) : null}
</AnimatePresence>,
document.body,
);
}