a06e473e85
- New Import tab with drag-and-drop support for audio files - Support for 8 formats: MP3, MP4, WAV, M4A, FLAC, OGG, AAC, WMA - File metadata display (duration, size, format) - Editable meeting titles - Progress tracking with visual indicators - Smart template selection - Auto-navigation to Transcription view - Updated README with BlackHole requirement and Teams config - Added get_audio_metadata Rust command - Version bump to 1.1.0
68 lines
3.6 KiB
TypeScript
68 lines
3.6 KiB
TypeScript
import React from 'react';
|
|
import { Mic, FileText, Calendar, Upload } from 'lucide-react';
|
|
|
|
interface TabsProps {
|
|
currentTab: 'recorder' | 'transcription' | 'settings' | 'meetings' | 'history' | 'import';
|
|
onTabChange: (tab: 'recorder' | 'transcription' | 'settings' | 'meetings' | 'history' | 'import') => void;
|
|
}
|
|
|
|
const Tabs: React.FC<TabsProps> = ({ currentTab, onTabChange }) => {
|
|
return (
|
|
<div className="flex items-center gap-1 bg-secondary/50 p-1 rounded-full border border-border/40 self-center">
|
|
<button
|
|
onClick={() => onTabChange('recorder')}
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${currentTab === 'recorder' ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/50'}`}
|
|
>
|
|
<Mic size={16} />
|
|
Recording
|
|
</button>
|
|
<button
|
|
onClick={() => onTabChange('import')}
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${currentTab === 'import' ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/50'}`}
|
|
>
|
|
<Upload size={16} />
|
|
Import
|
|
</button>
|
|
<button
|
|
onClick={() => onTabChange('transcription')}
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${currentTab === 'transcription' ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/50'}`}
|
|
>
|
|
<FileText size={16} />
|
|
Transcription
|
|
</button>
|
|
<button
|
|
onClick={() => onTabChange('meetings')}
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${currentTab === 'meetings' ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/50'}`}
|
|
>
|
|
<Calendar size={16} />
|
|
Meetings
|
|
</button>
|
|
<button
|
|
onClick={() => onTabChange('history')}
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${currentTab === 'history' ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/50'}`}
|
|
>
|
|
<FileText size={16} />
|
|
History
|
|
</button>
|
|
|
|
{/* Settings could be a tab, but often better as an icon elsewhere, however sticking to the 'tab' request */}
|
|
{/* The user didn't explicitly ask for settings tab, but we need a way to get there. Let's keep it here for now or maybe just an icon?
|
|
The prompt showed "Recording | Summary | Meetings". We are doing "Recording | Logs".
|
|
Let's keep settings as a tab to simplify navigation for now. */}
|
|
{/* <button
|
|
onClick={() => onTabChange('settings')}
|
|
className={`flex items-center gap-2 px-4 py-1.5 rounded-full text-sm font-medium transition-all duration-200 ${
|
|
currentTab === 'settings'
|
|
? 'bg-background shadow-sm text-foreground ring-1 ring-border/50'
|
|
: 'text-muted-foreground hover:text-foreground hover:bg-background/50'
|
|
}`}
|
|
>
|
|
<Settings size={14} />
|
|
Settings
|
|
</button> */}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Tabs;
|