71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import React from 'react';
|
|
import { Folder, File } from 'lucide-react';
|
|
|
|
interface Note {
|
|
id: string;
|
|
title: string;
|
|
lastModified: string;
|
|
size: number;
|
|
type: string;
|
|
mime: string;
|
|
etag: string;
|
|
content?: string;
|
|
}
|
|
|
|
interface FileListProps {
|
|
notes: Note[];
|
|
onNoteSelect: (note: Note) => void;
|
|
currentFolder: string;
|
|
onFolderChange: (folder: string) => void;
|
|
loading: boolean;
|
|
}
|
|
|
|
export function FileList({ notes, onNoteSelect, currentFolder, onFolderChange, loading }: FileListProps) {
|
|
const folders = ['Notes', 'Diary', 'Health', 'Contacts'];
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="p-4">
|
|
<div className="h-4 w-full bg-gray-200 rounded animate-pulse"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
{/* Folders */}
|
|
<div className="p-4 space-y-2">
|
|
{folders.map((folder) => (
|
|
<button
|
|
key={folder}
|
|
onClick={() => onFolderChange(folder)}
|
|
className={`w-full flex items-center space-x-2 px-4 py-2 rounded-lg ${
|
|
currentFolder === folder
|
|
? 'bg-primary/10 text-primary'
|
|
: 'hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<Folder className="h-4 w-4" />
|
|
<span>{folder}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Notes */}
|
|
<div className="flex-1 overflow-y-auto p-4 space-y-2">
|
|
{notes.map((note) => (
|
|
<button
|
|
key={note.id}
|
|
onClick={() => onNoteSelect(note)}
|
|
className="w-full flex items-center space-x-2 px-4 py-2 rounded-lg hover:bg-gray-100"
|
|
>
|
|
<File className="h-4 w-4" />
|
|
<span className="truncate">{note.title}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|