81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
|
import { Card } from '@/components/ui/card';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
import { Clock, MapPin, AlertCircle, Trash2 } from 'lucide-react';
|
||
|
|
import { RETENTION_OPTIONS, REGION_OPTIONS } from './types';
|
||
|
|
import type { RetentionValue, RegionValue } from './types';
|
||
|
|
|
||
|
|
interface CloudSettingsViewPreferencesProps {
|
||
|
|
retention: RetentionValue;
|
||
|
|
onRetentionChange: (value: RetentionValue) => void;
|
||
|
|
region: RegionValue;
|
||
|
|
onRegionChange: (value: RegionValue) => void;
|
||
|
|
onEmptyTrash: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function CloudSettingsViewPreferences({
|
||
|
|
retention,
|
||
|
|
onRetentionChange,
|
||
|
|
region,
|
||
|
|
onRegionChange,
|
||
|
|
onEmptyTrash,
|
||
|
|
}: CloudSettingsViewPreferencesProps) {
|
||
|
|
return (
|
||
|
|
<Card variant="default">
|
||
|
|
<h3 className="font-bold text-white mb-6">Preferences</h3>
|
||
|
|
|
||
|
|
<div className="space-y-6">
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-bold text-kodo-content-dim mb-2 flex items-center gap-2">
|
||
|
|
<Clock className="w-4 h-4" /> Trash Retention Policy
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
className="w-full bg-kodo-ink border border-kodo-steel rounded p-4 text-white outline-none focus:border-kodo-steel"
|
||
|
|
value={retention}
|
||
|
|
onChange={(e) => onRetentionChange(e.target.value as RetentionValue)}
|
||
|
|
>
|
||
|
|
{RETENTION_OPTIONS.map((opt) => (
|
||
|
|
<option key={opt.value} value={opt.value}>
|
||
|
|
{opt.label}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
<p className="text-xs text-kodo-content-dim mt-1">
|
||
|
|
Deleted files are permanently removed after this period.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-bold text-kodo-content-dim mb-2 flex items-center gap-2">
|
||
|
|
<MapPin className="w-4 h-4" /> Storage Region
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
className="w-full bg-kodo-ink border border-kodo-steel rounded p-4 text-white outline-none focus:border-kodo-steel"
|
||
|
|
value={region}
|
||
|
|
onChange={(e) => onRegionChange(e.target.value as RegionValue)}
|
||
|
|
>
|
||
|
|
{REGION_OPTIONS.map((opt) => (
|
||
|
|
<option key={opt.value} value={opt.value}>
|
||
|
|
{opt.label}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
<div className="flex items-start gap-2 mt-2 text-xs text-kodo-gold bg-kodo-gold/10 p-2 rounded">
|
||
|
|
<AlertCircle className="w-3 h-3 mt-0.5 shrink-0" />
|
||
|
|
Changing regions requires data migration which may take up to 24 hours.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="pt-4 border-t border-kodo-steel">
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
className="text-kodo-red hover:bg-kodo-red/10 border border-kodo-red/30 w-full"
|
||
|
|
onClick={onEmptyTrash}
|
||
|
|
>
|
||
|
|
<Trash2 className="w-4 h-4 mr-2" /> Empty Trash Now
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|