dwd-projects
/
bs-p2
generated from dwd/boilarplate-remix-tailwind-antd
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

s1

b2
Suvodip 2024-12-03 19:13:56 +05:30
parent bcae7c673f
commit 565a018430
2 changed files with 93 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
app/routes/test.tsx Normal file
View File

@ -0,0 +1,53 @@
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">
&#8722;
</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">
&#43;
</button>
</div>
</div>
</div>
)
}

40
app/routes/test3.tsx Normal file
View File

@ -0,0 +1,40 @@
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>
);
}