Daniel Arroyo
33a4705f95
- Add prefetchNote function in useNoteListKeyboard hook - Prefetch note pages when navigating with arrow keys - Add hover prefetch in NoteCard using router.prefetch - Update KeyboardNavigableNoteList to use prefetchNote
66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
'use client'
|
||
|
||
import Link from 'next/link'
|
||
import { useRouter } from 'next/navigation'
|
||
import { Note } from '@/types/note'
|
||
import { Card, CardContent } from '@/components/ui/card'
|
||
import { Badge } from '@/components/ui/badge'
|
||
|
||
const typeColors: Record<string, string> = {
|
||
command: 'bg-green-100 text-green-800',
|
||
snippet: 'bg-blue-100 text-blue-800',
|
||
decision: 'bg-purple-100 text-purple-800',
|
||
recipe: 'bg-orange-100 text-orange-800',
|
||
procedure: 'bg-yellow-100 text-yellow-800',
|
||
inventory: 'bg-gray-100 text-gray-800',
|
||
note: 'bg-slate-100 text-slate-800',
|
||
}
|
||
|
||
export function NoteCard({ note }: { note: Note }) {
|
||
const router = useRouter()
|
||
const preview = note.content.slice(0, 100) + (note.content.length > 100 ? '...' : '')
|
||
const typeColor = typeColors[note.type] || typeColors.note
|
||
|
||
const handleMouseEnter = () => {
|
||
// Prefetch on hover for faster navigation
|
||
router.prefetch(`/notes/${note.id}`)
|
||
}
|
||
|
||
return (
|
||
<Link href={`/notes/${note.id}`} prefetch={true}>
|
||
<Card
|
||
className="hover:shadow-md transition-shadow cursor-pointer h-full"
|
||
onMouseEnter={handleMouseEnter}
|
||
>
|
||
<CardContent className="p-4">
|
||
<div className="flex items-start justify-between gap-2 mb-2">
|
||
<h3 className="font-semibold text-lg line-clamp-1">{note.title}</h3>
|
||
<div className="flex items-center gap-1">
|
||
{note.isPinned && <span className="text-amber-500">📌</span>}
|
||
{note.isFavorite && <span className="text-pink-500">❤️</span>}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<Badge className={typeColor}>{note.type}</Badge>
|
||
<span className="text-xs text-gray-500">
|
||
{new Date(note.updatedAt).toLocaleDateString('en-CA')}
|
||
</span>
|
||
</div>
|
||
|
||
<p className="text-sm text-gray-600 line-clamp-2 mb-2">{preview}</p>
|
||
|
||
{note.tags && note.tags.length > 0 && (
|
||
<div className="flex flex-wrap gap-1">
|
||
{note.tags.map(({ tag }) => (
|
||
<Badge key={tag.id} variant="outline" className="text-xs">
|
||
{tag.name}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</Link>
|
||
)
|
||
} |