feat: created competitions page model

2026-05-23 19:07:10 +00:00 · 2025-03-01 14:29:12 +09:00
parent 6a993ce6ba
commit 9362ee30a9
34 changed files with 928 additions and 6 deletions
@@ -0,0 +1,46 @@
+import { Competition } from "../../types";
+import { cn } from "@/shared/lib/utils";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+} from "@/components/ui/card";
+
+interface CompetitionCardProps {
+  competition: Competition;
+  className?: string;
+}
+
+export function CompetitionCard({ competition, className }: CompetitionCardProps) {
+  const { name, imageUrl, isOlympics, status } = competition;
+
+  return (
+    <Card className={cn("overflow-hidden h-full", className)}>
+      <div className="relative h-48 overflow-hidden">
+        <img 
+          src={imageUrl} 
+          alt={name}
+          className="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
+        />
+      </div>
+      
+      <CardFooter className="p-4 pb-0 flex items-center text-xs font-medium font-hse-sans">
+        <span className="text-gray-500">
+          {isOlympics ? "Олимпиада" : "Тренировка"}
+        </span>
+        <span className="mx-2 w-1.5 h-1.5 rounded-full bg-gray-300"></span>
+        <span className={cn(
+          status === 'В процессе' && "text-yellow-500",
+          status === 'Завершено' && "text-green-500",
+          status === 'Не участвую' && "text-gray-500"
+        )}>
+          {status.replace(/^\w/, c => c.toUpperCase())}
+        </span>
+      </CardFooter>
+      
+      <CardContent className="p-4 pt-2">
+        <h3 className="font-semibold text-lg line-clamp-2 font-hse-sans">{name}</h3>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,20 @@
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const CompetitionSkeleton = () => {
+  return (
+    <Card className="overflow-hidden">
+      <Skeleton className="h-48 w-full" />
+      <CardContent className="p-4 pt-5">
+        <Skeleton className="h-6 w-3/4 mb-2" />
+        <Skeleton className="h-6 w-1/2" />
+      </CardContent>
+      <CardFooter className="p-4 pt-0 flex gap-2">
+        <Skeleton className="h-6 w-20" />
+        <Skeleton className="h-6 w-24" />
+      </CardFooter>
+    </Card>
+  );
+}
+
+export default CompetitionSkeleton
@@ -0,0 +1,26 @@
+import { cn } from "@/shared/lib/utils";
+import { Badge } from "@/components/ui/badge";
+
+interface CompetitionTagProps {
+  label: string;
+  variant: 'olympics' | 'status';
+  className?: string;
+}
+
+const CompetitionTag = ({ label, variant, className }: CompetitionTagProps) => {
+  return (
+    <Badge 
+      variant="secondary"
+      className={cn(
+        "text-xs font-medium",
+        variant === 'olympics' && "bg-yellow-400 text-yellow-800 hover:bg-yellow-500 font-hse-sans",
+        variant === 'status' && "bg-black text-white hover:bg-gray-800 font-hse-sans",
+        className 
+      )}
+    >
+      {label}
+    </Badge>
+  );
+}
+
+export default CompetitionTag