128 lines
4.2 KiB
TypeScript
128 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import { Search, BookOpen, Tag, Trash2, Star, Archive, X, Folder, FileText, Calendar, Heart, Users, LucideIcon, Layout } from 'lucide-react';
|
|
import { PaneLayout } from '@/app/carnet/page';
|
|
|
|
interface NavigationProps {
|
|
layout: string;
|
|
onLayoutChange: (layout: string) => void;
|
|
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({ layout, onLayoutChange, 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>
|
|
|
|
{/* Layout Selection */}
|
|
<div className="p-4 border-b border-carnet-border">
|
|
<div className="flex items-center space-x-2">
|
|
<Layout className="h-4 w-4 text-carnet-text-muted" />
|
|
<span className="text-sm font-medium text-carnet-text-primary">Vues</span>
|
|
</div>
|
|
<div className="mt-2 space-y-1">
|
|
<button
|
|
onClick={() => onLayoutChange('item-selection')}
|
|
className={`w-full px-3 py-2 text-sm rounded-md ${
|
|
layout === 'item-selection'
|
|
? 'bg-primary text-white'
|
|
: 'text-carnet-text-primary hover:bg-carnet-hover'
|
|
}`}
|
|
>
|
|
Liste
|
|
</button>
|
|
<button
|
|
onClick={() => onLayoutChange('table-view')}
|
|
className={`w-full px-3 py-2 text-sm rounded-md ${
|
|
layout === 'table-view'
|
|
? 'bg-primary text-white'
|
|
: 'text-carnet-text-primary hover:bg-carnet-hover'
|
|
}`}
|
|
>
|
|
Tableau
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Folders */}
|
|
<div className="flex-1 overflow-y-auto p-4">
|
|
<div className="space-y-1">
|
|
{nextcloudFolders.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>
|
|
);
|
|
}
|