60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Settings as Gear, X } from 'lucide-react';
|
|
|
|
import CopyButton from '@/components/CopyButton';
|
|
import Switch from '@/components/Switch';
|
|
import { GameUpdate } from '@/types';
|
|
|
|
type PermissionTogglePanelProps = {
|
|
gameData: GameUpdate;
|
|
changeAction: (updatedSettings: GameUpdate) => void;
|
|
};
|
|
|
|
export default function PermissionTogglePanel({
|
|
gameData,
|
|
changeAction,
|
|
}: PermissionTogglePanelProps) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const togglePermission = (key: string) => {
|
|
changeAction({
|
|
...gameData,
|
|
settings: {
|
|
...gameData.settings,
|
|
[key]: !gameData.settings[key],
|
|
},
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="fixed top-4 right-4 z-50">
|
|
{!open && (
|
|
<button
|
|
className="p-2 text-gray-100 hover:text-gray-300 cursor-pointer"
|
|
onClick={() => setOpen((prev) => !prev)}
|
|
>
|
|
<Gear className="w-5 h-5" />
|
|
</button>
|
|
)}
|
|
|
|
{open && (
|
|
<div className="relative text-gray-100 bg-gray-800 shadow-lg rounded-lg border border-gray-500 p-6 space-y-2">
|
|
<button
|
|
className="absolute top-1 right-1 p-1 hover:text-gray-300 cursor-pointer"
|
|
onClick={() => setOpen((prev) => !prev)}
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
<CopyButton title="DM link" copy={`${location.origin}/${gameData.dmID}`} />
|
|
<CopyButton title="Spectator link" copy={`${location.origin}/${gameData.spectatorID}`} />
|
|
{Object.entries(gameData.settings).map(([key, value]) => (
|
|
<Switch label={key} value={value} toggleAction={() => togglePermission(key)} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|