[frontend] use shadcn

2025-10-12 03:29:23 +02:00
parent 1e812c93a6
commit 01b84042ab
45 changed files with 2525 additions and 2137 deletions
@@ -0,0 +1,69 @@
+import { Flame, MapPin } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+interface HotspotCellInfo {
+  id: string;
+  title: string;
+  subtitle: string;
+  intensity: number;
+  onFocus: () => void;
+}
+
+interface HotspotStatsPanelProps {
+  hasLocation: boolean;
+  radiusKm: number;
+  locationHint: string;
+  cells: HotspotCellInfo[];
+}
+
+export function HotspotStatsPanel({ hasLocation, radiusKm, locationHint, cells }: HotspotStatsPanelProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Card className="h-full">
+      <CardHeader className="space-y-1">
+        <CardTitle className="flex items-center gap-2">
+          <Flame className="h-5 w-5 text-primary" />
+          {t("hotspots.title")}
+        </CardTitle>
+        <CardDescription>{t("hotspots.description", { radius: radiusKm })}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {!hasLocation && <p className="text-sm text-muted-foreground">{locationHint}</p>}
+        {hasLocation && cells.length === 0 && <p className="text-sm text-muted-foreground">{t("hotspots.empty")}</p>}
+        {cells.length > 0 && (
+          <ScrollArea className="max-h-[280px] pr-2">
+            <ul className="space-y-3">
+              {cells.map(cell => (
+                <li key={cell.id} className="rounded-2xl border border-border/60 bg-muted/50 p-3">
+                  <div className="flex items-center justify-between gap-3">
+                    <div className="flex flex-col">
+                      <span className="text-sm font-semibold text-foreground">{cell.title}</span>
+                      <span className="text-xs text-muted-foreground">{cell.subtitle}</span>
+                    </div>
+                    <Badge variant="outline" className="border-primary/40 text-xs text-primary">
+                      {cell.intensity.toFixed(1)}
+                    </Badge>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="mt-2 w-full justify-center gap-2 text-xs"
+                    onClick={cell.onFocus}
+                  >
+                    <MapPin className="h-3.5 w-3.5" /> {t("hotspots.focus")}
+                  </Button>
+                </li>
+              ))}
+            </ul>
+          </ScrollArea>
+        )}
+      </CardContent>
+    </Card>
+  );
+}