feat: started adding timers support for events

services/frontend/src/pages/Competitions/components/CompetitionCard/index.tsx

@@ -5,6 +5,7 @@ import {
   CompetitionState,
   CompetitionType,
 } from "@/shared/types/competition";
+import { Clock } from "lucide-react";
 
 interface CompetitionCardProps {
   competition: Competition;
@@ -15,6 +16,20 @@ export function CompetitionCard({
   competition,
   className,
 }: CompetitionCardProps) {
+  const formatDate = (date?: Date) => {
+    if (!date) return "";
+    
+    const dateObj = typeof date === 'string' ? new Date(date) : date;
+    
+    return dateObj.toLocaleString('ru-RU', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
   return (
     <Card
       className={cn("aspect-square h-full w-auto overflow-hidden", className)}
@@ -27,7 +42,7 @@ export function CompetitionCard({
         />
       </div>
 
-      <CardContent>
+      <CardContent className="p-4">
         <div className="flex flex-col gap-2.5">
           <div className="text-muted-foreground flex items-center gap-2 *:text-sm *:font-semibold">
             <span>
@@ -46,11 +61,30 @@ export function CompetitionCard({
               </>
             )}
           </div>
+          
           <h3 className="line-clamp-2 text-xl font-semibold">
             {competition.title}
           </h3>
+          
+          {competition.type === CompetitionType.COMPETITIVE && (
+            <div className="text-gray-500 text-sm mt-1">
+              {competition.start_date && (
+                <div className="flex items-center gap-1.5">
+                  <Clock size={14} />
+                  <span>Начало: {formatDate(competition.start_date)}</span>
+                </div>
+              )}
+              
+              {competition.end_date && (
+                <div className="flex items-center gap-1.5 mt-1">
+                  <Clock size={14} />
+                  <span>Конец: {formatDate(competition.end_date)}</span>
+                </div>
+              )}
+            </div>
+          )}
         </div>
       </CardContent>
     </Card>
   );
-}
+}