carnet
This commit is contained in:
parent
56c3f5a0ba
commit
cecac44917
@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import { BookOpen, Tag, Trash2 } from 'lucide-react';
|
||||
import React, { useState } from 'react';
|
||||
import { Search, BookOpen, Tag, Trash2, Star, Archive, X } from 'lucide-react';
|
||||
import { PaneLayout } from '@/app/carnet/page';
|
||||
|
||||
interface NavigationProps {
|
||||
@ -9,37 +9,88 @@ interface NavigationProps {
|
||||
}
|
||||
|
||||
export const Navigation: React.FC<NavigationProps> = ({ onLayoutChange }) => {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-border">
|
||||
<h2 className="text-menu-item font-medium text-text">Navigation</h2>
|
||||
<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="flex items-center p-3 hover:bg-contrast cursor-pointer"
|
||||
onClick={() => onLayoutChange?.(PaneLayout.ItemSelection)}
|
||||
>
|
||||
<BookOpen className="w-5 h-5 mr-3 text-passive-1" />
|
||||
<h3 className="text-menu-item font-medium text-text">All Notes</h3>
|
||||
<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>
|
||||
|
||||
<div
|
||||
className="flex items-center p-3 hover:bg-contrast cursor-pointer"
|
||||
onClick={() => onLayoutChange?.(PaneLayout.TagSelection)}
|
||||
>
|
||||
<Tag className="w-5 h-5 mr-3 text-passive-1" />
|
||||
<h3 className="text-menu-item font-medium text-text">Tags</h3>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex items-center p-3 hover:bg-contrast cursor-pointer"
|
||||
onClick={() => onLayoutChange?.(PaneLayout.TableView)}
|
||||
>
|
||||
<Trash2 className="w-5 h-5 mr-3 text-passive-1" />
|
||||
<h3 className="text-menu-item font-medium text-text">Trash</h3>
|
||||
|
||||
{/* 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>
|
||||
|
||||
@ -1,12 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { Plus, Search, X } from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
import { fr } from 'date-fns/locale';
|
||||
|
||||
interface Note {
|
||||
id: string;
|
||||
title: string;
|
||||
content: string;
|
||||
lastEdited: Date;
|
||||
category?: string;
|
||||
tags?: string[];
|
||||
}
|
||||
|
||||
interface NotesViewProps {
|
||||
@ -14,11 +19,15 @@ interface NotesViewProps {
|
||||
}
|
||||
|
||||
export const NotesView: React.FC<NotesViewProps> = ({ onNoteSelect }) => {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [notes, setNotes] = useState<Note[]>([
|
||||
{
|
||||
id: '1',
|
||||
title: 'Sample Note',
|
||||
lastEdited: new Date(Date.now() - 2 * 60 * 60 * 1000) // 2 hours ago
|
||||
title: 'Budget and expenses',
|
||||
content: 'Created with Secure Spreadsheets',
|
||||
lastEdited: new Date('2022-03-24T19:16:00'),
|
||||
category: 'Finance',
|
||||
tags: ['Finance']
|
||||
}
|
||||
]);
|
||||
|
||||
@ -26,22 +35,54 @@ export const NotesView: React.FC<NotesViewProps> = ({ onNoteSelect }) => {
|
||||
const newNote: Note = {
|
||||
id: Date.now().toString(),
|
||||
title: 'New Note',
|
||||
content: '',
|
||||
lastEdited: new Date()
|
||||
};
|
||||
setNotes([newNote, ...notes]);
|
||||
onNoteSelect?.(newNote);
|
||||
};
|
||||
|
||||
const formatDate = (date: Date) => {
|
||||
return format(date, 'EEEE d MMM yyyy, HH:mm', { locale: fr });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-2 border-b border-border">
|
||||
<h2 className="text-lg font-medium text-foreground">Notes</h2>
|
||||
<div className="flex flex-col h-full bg-carnet-bg border-r border-carnet-border">
|
||||
{/* Search Header */}
|
||||
<div className="p-4 border-b border-carnet-border">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Link tags, notes, files..."
|
||||
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>
|
||||
|
||||
{/* Category Header */}
|
||||
<div className="px-4 py-3 border-b border-carnet-border flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<div className="w-6 h-6 bg-carnet-tag-finance-bg rounded-md flex items-center justify-center">
|
||||
<span className="text-xs font-medium text-carnet-tag-finance-text">F</span>
|
||||
</div>
|
||||
<span className="ml-2 text-sm font-medium text-carnet-text-primary">Finance</span>
|
||||
</div>
|
||||
<button
|
||||
className="p-2 rounded-full hover:bg-contrast"
|
||||
className="p-1.5 rounded-md hover:bg-carnet-hover"
|
||||
onClick={handleNewNote}
|
||||
>
|
||||
<Plus className="w-5 h-5 text-passive-1" />
|
||||
<Plus className="w-4 h-4 text-carnet-text-muted" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -50,16 +91,32 @@ export const NotesView: React.FC<NotesViewProps> = ({ onNoteSelect }) => {
|
||||
{notes.map((note) => (
|
||||
<div
|
||||
key={note.id}
|
||||
className="p-4 hover:bg-contrast cursor-pointer"
|
||||
className="px-4 py-3 border-b border-carnet-border hover:bg-carnet-hover cursor-pointer"
|
||||
onClick={() => onNoteSelect?.(note)}
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-menu-item font-medium text-foreground">
|
||||
{note.title}
|
||||
</span>
|
||||
<span className="text-xs text-passive-1">
|
||||
Last edited {note.lastEdited.toLocaleTimeString()}
|
||||
</span>
|
||||
<div className="flex items-center">
|
||||
<span className="text-sm font-medium text-carnet-text-primary">
|
||||
{note.title}
|
||||
</span>
|
||||
{note.tags?.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="ml-2 px-1.5 py-0.5 bg-carnet-tag-finance-bg rounded text-xs font-medium text-carnet-tag-finance-text"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-1 flex items-center text-xs text-carnet-text-muted">
|
||||
<span>{formatDate(note.lastEdited)}</span>
|
||||
{note.content && (
|
||||
<>
|
||||
<span className="mx-1.5">•</span>
|
||||
<span>{note.content}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@ -62,6 +62,23 @@ const config: Config = {
|
||||
ring: 'hsl(var(--sidebar-ring))'
|
||||
},
|
||||
panel: "#FCF8F2",
|
||||
'carnet': {
|
||||
'bg': '#ffffff',
|
||||
'sidebar': '#f7f7f7',
|
||||
'border': '#e5e5e5',
|
||||
'text': {
|
||||
'primary': '#1a1a1a',
|
||||
'secondary': '#666666',
|
||||
'muted': '#999999'
|
||||
},
|
||||
'tag': {
|
||||
'finance': {
|
||||
'bg': '#e8f5e9',
|
||||
'text': '#2e7d32'
|
||||
}
|
||||
},
|
||||
'hover': '#f5f5f5'
|
||||
}
|
||||
},
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user