Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(timesheet): add tags management and responsive time tracking flows

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-04-24 22:23:50 +03:30
parent c4d8379924
commit 987d2e2b59
13 changed files with 3710 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/Modal.tsx
View File

@@ -3,24 +3,26 @@ import { X } from "lucide-react";
import { Card } from "./ui/card";
import { Button } from "./ui/button";
interface ModalProps {
isOpen: boolean;
onClose: () => void;
title: string;
children: React.ReactNode;
footer?: React.ReactNode;
maxWidth?: string;
isFa?: boolean;
}
interface ModalProps {
isOpen: boolean;
onClose: () => void;
title: string;
children: React.ReactNode;
description?: React.ReactNode;
footer?: React.ReactNode;
maxWidth?: string;
isFa?: boolean;
}
export const Modal: React.FC<ModalProps> = ({
isOpen,
onClose,
title,
children,
footer,
maxWidth = "max-w-lg",
}) => {
title,
children,
description,
footer,
maxWidth = "max-w-lg",
}) => {
useEffect(() => {
if (isOpen) {
document.body.style.overflow = "hidden";
@@ -34,16 +36,16 @@ export const Modal: React.FC<ModalProps> = ({
if (!isOpen) return null;
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
onClick={onClose}
>
<Card
className={`w-full ${maxWidth} bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-0 shadow-xl overflow-hidden rounded-2xl`}
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-center justify-between p-4 border-b border-slate-200 dark:border-slate-800 shrink-0">
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
onClick={onClose}
>
<Card
className={`flex max-h-[calc(100vh-2rem)] w-full flex-col ${maxWidth} bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-0 shadow-xl overflow-hidden rounded-2xl`}
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-center justify-between p-4 border-b border-slate-200 dark:border-slate-800 shrink-0">
<h2 className="text-lg font-semibold text-slate-800 dark:text-slate-100">
{title}
</h2>
@@ -58,14 +60,21 @@ export const Modal: React.FC<ModalProps> = ({
</Button>
</div>
<div className="flex-1 overflow-y-auto p-5">{children}</div>
{footer && (
<div className="p-4 border-t border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/50 shrink-0 flex justify-end gap-3">
{footer}
</div>
)}
</Card>
</div>
);
<div className="flex-1 overflow-y-auto overscroll-contain p-4 md:p-5">
{description && (
<p className="mb-4 text-sm text-slate-600 dark:text-slate-400">{description}</p>
)}
{children}
</div>
{footer && (
<div className="shrink-0 border-t border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-800/50">
<div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
{footer}
</div>
</div>
)}
</Card>
</div>
);
};