generated from dwd/boilarplate-remix-tailwind-antd
53 lines
2.3 KiB
TypeScript
53 lines
2.3 KiB
TypeScript
import React, { useState } from "react";
|
|
export default function Counter(){
|
|
const [counte, setCount] = useState(0);
|
|
|
|
const increment = () => {
|
|
setCount(counte + 1)
|
|
}
|
|
const decrement = () => {
|
|
setCount(counte - 1)
|
|
}
|
|
|
|
return(
|
|
<div
|
|
className="flex items-center justify-center h-screen bg-gradient-to-r from-indigo-500
|
|
via-purple-500 to-pink-500">
|
|
<div
|
|
className="bg-white p-10 rounded-3xl shadow-xl transform
|
|
trasnsition duration-500 hover:scale-105">
|
|
<div
|
|
className="text-center text-3xl font-extrabold text-transparent
|
|
bg-clip-text bg-gradient-to-r from-pink-500 to-purple-500 mb-6">
|
|
Counter Machine
|
|
</div>
|
|
<div
|
|
className="flex items-center justify-between space-x-6">
|
|
<button
|
|
onClick={decrement}
|
|
className="w-12 h-12 bg-red-400 text-white rounded-full
|
|
shadow-lg text-2xl font-bold flex items-center justify-center
|
|
transform transition hover:scale-105 hover:bg-red-600 duration-700">
|
|
−
|
|
</button>
|
|
<div
|
|
className="text-4xl font-bold text-white flex justify-center items-center
|
|
w-20 h-20 bg-gradient-to-r from-indigo-300 to-purple-400 rounded-full
|
|
shadow-inner">
|
|
{counte}
|
|
</div>
|
|
<button
|
|
onClick={increment}
|
|
className="w-12 h-12 bg-green-400 text-white rounded-full
|
|
shadow-lg text-2xl font-bold flex items-center
|
|
justify-center transform transition hover:scale-105
|
|
hover:bg-green-600 duration-700">
|
|
+
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
} |