live action

frontend/src/pages/HomePage.tsx

@@ -0,0 +1,40 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card";
+import { Button } from "../components/ui/button";
+import { useLiveCounter } from "../providers/live-provider";
+
+export function HomePage() {
+  const { value, running, startCounter, stopCounter } = useLiveCounter();
+
+  return (
+    <Card className="border-border card-shadow">
+      <CardHeader>
+        <CardTitle>Canlı Sayaç</CardTitle>
+        <CardDescription>
+          Sayaç sunucu tarafından çalışır; başlattıktan sonra diğer sayfalardan anlık izleyebilirsiniz.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center justify-between rounded-md border border-border bg-muted/40 px-4 py-3">
+          <div>
+            <div className="text-sm text-muted-foreground">Durum</div>
+            <div className="text-lg font-semibold text-foreground">
+              {running ? "Çalışıyor" : "Beklemede"}
+            </div>
+          </div>
+          <div className="text-right">
+            <div className="text-sm text-muted-foreground">Değer</div>
+            <div className="text-3xl font-bold text-foreground">{value}</div>
+          </div>
+        </div>
+        <div className="flex gap-3">
+          <Button className="flex-1" onClick={startCounter} disabled={running}>
+            Sayaçı Başlat
+          </Button>
+          <Button className="flex-1" variant="outline" onClick={stopCounter} disabled={!running}>
+            Durdur
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}