41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
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>
|
||
);
|
||
}
|