add route to cards

taskncoffee-app/src/App.jsx

@@ -23,7 +23,8 @@ function App() {
       <Route path="/dashboard" element={
         <Dashboard />
       } />
-      <Route path="/card" element={
+      <Route path="/card" element={<TaskButton />} />
+      <Route path="/card/:id" element={
         <TaskButton />
       } />
       <Route path="*" element={<Navigate to="/auth/login" replace />} />

taskncoffee-app/src/components/Card.jsx

@@ -1,14 +1,30 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
+import { useNavigate, useLocation } from 'react-router'
 import styles from '@/lib/styles'
 import { cn } from '@/lib/utils'
 import { X } from 'lucide-react'
 
 
 export function TaskButton({ taskData }) {
+    const navigate = useNavigate()
+    const location = useLocation()
     const [isModalOpen, setIsModalOpen] = useState(false)
 
-    const openModal = () => setIsModalOpen(true)
+    const taskId = taskData?.id || 1
-    const closeModal = () => setIsModalOpen(false)
+
+    // Проверяем, открыта ли карточка по URL
+    useEffect(() => {
+        const isCardRoute = location.pathname === `/card/${taskId}`
+        setIsModalOpen(isCardRoute)
+    }, [location.pathname, taskId])
+
+    const openModal = () => {
+        navigate(`/card/${taskId}`)
+    }
+
+    const closeModal = () => {
+        navigate(-1) // Возвращаемся на предыдущую страницу
+    }
 
     return (
         <>
@@ -28,19 +44,7 @@ export function TaskButton({ taskData }) {
                     className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
                     onClick={closeModal}
                 >
-                    <div
+                    <div onClick={(e) => e.stopPropagation()}>
-                        className="relative w-fit h-fit"
-                        onClick={(e) => e.stopPropagation()}
-                    >
-                        {/* Кнопка закрытия */}
-                        <button
-                            onClick={closeModal}
-                            className="absolute -top-4 -right-4 z-10 bg-red-500 hover:bg-red-600 text-white rounded-full p-2 transition-colors"
-                            aria-label="Close modal"
-                        >
-                            <X size={20} />
-                        </button>
-
                         <CardComponent
                             status={taskData?.status}
                             time_spent={taskData?.time_spent}