60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import { useAppSettings } from '../../context/AppSettingsContext';
|
|
import Card from '../../components/ui/Card';
|
|
import Select from '../../components/ui/Select';
|
|
import { ArrowLeft, Eye } from 'lucide-react';
|
|
|
|
const scrollThresholdOptions = [
|
|
{ value: '0.1', label: '10%' },
|
|
{ value: '0.2', label: '20%' },
|
|
{ value: '0.3', label: '30%' },
|
|
{ value: '0.4', label: '40%' },
|
|
{ value: '0.5', label: '50%' },
|
|
{ value: '0.6', label: '60%' },
|
|
{ value: '0.7', label: '70% (Standard)' },
|
|
{ value: '0.8', label: '80%' },
|
|
{ value: '0.9', label: '90%' },
|
|
{ value: '999', label: 'Deaktiviert' },
|
|
];
|
|
|
|
export default function ViewSettings() {
|
|
const { settings, updateSettings } = useAppSettings();
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<Link
|
|
to="/settings"
|
|
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
<ArrowLeft className="w-5 h-5" />
|
|
</Link>
|
|
<div className="flex items-center gap-3">
|
|
<Eye className="w-6 h-6" />
|
|
<h1 className="text-2xl font-bold">Ansicht</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<Card title="Scroll-Verhalten">
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="font-medium">Nach-oben-Button</p>
|
|
<p className="text-sm text-gray-500">
|
|
Ab welcher Scroll-Position der Button unten rechts erscheinen soll
|
|
</p>
|
|
</div>
|
|
<div className="w-48">
|
|
<Select
|
|
options={scrollThresholdOptions}
|
|
value={settings.scrollToTopThreshold.toString()}
|
|
onChange={(e) => updateSettings({ scrollToTopThreshold: parseFloat(e.target.value) })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|