generated from dwd/boilarplate-remix-tailwind-antd
41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
|
|
export default function Counter() {
|
|
const [count, setCount] = useState(0);
|
|
|
|
const increment = () => {
|
|
setCount(count + 1);
|
|
};
|
|
|
|
const decrement = () => {
|
|
setCount(count - 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 transition 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">
|
|
Creative Counter
|
|
</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-125 hover:bg-red-600 duration-300"
|
|
>
|
|
-
|
|
</button>
|
|
<div className="text-4xl font-semibold 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">
|
|
{count}
|
|
</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-125 hover:bg-green-600 duration-300"
|
|
>
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|