126 lines
4.1 KiB
TypeScript
126 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from '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 {
|
|
onNoteSelect?: (note: Note) => void;
|
|
}
|
|
|
|
export const NotesView: React.FC<NotesViewProps> = ({ onNoteSelect }) => {
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [notes, setNotes] = useState<Note[]>([
|
|
{
|
|
id: '1',
|
|
title: 'Budget and expenses',
|
|
content: 'Created with Secure Spreadsheets',
|
|
lastEdited: new Date('2022-03-24T19:16:00'),
|
|
category: 'Finance',
|
|
tags: ['Finance']
|
|
}
|
|
]);
|
|
|
|
const handleNewNote = () => {
|
|
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 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-1.5 rounded-md hover:bg-carnet-hover"
|
|
onClick={handleNewNote}
|
|
>
|
|
<Plus className="w-4 h-4 text-carnet-text-muted" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Notes List */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
{notes.map((note) => (
|
|
<div
|
|
key={note.id}
|
|
className="px-4 py-3 border-b border-carnet-border hover:bg-carnet-hover cursor-pointer"
|
|
onClick={() => onNoteSelect?.(note)}
|
|
>
|
|
<div className="flex flex-col">
|
|
<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>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|