80 lines
2.9 KiB
TypeScript
80 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Hash, Plus, Minus, RotateCcw } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
export default function CounterPage() {
|
|
const [count, setCount] = useState(0);
|
|
const [step, setStep] = useState(1);
|
|
|
|
return (
|
|
<div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
|
<div className="flex items-center space-x-4 border-b pb-4">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-linear-to-br from-zinc-500 to-slate-600 shadow-lg">
|
|
<Hash className="h-6 w-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-bold tracking-tight">计数器</h1>
|
|
<p className="text-muted-foreground">简单的数值计数工具</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-6 max-w-md mx-auto">
|
|
<Card className="text-center">
|
|
<CardHeader>
|
|
<CardTitle>当前数值</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-8">
|
|
<div className="text-8xl font-bold tracking-tighter tabular-nums text-primary transition-all duration-200 scale-100 hover:scale-105">
|
|
{count}
|
|
</div>
|
|
|
|
<div className="flex justify-center gap-4">
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
onClick={() => setCount(prev => prev - step)}
|
|
className="h-16 w-16 rounded-full border-2"
|
|
>
|
|
<Minus className="h-8 w-8" />
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="default"
|
|
onClick={() => setCount(prev => prev + step)}
|
|
className="h-16 w-16 rounded-full shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all"
|
|
>
|
|
<Plus className="h-8 w-8" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center gap-4 pt-4 border-t">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm text-muted-foreground">步长:</span>
|
|
<Input
|
|
type="number"
|
|
value={step}
|
|
onChange={(e) => setStep(Number(e.target.value) || 1)}
|
|
className="w-20 text-center h-8"
|
|
/>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setCount(0)}
|
|
className="text-muted-foreground hover:text-destructive"
|
|
>
|
|
<RotateCcw className="h-4 w-4 mr-1" />
|
|
重置
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|