95 lines
3.0 KiB
TypeScript
95 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import { Search, BookOpen, Tag, Trash2, Star, Archive, X, Folder, FileText, Calendar, Heart, Users, LucideIcon } from 'lucide-react';
|
|
|
|
interface NavigationProps {
|
|
nextcloudFolders: string[];
|
|
onFolderSelect: (folder: string) => void;
|
|
}
|
|
|
|
type FolderType = 'Notes' | 'Diary' | 'Health' | 'Contacts';
|
|
|
|
interface FolderConfig {
|
|
icon: LucideIcon;
|
|
order: number;
|
|
}
|
|
|
|
// Define folder order and icons
|
|
const FOLDER_CONFIG: Record<FolderType, FolderConfig> = {
|
|
'Notes': { icon: FileText, order: 1 },
|
|
'Diary': { icon: Calendar, order: 2 },
|
|
'Health': { icon: Heart, order: 3 },
|
|
'Contacts': { icon: Users, order: 4 }
|
|
};
|
|
|
|
export default function Navigation({ nextcloudFolders, onFolderSelect }: NavigationProps) {
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
|
|
const getFolderIcon = (folder: string) => {
|
|
switch (folder) {
|
|
case 'Notes':
|
|
return FileText;
|
|
case 'Diary':
|
|
return Calendar;
|
|
case 'Health':
|
|
return Heart;
|
|
case 'Contacts':
|
|
return Users;
|
|
default:
|
|
return FileText;
|
|
}
|
|
};
|
|
|
|
// Sort folders according to the specified order
|
|
const sortedFolders = [...nextcloudFolders].sort((a, b) => {
|
|
const orderA = (FOLDER_CONFIG[a as FolderType]?.order) || 999;
|
|
const orderB = (FOLDER_CONFIG[b as FolderType]?.order) || 999;
|
|
return orderA - orderB;
|
|
});
|
|
|
|
return (
|
|
<div className="flex flex-col h-full bg-carnet-sidebar">
|
|
{/* Search */}
|
|
<div className="p-4">
|
|
<div className="relative">
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder="Recherché..."
|
|
className="w-full pl-9 pr-4 py-2 bg-white border border-carnet-border rounded-md text-sm text-carnet-text-primary placeholder-carnet-text-muted focus:outline-none focus:ring-1 focus:ring-primary"
|
|
/>
|
|
<Search className="absolute left-3 top-2.5 h-4 w-4 text-carnet-text-muted" />
|
|
{searchQuery && (
|
|
<button
|
|
onClick={() => setSearchQuery('')}
|
|
className="absolute right-3 top-2.5 text-carnet-text-muted hover:text-carnet-text-primary"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Folders */}
|
|
<div className="flex-1 overflow-y-auto p-4">
|
|
<div className="space-y-1">
|
|
{sortedFolders.map((folder) => {
|
|
const Icon = getFolderIcon(folder);
|
|
return (
|
|
<button
|
|
key={folder}
|
|
onClick={() => onFolderSelect(folder)}
|
|
className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-carnet-text-primary hover:bg-carnet-hover"
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
<span>{folder}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|