me/pi-ku
1
0
Fork 0
mirror of https://github.com/ramvignesh-b/pi-ku.git synced 2026-05-04 15:56:56 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: implement reusable Modal component

Browse Source
This commit is contained in:
ramvignesh-b
2026-04-28 22:52:06 +05:30
parent 8b28949d73
commit faee0b45d6
11 changed files with 316 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ui/LogModal.tsx
+19 -34
View File
@@ -1,4 +1,5 @@
import { WarningIcon, XCircleIcon, XIcon } from "@phosphor-icons/react";
import { WarningIcon } from "@phosphor-icons/react";
import { Modal } from "./Modal";
interface LogModalContent {
status: "WARN" | "ERROR" | "RESET" | "SUCCESS";
@@ -15,40 +16,24 @@ export const LogModal = ({
onClose,
status,
}: LogModalContent) => {
return status === "RESET" || !isOpen ? (
<div></div>
) : (
<div className="modal modal-open modal-middle bg-base-100/20 backdrop-blur-md z-100">
<div className="modal-box bg-transparent border-none shadow-none relative">
<div
className={`alert ${status === "WARN" ? "alert-warning" : "alert-error"} flex flex-col items-center text-center gap-6 py-4`}
>
{status === "WARN" && (
<WarningIcon className="text-warning" size={16} weight="bold" />
)}
{status === "ERROR" && (
<XCircleIcon className="text-error" size={16} weight="bold" />
)}
{message}
<div className="divider text-primary-content text-xs uppercase tracking-widest">
Error Stack
</div>
<div className="mockup-code bg-base-100 text-error w-full">
<pre>
<code>{String(log)}</code>
</pre>
</div>
<form method="dialog">
<button
type="button"
onClick={onClose}
className="btn btn-sm btn-circle btn-ghost absolute right-6 top-6"
>
<XIcon size={6} weight="bold" />
</button>
</form>
return (
<Modal isOpen={isOpen && status !== "RESET"} onClose={onClose}>
<div
className={`alert ${status === "WARN" ? "alert-warning" : "alert-error"} flex flex-col items-center text-center gap-6 py-4`}
>
{status === "WARN" && (
<WarningIcon className="text-warning" size={16} weight="duotone" />
)}
{message}
<div className="divider text-primary-content text-xs uppercase tracking-widest">
Error Stack
</div>
<div className="mockup-code bg-base-100 text-error w-full">
<pre>
<code>{String(log)}</code>
</pre>
</div>
</div>
</div>
</Modal>
);
};
frontend/src/components/ui/Modal.tsx
+30
View File
@@ -0,0 +1,30 @@
import { XCircleIcon } from "@phosphor-icons/react";
import type { ReactNode } from "react";
interface ModalProps {
isOpen: boolean;
onClose?: () => void;
children: ReactNode;
}
export function Modal({ isOpen, onClose, children }: ModalProps) {
if (!isOpen) return null;
return (
<div className="modal modal-open modal-middle backdrop-blur-md before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')]">
<div className="modal-box relative bg-base-100/60 flex flex-col items-center text-center gap-6">
{onClose && (
<button
type="button"
className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 z-20"
onClick={onClose}
aria-label="Close"
>
<XCircleIcon size={18} weight="bold" />
</button>
)}
{children}
</div>
</div>
);
}