mvp

src/components/note-card.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import Link from 'next/link'
+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 preview = note.content.slice(0, 100) + (note.content.length > 100 ? '...' : '')
+  const typeColor = typeColors[note.type] || typeColors.note
+
+  return (
+    <Link href={`/notes/${note.id}`}>
+      <Card className="hover:shadow-md transition-shadow cursor-pointer h-full">
+        <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>
+  )
+}