timer components

packages/frontend/src/components/timer-modal.tsx

@@ -0,0 +1,23 @@
+import { Timer } from "lucide-react";
+import { useState } from "react";
+import { IssueTimer } from "@/components/issue-timer";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+
+export function TimerModal({ issueId }: { issueId: number }) {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                <Button variant="outline" size="sm">
+                    <Timer className="size-4" />
+                    Timer
+                </Button>
+            </DialogTrigger>
+            <DialogContent className="w-xs" showCloseButton={false}>
+                <IssueTimer issueId={issueId} onEnd={() => setOpen(false)} />
+            </DialogContent>
+        </Dialog>
+    );
+}