mirror of
https://github.com/TheRealOwenRees/chess-scribe-website.git
synced 2026-09-19 11:03:52 +00:00
35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
import { useLichessUser } from "#/context/LichessUserContext.tsx";
|
|
import { useLichess } from "#/hooks/useLichess.ts";
|
|
|
|
const LichessButton = () => {
|
|
const { lichessLogin, lichessLogout } = useLichess();
|
|
const { user } = useLichessUser();
|
|
|
|
const onClickHandler = () => {
|
|
return user ? lichessLogout() : lichessLogin();
|
|
};
|
|
|
|
return (
|
|
<button
|
|
className="w-full text-(--accent) border rounded-xl px-6 py-3 cursor-pointer flex items-center justify-center gap-2 p-2 hover:bg-(--accent) hover:text-(--header-bg) transition-colors duration-300 ease-in-out"
|
|
onClick={onClickHandler}
|
|
type="button"
|
|
>
|
|
<div className="w-6 h-6">
|
|
<svg
|
|
viewBox="0 0 50 50"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="currentColor"
|
|
>
|
|
<title>Lichess Logo</title>
|
|
<path d="M38.956.5c-3.53.418-6.452.902-9.286 2.984C5.534 1.786-.692 18.533.68 29.364 3.493 50.214 31.918 55.785 41.329 41.7c-7.444 7.696-19.276 8.752-28.323 3.084C3.959 39.116-.506 27.392 4.683 17.567 9.873 7.742 18.996 4.535 29.03 6.405c2.43-1.418 5.225-3.22 7.655-3.187l-1.694 4.86 12.752 21.37c-.439 5.654-5.459 6.112-5.459 6.112-.574-1.47-1.634-2.942-4.842-6.036-3.207-3.094-17.465-10.177-15.788-16.207-2.001 6.967 10.311 14.152 14.04 17.663 3.73 3.51 5.426 6.04 5.795 6.756 0 0 9.392-2.504 7.838-8.927L37.4 7.171z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<p>{user ? `Logout ${user.username}` : "Log into Lichess.org"}</p>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default LichessButton;
|