69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import { Plus } from 'lucide-react';
|
|
|
|
interface Note {
|
|
id: string;
|
|
title: string;
|
|
lastEdited: Date;
|
|
}
|
|
|
|
interface NotesViewProps {
|
|
onNoteSelect?: (note: Note) => void;
|
|
}
|
|
|
|
export const NotesView: React.FC<NotesViewProps> = ({ onNoteSelect }) => {
|
|
const [notes, setNotes] = useState<Note[]>([
|
|
{
|
|
id: '1',
|
|
title: 'Sample Note',
|
|
lastEdited: new Date(Date.now() - 2 * 60 * 60 * 1000) // 2 hours ago
|
|
}
|
|
]);
|
|
|
|
const handleNewNote = () => {
|
|
const newNote: Note = {
|
|
id: Date.now().toString(),
|
|
title: 'New Note',
|
|
lastEdited: new Date()
|
|
};
|
|
setNotes([newNote, ...notes]);
|
|
onNoteSelect?.(newNote);
|
|
};
|
|
|
|
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>
|
|
<button
|
|
className="p-2 rounded-full hover:bg-contrast"
|
|
onClick={handleNewNote}
|
|
>
|
|
<Plus className="w-5 h-5 text-passive-1" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Notes List */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
{notes.map((note) => (
|
|
<div
|
|
key={note.id}
|
|
className="p-4 hover:bg-contrast 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>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|