57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Settings as Gear } from 'lucide-react';
|
|
import { Cinzel_Decorative } from 'next/font/google';
|
|
|
|
import { useAppContext } from '@/app/AppContext';
|
|
import Scrim from '@/components/Scrim';
|
|
|
|
import CardStyle from './CardStyle';
|
|
import ExternalLinks from './ExternalLinks';
|
|
import GameLinks from './GameLinks';
|
|
import Permissions from './Permissions';
|
|
|
|
const cinzel = Cinzel_Decorative({
|
|
variable: '--font-cinzel',
|
|
subsets: ['latin'],
|
|
weight: '400',
|
|
});
|
|
|
|
export default function Settings() {
|
|
const [open, setOpen] = useState(false);
|
|
const { isDM } = useAppContext();
|
|
|
|
return (
|
|
<div className={`fixed top-4 right-4 z-25 ${cinzel.className}`}>
|
|
<Scrim
|
|
clickAction={() => setOpen((prev) => !prev)}
|
|
className={`transition-all duration-250 ${open ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
|
|
>
|
|
<div
|
|
className={`
|
|
fixed top-4 right-4
|
|
flex flex-col items-center justify-evenly
|
|
bg-slate-800 text-yellow-400
|
|
rounded-lg border border-yellow-400
|
|
h-full py-3 px-4
|
|
transition-all duration-250
|
|
${open ? `opacity-100 ${isDM ? 'w-[350px] max-h-[375px]' : 'w-[300px] max-h-[175px]'}` : 'opacity-0 w-0 max-h-0'}
|
|
`}
|
|
>
|
|
<GameLinks />
|
|
<Permissions />
|
|
<CardStyle />
|
|
<ExternalLinks />
|
|
</div>
|
|
</Scrim>
|
|
<button
|
|
className={`p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer ${open ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
|
|
onClick={() => setOpen((prev) => !prev)}
|
|
>
|
|
<Gear className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|