61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
"use client";
|
||
import React from "react";
|
||
import { useState } from "react";
|
||
|
||
type LoginOptionProps = {
|
||
onClick?: () => void;
|
||
className?: string;
|
||
loginErrorModalEnabled?: boolean;
|
||
setLoginErrorModalEnabled?: (enabled: boolean) => void;
|
||
};
|
||
|
||
export default function LoginOption({
|
||
className,
|
||
loginErrorModalEnabled,
|
||
setLoginErrorModalEnabled,
|
||
}: LoginOptionProps) {
|
||
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
|
||
|
||
return (
|
||
<div>
|
||
<button
|
||
type="button"
|
||
onClick={() => setIsOpen(!isOpen)}
|
||
className={`fixed bottom-2 right-2 bg-red-400 cursor-pointer rounded-full w-[40px] h-[40px] shadow-xl z-100`}
|
||
>
|
||
</button>
|
||
{isOpen && (
|
||
<div className="fixed inset-0 flex items-center justify-center z-50">
|
||
<div className="w-[500px] h-[600px] flex bg-white/80 p-10 border rounded-lg relative">
|
||
<button
|
||
type="button"
|
||
aria-label="닫기"
|
||
onClick={() => setIsOpen(false)}
|
||
className="absolute top-3 right-3 inline-flex items-center justify-center rounded-full w-8 h-8 bg-gray-200 hover:bg-gray-300 text-gray-700"
|
||
>
|
||
×
|
||
</button>
|
||
<ul className="flex flex-col gap-4">
|
||
<li className="flex items-center justify-between">
|
||
<p className="mr-4">login error modal</p>
|
||
<button
|
||
type="button"
|
||
aria-label="login error modal 토글"
|
||
aria-pressed={!!loginErrorModalEnabled}
|
||
onClick={() => setLoginErrorModalEnabled?.(!loginErrorModalEnabled)}
|
||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${loginErrorModalEnabled ? 'bg-blue-600' : 'bg-gray-300'}`}
|
||
>
|
||
<span
|
||
className={`inline-block h-5 w-5 transform rounded-full bg-white transition ${loginErrorModalEnabled ? 'translate-x-5' : 'translate-x-1'}`}
|
||
/>
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
} |