80 lines
2.8 KiB
TypeScript
80 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import Dropdown from '../Dropdown';
|
|
import { Config } from '../../types';
|
|
|
|
interface GeneralTabProps {
|
|
config: Config;
|
|
onChange: (updates: Partial<Config>) => void;
|
|
}
|
|
|
|
const GeneralTab: React.FC<GeneralTabProps> = ({ config, onChange }) => {
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div>
|
|
<label className="text-slate-300 text-sm font-semibold mb-2 block">Title</label>
|
|
<input
|
|
type="text"
|
|
value={config.title}
|
|
onChange={(e) => onChange({ title: e.target.value })}
|
|
className="bg-white/10 p-3 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-cyan-400"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<label className="text-slate-300 text-sm font-semibold">Title Size</label>
|
|
<Dropdown
|
|
name="titleSize"
|
|
value={config.titleSize}
|
|
onChange={(e) => onChange({ titleSize: e.target.value as string })}
|
|
options={[
|
|
{ value: 'tiny', label: 'Tiny' },
|
|
{ value: 'small', label: 'Small' },
|
|
{ value: 'medium', label: 'Medium' },
|
|
{ value: 'large', label: 'Large' },
|
|
]}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<label className="text-slate-300 text-sm font-semibold">Vertical Alignment</label>
|
|
<Dropdown
|
|
name="alignment"
|
|
value={config.alignment}
|
|
onChange={(e) => onChange({ alignment: e.target.value as string })}
|
|
options={[
|
|
{ value: 'top', label: 'Top' },
|
|
{ value: 'middle', label: 'Middle' },
|
|
{ value: 'bottom', label: 'Bottom' },
|
|
]}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<label className="text-slate-300 text-sm font-semibold">Tile Size</label>
|
|
<Dropdown
|
|
name="tileSize"
|
|
value={config.tileSize || 'medium'}
|
|
onChange={(e) => onChange({ tileSize: e.target.value as string })}
|
|
options={[
|
|
{ value: 'small', label: 'Small' },
|
|
{ value: 'medium', label: 'Medium' },
|
|
{ value: 'large', label: 'Large' },
|
|
]}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<label className="text-slate-300 text-sm font-semibold">Horizontal Alignment</label>
|
|
<Dropdown
|
|
name="horizontalAlignment"
|
|
value={config.horizontalAlignment}
|
|
onChange={(e) => onChange({ horizontalAlignment: e.target.value as string })}
|
|
options={[
|
|
{ value: 'left', label: 'Left' },
|
|
{ value: 'middle', label: 'Middle' },
|
|
{ value: 'right', label: 'Right' },
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GeneralTab;
|