60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Note } from '@/lib/types'
|
|
import { NoteCard } from './note-card'
|
|
import { ChevronDown, ChevronUp } from 'lucide-react'
|
|
|
|
interface FavoritesSectionProps {
|
|
pinnedNotes: Note[]
|
|
onEdit?: (note: Note, readOnly?: boolean) => void
|
|
}
|
|
|
|
export function FavoritesSection({ pinnedNotes, onEdit }: FavoritesSectionProps) {
|
|
const [isCollapsed, setIsCollapsed] = useState(false)
|
|
|
|
// Don't show section if no pinned notes
|
|
if (pinnedNotes.length === 0) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<section data-testid="favorites-section" className="mb-8">
|
|
{/* Collapsible Header */}
|
|
<button
|
|
onClick={() => setIsCollapsed(!isCollapsed)}
|
|
className="w-full flex items-center justify-between gap-2 mb-4 px-2 py-2 hover:bg-accent rounded-lg transition-colors min-h-[44px]"
|
|
aria-expanded={!isCollapsed}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-2xl">📌</span>
|
|
<h2 className="text-lg font-semibold text-foreground">
|
|
Pinned Notes
|
|
<span className="text-sm font-medium text-muted-foreground ml-2">
|
|
({pinnedNotes.length})
|
|
</span>
|
|
</h2>
|
|
</div>
|
|
{isCollapsed ? (
|
|
<ChevronDown className="w-5 h-5 text-muted-foreground" />
|
|
) : (
|
|
<ChevronUp className="w-5 h-5 text-muted-foreground" />
|
|
)}
|
|
</button>
|
|
|
|
{/* Collapsible Content */}
|
|
{!isCollapsed && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{pinnedNotes.map((note) => (
|
|
<NoteCard
|
|
key={note.id}
|
|
note={note}
|
|
onEdit={onEdit}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
)
|
|
}
|