Spaces:
Running
Running
File size: 5,847 Bytes
88b6846 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
'use client';
import React from 'react';
import { X, Download, Save, Trash2, Mic, Settings } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { toast } from 'sonner';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Switch } from '@/components/ui/switch';
import { Slider } from '@/components/ui/slider';
interface SettingsModalProps {
isOpen: boolean;
onClose: () => void;
autoAdvance: boolean;
setAutoAdvance: (value: boolean) => void;
autoSave: boolean;
setAutoSave: (value: boolean) => void;
silenceThreshold: number;
setSilenceThreshold: (value: number) => void;
datasetName: string;
}
export default function SettingsModal({
isOpen,
onClose,
autoAdvance,
setAutoAdvance,
autoSave,
setAutoSave,
silenceThreshold,
setSilenceThreshold,
datasetName
}: SettingsModalProps) {
const handleExport = async () => {
try {
// Trigger download by navigating to the API endpoint
window.location.href = `/api/export-dataset?dataset_name=${datasetName}`;
toast.success('Export started');
} catch (error) {
console.error(error);
toast.error('Error exporting dataset');
}
};
return (
<AnimatePresence>
{isOpen && (
<>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
onClick={onClose}
/>
<motion.div
initial={{ opacity: 0, scale: 0.95, y: 20 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95, y: 20 }}
className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md z-50"
>
<Card>
<CardHeader>
<CardTitle className="flex items-center justify-between">
<span>Settings</span>
<button onClick={onClose} className="text-muted-foreground hover:text-foreground">
<X className="w-5 h-5" />
</button>
</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<label className="text-sm font-medium">Auto-advance</label>
<p className="text-xs text-muted-foreground">
Go to next sentence after saving
</p>
</div>
<Switch checked={autoAdvance} onCheckedChange={setAutoAdvance} />
</div>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<label className="text-sm font-medium">Auto-save</label>
<p className="text-xs text-muted-foreground">
Save automatically when recording stops
</p>
</div>
<Switch checked={autoSave} onCheckedChange={setAutoSave} />
</div>
<div className="space-y-2">
<div className="flex justify-between">
<label className="text-sm font-medium">Silence Threshold</label>
<span className="text-xs text-muted-foreground">{silenceThreshold}%</span>
</div>
<Slider
value={[silenceThreshold]}
onValueChange={(vals) => setSilenceThreshold(vals[0])}
max={100}
step={1}
/>
</div>
<div className="pt-4 border-t border-border">
<h4 className="text-sm font-medium mb-3">Data Management</h4>
<button
onClick={handleExport}
className="btn btn-secondary w-full flex items-center justify-center gap-2"
>
<Download className="w-4 h-4" />
Export Dataset (ZIP)
</button>
</div>
</div>
</CardContent>
</Card>
</motion.div>
</>
)}
</AnimatePresence>
);
}
|