57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import './Settings.css';
|
|
|
|
interface SettingsProps {
|
|
showCaptions: boolean;
|
|
onToggleCaptions: () => void;
|
|
avatarEnabled: boolean;
|
|
onToggleAvatar: () => void;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export const Settings: React.FC<SettingsProps> = ({
|
|
showCaptions,
|
|
onToggleCaptions,
|
|
avatarEnabled,
|
|
onToggleAvatar,
|
|
onClose,
|
|
}) => {
|
|
return (
|
|
<div className="settings-overlay" role="dialog" aria-label="Settings">
|
|
<div className="settings-panel">
|
|
<div className="settings-header">
|
|
<h2>Settings</h2>
|
|
<button onClick={onClose} className="close-button" aria-label="Close settings">
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<div className="settings-content">
|
|
<div className="setting-item">
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={showCaptions}
|
|
onChange={onToggleCaptions}
|
|
/>
|
|
<span>Show captions</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="setting-item">
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={avatarEnabled}
|
|
onChange={onToggleAvatar}
|
|
/>
|
|
<span>Enable avatar</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|