98 lines
4.1 KiB
TypeScript
98 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import { Search, BookOpen, Tag, Trash2, Star, Archive, X } from 'lucide-react';
|
|
import { PaneLayout } from '@/app/carnet/page';
|
|
|
|
interface NavigationProps {
|
|
onLayoutChange?: (layout: PaneLayout) => void;
|
|
}
|
|
|
|
export const Navigation: React.FC<NavigationProps> = ({ onLayoutChange }) => {
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
|
|
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="Search tags..."
|
|
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>
|
|
|
|
{/* Navigation Items */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
<div className="px-3">
|
|
<div className="space-y-0.5">
|
|
<div
|
|
className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
|
|
onClick={() => onLayoutChange?.(PaneLayout.ItemSelection)}
|
|
>
|
|
<BookOpen className="w-4 h-4 mr-3" />
|
|
<span className="text-sm">Notes</span>
|
|
<span className="ml-auto text-xs text-carnet-text-muted">54</span>
|
|
</div>
|
|
|
|
<div
|
|
className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
|
|
onClick={() => onLayoutChange?.(PaneLayout.TagSelection)}
|
|
>
|
|
<Star className="w-4 h-4 mr-3" />
|
|
<span className="text-sm">Starred</span>
|
|
</div>
|
|
|
|
<div
|
|
className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
|
|
>
|
|
<Archive className="w-4 h-4 mr-3" />
|
|
<span className="text-sm">Archived</span>
|
|
<span className="ml-auto text-xs text-carnet-text-muted">18</span>
|
|
</div>
|
|
|
|
<div
|
|
className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
|
|
onClick={() => onLayoutChange?.(PaneLayout.TableView)}
|
|
>
|
|
<Trash2 className="w-4 h-4 mr-3" />
|
|
<span className="text-sm">Trash</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Favorites Section */}
|
|
<div className="mt-6 px-3">
|
|
<h3 className="px-3 mb-2 text-xs font-medium text-carnet-text-muted uppercase">Favorites</h3>
|
|
<div className="space-y-0.5">
|
|
<div className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer">
|
|
<span className="text-sm text-carnet-text-primary">Blogs</span>
|
|
<span className="ml-auto text-xs text-carnet-text-muted">2</span>
|
|
</div>
|
|
<div className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer">
|
|
<span className="text-sm text-carnet-text-primary">Bugs</span>
|
|
<span className="ml-auto text-xs text-carnet-text-muted">1</span>
|
|
</div>
|
|
<div className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer">
|
|
<span className="text-sm text-carnet-text-primary">Daily Notes</span>
|
|
<span className="ml-auto text-xs text-carnet-text-muted">7</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|