adjustable settings

components/Settings.tsx

@@ -1,41 +1,56 @@
 'use client';
 
 import { useState } from 'react';
-import { Settings as Gear } from 'lucide-react';
+import { Settings as Gear, X } from 'lucide-react';
 
-import { Settings } from '@/types';
+import CopyButton from '@/components/CopyButton';
+import Switch from '@/components/Switch';
+import { GameUpdate } from '@/types';
 
 type PermissionTogglePanelProps = {
-	settings: Settings;
-	changeAction: (updatedSettings: Settings) => void;
+	gameData: GameUpdate;
+	changeAction: (updatedSettings: GameUpdate) => void;
 };
 
 export default function PermissionTogglePanel({
-	settings,
+	gameData,
 	changeAction,
 }: PermissionTogglePanelProps) {
 	const [open, setOpen] = useState(false);
 
 	const togglePermission = (key: string) => {
-		changeAction({ ...settings, [key]: !settings[key] });
+		changeAction({
+			...gameData,
+			settings: {
+				...gameData.settings,
+				[key]: !gameData.settings[key],
+			},
+		});
 	};
 
 	return (
 		<div className="fixed top-4 right-4 z-50">
-			<button
-				className="p-2 rounded-full bg-gray-100 hover:bg-gray-200 shadow"
-				onClick={() => setOpen((prev) => !prev)}
-			>
-				<Gear className="w-5 h-5" />
-			</button>
+			{!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="mt-2 bg-white border border-gray-300 shadow-lg rounded p-4 space-y-2">
-					{Object.entries(settings).map(([key, value]) => (
-						<label key={key} className="flex items-center justify-between">
-							<span className="text-sm capitalize">{key}</span>
-							<input type="checkbox" checked={value} onChange={() => togglePermission(key)} />
-						</label>
+				<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>
 			)}