mirror of
https://github.com/Tony0410/quietthanks.git
synced 2026-05-25 05:41:38 +08:00
Initial commit: Quiet Thanks gratitude app
A calm, private gratitude and mood log built with Next.js 16, TypeScript, Tailwind CSS, and SQLite/Drizzle ORM. Features: - Quick check-in with autosave (800ms debounce) - Optional mood selector (5 levels) with accessibility labels - Optional tags with tap-to-add from recent - Timeline with weekly reflection card - Filters by mood, tag, and rough day - Export to Markdown and JSON - Dark mode default - Delete with undo toast - Docker deployment ready Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
49
src/components/EntryRow.tsx
Normal file
49
src/components/EntryRow.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { formatDate, isToday } from "@/lib/utils/date";
|
||||
import { MoodIcon } from "./MoodSelector";
|
||||
import { TagChips } from "./TagInput";
|
||||
import type { EntryWithTags } from "@/lib/types";
|
||||
|
||||
interface EntryRowProps {
|
||||
entry: EntryWithTags;
|
||||
}
|
||||
|
||||
export function EntryRow({ entry }: EntryRowProps) {
|
||||
// Truncate text to one line preview
|
||||
const preview = entry.text.length > 80 ? entry.text.slice(0, 80) + "..." : entry.text;
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={`/entry/${entry.id}`}
|
||||
className="block p-4 bg-surface border border-border rounded-xl hover:border-muted transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-sm text-muted">
|
||||
{isToday(entry.date) ? "Today" : formatDate(entry.date)}
|
||||
</span>
|
||||
{entry.roughDay ? (
|
||||
<span className="text-xs px-2 py-0.5 bg-red-500/20 text-red-400 rounded">
|
||||
rough day
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<p className="text-foreground truncate">{preview}</p>
|
||||
{entry.tags.length > 0 && (
|
||||
<div className="mt-2">
|
||||
<TagChips tags={entry.tags} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{entry.mood && (
|
||||
<div className="text-xl">
|
||||
<MoodIcon mood={entry.mood} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user