carnet panel
This commit is contained in:
parent
a5e51cdd6b
commit
1cd3b63d53
@ -1,13 +1,28 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Search, FileText, Calendar, Heart, Users, ChevronRight, Folder } from 'lucide-react';
|
||||
import { Search, BookOpen, Tag, Trash2, Star, Archive, X, Folder, FileText, Calendar, Heart, Users, LucideIcon, ChevronRight } 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 }
|
||||
};
|
||||
|
||||
interface ContactGroup {
|
||||
name: string;
|
||||
contacts: string[];
|
||||
@ -48,82 +63,88 @@ export default function Navigation({ nextcloudFolders, onFolderSelect }: Navigat
|
||||
}
|
||||
};
|
||||
|
||||
// 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-bg border-r border-carnet-border">
|
||||
{/* Search Bar */}
|
||||
<div className="p-4 border-b border-carnet-border">
|
||||
<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="Rechercher..."
|
||||
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 List */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<ul className="py-2">
|
||||
{nextcloudFolders.map((folder) => (
|
||||
<li key={folder}>
|
||||
{folder === 'Contacts' ? (
|
||||
<>
|
||||
<button
|
||||
onClick={() => onFolderSelect(folder)}
|
||||
className="w-full flex items-center px-4 py-2 text-sm text-carnet-text-primary hover:bg-carnet-hover"
|
||||
>
|
||||
<Users className="h-4 w-4 mr-2" />
|
||||
<span>{folder}</span>
|
||||
</button>
|
||||
{/* Contact Groups */}
|
||||
<ul className="ml-6">
|
||||
{/* Folders */}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<div className="space-y-1">
|
||||
{sortedFolders.map((folder) => {
|
||||
const Icon = getFolderIcon(folder);
|
||||
return (
|
||||
<div key={folder}>
|
||||
<button
|
||||
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>
|
||||
{folder === 'Contacts' && (
|
||||
<div className="ml-4 mt-1 space-y-1">
|
||||
{contactGroups.map((group) => (
|
||||
<li key={group.name}>
|
||||
<div key={group.name}>
|
||||
<button
|
||||
onClick={() => toggleGroup(group.name)}
|
||||
className="w-full flex items-center px-4 py-2 text-sm text-carnet-text-primary hover:bg-carnet-hover"
|
||||
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"
|
||||
>
|
||||
<ChevronRight
|
||||
className={`h-4 w-4 mr-2 transition-transform ${
|
||||
className={`h-4 w-4 transition-transform ${
|
||||
expandedGroups.has(group.name) ? 'transform rotate-90' : ''
|
||||
}`}
|
||||
/>
|
||||
<Folder className="h-4 w-4 mr-2" />
|
||||
<Folder className="h-4 w-4" />
|
||||
<span>{group.name}</span>
|
||||
</button>
|
||||
{expandedGroups.has(group.name) && (
|
||||
<ul className="ml-4">
|
||||
<div className="ml-4 space-y-1">
|
||||
{group.contacts.map((contact) => (
|
||||
<li key={contact}>
|
||||
<button
|
||||
onClick={() => onFolderSelect(`${folder}/${group.name}/${contact}`)}
|
||||
className="w-full flex items-center px-4 py-2 text-sm text-carnet-text-muted hover:bg-carnet-hover"
|
||||
>
|
||||
<span className="ml-6">{contact}</span>
|
||||
</button>
|
||||
</li>
|
||||
<button
|
||||
key={contact}
|
||||
onClick={() => onFolderSelect(`${folder}/${group.name}/${contact}`)}
|
||||
className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-carnet-text-muted hover:bg-carnet-hover"
|
||||
>
|
||||
<span>{contact}</span>
|
||||
</button>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
</div>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => onFolderSelect(folder)}
|
||||
className="w-full flex items-center px-4 py-2 text-sm text-carnet-text-primary hover:bg-carnet-hover"
|
||||
>
|
||||
{React.createElement(getFolderIcon(folder), { className: "h-4 w-4 mr-2" })}
|
||||
<span>{folder}</span>
|
||||
</button>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user