218 lines
8.0 KiB
TypeScript
218 lines
8.0 KiB
TypeScript
"use client";
|
|
|
|
import React from 'react';
|
|
import { OverlaySettings } from '@/lib/types';
|
|
import SupportModule from './SupportModule';
|
|
|
|
interface StyleControlsProps {
|
|
settings: OverlaySettings;
|
|
updateSettings: (newSettings: Partial<OverlaySettings>) => void;
|
|
}
|
|
|
|
export default function StyleControls({ settings, updateSettings }: StyleControlsProps) {
|
|
const [copySuccess, setCopySuccess] = React.useState(false);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
|
const { name, value, type } = e.target;
|
|
let newValue: string | number | boolean = value;
|
|
|
|
if (type === 'range') {
|
|
newValue = parseFloat(value);
|
|
} else if (type === 'checkbox') {
|
|
newValue = (e.target as HTMLInputElement).checked;
|
|
}
|
|
|
|
updateSettings({ [name]: newValue });
|
|
};
|
|
|
|
const handleEmoteChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { name, checked } = e.target;
|
|
updateSettings({
|
|
emotes: {
|
|
...settings.emotes,
|
|
[name]: checked,
|
|
},
|
|
});
|
|
};
|
|
|
|
const copyLink = () => {
|
|
// Mock token for now
|
|
const url = `${window.location.origin}/overlay/mock-token`;
|
|
navigator.clipboard.writeText(url);
|
|
setCopySuccess(true);
|
|
setTimeout(() => setCopySuccess(false), 2000);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6 p-6 bg-white dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-800 h-full overflow-y-auto w-80 shrink-0">
|
|
|
|
{/* Copy Link Section */}
|
|
<div className="p-4 bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-100 dark:border-indigo-800 rounded-lg">
|
|
<h3 className="text-xs font-semibold text-indigo-900 dark:text-indigo-200 uppercase tracking-wider mb-2">Overlay URL</h3>
|
|
<div className="flex gap-2">
|
|
<input
|
|
readOnly
|
|
value="/overlay/..."
|
|
className="flex-1 min-w-0 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded text-xs px-2 py-1 text-zinc-500"
|
|
/>
|
|
<button
|
|
onClick={copyLink}
|
|
className="bg-indigo-600 hover:bg-indigo-700 text-white text-xs px-3 py-1 rounded transition-colors"
|
|
>
|
|
{copySuccess ? 'Copied!' : 'Copy'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<h2 className="text-xl font-bold text-zinc-900 dark:text-white">Style Editor</h2>
|
|
<p className="text-xs text-zinc-500">Customize your chat appearance</p>
|
|
</div>
|
|
|
|
{/* Resolution */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Base Resolution</label>
|
|
<select
|
|
name="resolution"
|
|
value={settings.resolution}
|
|
onChange={handleChange}
|
|
className="w-full p-2 border rounded-md bg-zinc-50 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white"
|
|
>
|
|
<option value="720p">720p (HD)</option>
|
|
<option value="1080p">1080p (Full HD)</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Font Family */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Font Family</label>
|
|
<select
|
|
name="fontFamily"
|
|
value={settings.fontFamily}
|
|
onChange={handleChange}
|
|
className="w-full p-2 border rounded-md bg-zinc-50 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white"
|
|
>
|
|
<option value="Inter, sans-serif">Inter</option>
|
|
<option value="Roboto, sans-serif">Roboto</option>
|
|
<option value="'Open Sans', sans-serif">Open Sans</option>
|
|
<option value="Lato, sans-serif">Lato</option>
|
|
<option value="Montserrat, sans-serif">Montserrat</option>
|
|
<option value="'Press Start 2P', cursive">Pixel Art</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Font Size */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Font Size</label>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="text"
|
|
name="fontSize"
|
|
value={settings.fontSize}
|
|
onChange={handleChange}
|
|
className="w-full p-2 border rounded-md bg-zinc-50 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Text Color */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Text Color</label>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="color"
|
|
name="textColor"
|
|
value={settings.textColor}
|
|
onChange={handleChange}
|
|
className="h-10 w-10 p-0 border-0 rounded overflow-hidden cursor-pointer"
|
|
/>
|
|
<input
|
|
type="text"
|
|
name="textColor"
|
|
value={settings.textColor}
|
|
onChange={handleChange}
|
|
className="flex-1 p-2 border rounded-md bg-zinc-50 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white uppercase"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Background Color */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Background Color</label>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="color"
|
|
name="backgroundColor"
|
|
value={settings.backgroundColor}
|
|
onChange={handleChange}
|
|
className="h-10 w-10 p-0 border-0 rounded overflow-hidden cursor-pointer"
|
|
/>
|
|
<input
|
|
type="text"
|
|
name="backgroundColor"
|
|
value={settings.backgroundColor}
|
|
onChange={handleChange}
|
|
className="flex-1 p-2 border rounded-md bg-zinc-50 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white uppercase"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Background Opacity */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300 flex justify-between">
|
|
<span>Opacity</span>
|
|
<span>{Math.round(settings.backgroundOpacity * 100)}%</span>
|
|
</label>
|
|
<input
|
|
type="range"
|
|
name="backgroundOpacity"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
value={settings.backgroundOpacity}
|
|
onChange={handleChange}
|
|
className="w-full accent-indigo-600 cursor-pointer"
|
|
/>
|
|
</div>
|
|
|
|
{/* Toggles */}
|
|
<div className="space-y-4 pt-4 border-t border-zinc-200 dark:border-zinc-800">
|
|
<label className="flex items-center gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
name="showBadges"
|
|
checked={settings.showBadges}
|
|
onChange={handleChange}
|
|
className="w-5 h-5 rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500"
|
|
/>
|
|
<span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Show Badges</span>
|
|
</label>
|
|
|
|
<label className="flex items-center gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
name="bttv"
|
|
checked={settings.emotes.bttv}
|
|
onChange={handleEmoteChange}
|
|
className="w-5 h-5 rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500"
|
|
/>
|
|
<span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">BTTV Emotes</span>
|
|
</label>
|
|
|
|
<label className="flex items-center gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
name="seventv"
|
|
checked={settings.emotes.seventv}
|
|
onChange={handleEmoteChange}
|
|
className="w-5 h-5 rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500"
|
|
/>
|
|
<span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">7TV Emotes</span>
|
|
</label>
|
|
</div>
|
|
|
|
<SupportModule />
|
|
</div>
|
|
);
|
|
}
|