45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
import { useState } from "react";
|
|
|
|
|
|
interface MadeButtonProps {
|
|
id: number | undefined;
|
|
}
|
|
|
|
export default function MadeButton({ id }: MadeButtonProps) {
|
|
const [clicked, setClicked] = useState<boolean>(false);
|
|
|
|
const clickHandler = () => {
|
|
if (!id || clicked) return;
|
|
|
|
// TODO: Implement actions
|
|
|
|
setClicked(true);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
className={`flex items-center justify-center gap-x-1 rounded-lg border ${clicked ? "border-blue-500 text-blue-500" : "border-gray-300 text-gray-800"} px-6 py-3 flex-grow hover:bg-gray-50 hover:border-blue-300 duration-300 cursor-pointer`}
|
|
onClick={clickHandler}
|
|
>
|
|
<svg
|
|
className="h-6"
|
|
fill="currentColor"
|
|
viewBox="0 -3.84 122.88 122.88"
|
|
version="1.1"
|
|
id="Layer_1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
xmlSpace="preserve"
|
|
>
|
|
<g>
|
|
<path
|
|
d="M29.03,100.46l20.79-25.21l9.51,12.13L41,110.69C33.98,119.61,20.99,110.21,29.03,100.46L29.03,100.46z M53.31,43.05 c1.98-6.46,1.07-11.98-6.37-20.18L28.76,1c-2.58-3.03-8.66,1.42-6.12,5.09L37.18,24c2.75,3.34-2.36,7.76-5.2,4.32L16.94,9.8 c-2.8-3.21-8.59,1.03-5.66,4.7c4.24,5.1,10.8,13.43,15.04,18.53c2.94,2.99-1.53,7.42-4.43,3.69L6.96,18.32 c-2.19-2.38-5.77-0.9-6.72,1.88c-1.02,2.97,1.49,5.14,3.2,7.34L20.1,49.06c5.17,5.99,10.95,9.54,17.67,7.53 c1.03-0.31,2.29-0.94,3.64-1.77l44.76,57.78c2.41,3.11,7.06,3.44,10.08,0.93l0.69-0.57c3.4-2.83,3.95-8,1.04-11.34L50.58,47.16 C51.96,45.62,52.97,44.16,53.31,43.05L53.31,43.05z M65.98,55.65l7.37-8.94C63.87,23.21,99-8.11,116.03,6.29 C136.72,23.8,105.97,66,84.36,55.57l-8.73,11.09L65.98,55.65L65.98,55.65z"
|
|
></path>
|
|
</g>
|
|
</svg>
|
|
Made This!
|
|
</button>
|
|
|
|
);
|
|
}
|