Implement Style Editor, Preview, and Settings Schema
This commit is contained in:
168
src/components/dashboard/StyleControls.tsx
Normal file
168
src/components/dashboard/StyleControls.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import { OverlaySettings } from '@/lib/types';
|
||||
|
||||
interface StyleControlsProps {
|
||||
settings: OverlaySettings;
|
||||
updateSettings: (newSettings: Partial<OverlaySettings>) => void;
|
||||
}
|
||||
|
||||
export default function StyleControls({ settings, updateSettings }: StyleControlsProps) {
|
||||
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,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
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">
|
||||
<h2 className="text-xl font-bold text-zinc-900 dark:text-white">Style Editor</h2>
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user