import React, { useState, useCallback } from "react"; import { Plus, X, Search, Trash2, FileText, Clock } from "lucide-react"; const LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); const T = { ko: { title: "노트", add: "새 노트", search: "검색", empty: "노트가 없습니다", emptyDesc: "첫 번째 노트를 작성해보세요", titleLabel: "제목", content: "내용을 입력하세요...", save: "저장", edited: "편집됨", chars: "자", notes: "개의 노트" }, en: { title: "Notes", add: "New Note", search: "Search", empty: "No notes yet", emptyDesc: "Write your first note", titleLabel: "Title", content: "Start writing...", save: "Save", edited: "Edited", chars: "chars", notes: "notes" }, ja: { title: "ノート", add: "新規", search: "検索", empty: "ノートがありません", emptyDesc: "最初のノートを書きましょう", titleLabel: "タイトル", content: "入力してください...", save: "保存", edited: "編集済み", chars: "文字", notes: "件のノート" }, zh: { title: "笔记", add: "新建", search: "搜索", empty: "暂无笔记", emptyDesc: "写下你的第一条笔记", titleLabel: "标题", content: "开始写作...", save: "保存", edited: "已编辑", chars: "字", notes: "条笔记" }, }; const t = T[LANG] || T.en; const COLORS = ["bg-amber-50 border-amber-200", "bg-blue-50 border-blue-200", "bg-emerald-50 border-emerald-200", "bg-rose-50 border-rose-200", "bg-violet-50 border-violet-200", "bg-orange-50 border-orange-200"]; export default function App() { const [notes, setNotes] = useSharedStorage("notes_v3", []); const [query, setQuery] = useState(""); const [editing, setEditing] = useState(null); const [title, setTitle] = useState(""); const [body, setBody] = useState(""); const filtered = (notes || []).filter(n => !query || n.title.toLowerCase().includes(query.toLowerCase()) || n.body.toLowerCase().includes(query.toLowerCase()) ); const openNew = useCallback(() => { setEditing("new"); setTitle(""); setBody(""); }, []); const openEdit = useCallback((note) => { setEditing(note.id); setTitle(note.title); setBody(note.body); }, []); const handleSave = useCallback(() => { if (!title.trim() && !body.trim()) return; const now = new Date().toISOString(); if (editing === "new") { setNotes(prev => [{ id: Date.now(), title: title.trim() || "Untitled", body: body.trim(), color: COLORS[((prev || []).length) % COLORS.length], createdAt: now, updatedAt: now }, ...(prev || [])]); } else { setNotes(prev => (prev || []).map(n => n.id === editing ? { ...n, title: title.trim() || n.title, body: body.trim(), updatedAt: now } : n)); } setEditing(null); }, [editing, title, body, setNotes]); const handleDelete = useCallback((id) => { setNotes(prev => (prev || []).filter(n => n.id !== id)); setEditing(null); }, [setNotes]); const fmtDate = (iso) => { const d = new Date(iso); const now = new Date(); if (d.toDateString() === now.toDateString()) return t.edited + " " + d.toLocaleTimeString(LANG, { hour: "2-digit", minute: "2-digit" }); return d.toLocaleDateString(LANG, { month: "short", day: "numeric" }); }; if (editing !== null) { return (

{editing !== "new" && ( )}

setTitle(e.target.value)} placeholder={t.titleLabel} className="text-xl font-bold text-gray-900 outline-none mb-2 placeholder:text-gray-300" />

setBody(e.target.value)} placeholder={t.content}
            className="flex-1 text-gray-700 text-base outline-none resize-none leading-relaxed placeholder:text-gray-300" />
          <p className="text-gray-300 text-xs text-right mt-2">{body.length} {t.chars}</p>
        </div>
      </div>
    );
  }

return (
    <div className="h-full flex flex-col overflow-hidden relative bg-gray-50">
      <div className="shrink-0 px-4 pt-4 pb-2">
        <div className="flex items-center justify-between mb-3">
          <h1 className="text-gray-900 text-xl font-bold">{t.title}</h1>
          <button onClick={openNew}
            className="flex items-center gap-1 px-3 py-1.5 rounded-full bg-blue-500 text-white text-sm font-medium active:scale-95 transition-transform">
            <Plus className="w-4 h-4" /> {t.add}
          </button>
        </div>
        <div className="flex items-center gap-2 bg-white rounded-xl px-3 py-2.5 border border-gray-200">
          <Search className="w-4 h-4 text-gray-400" />
          <input value={query} onChange={e => setQuery(e.target.value)} placeholder={t.search}
            className="flex-1 text-sm text-gray-900 outline-none bg-transparent placeholder:text-gray-400" />
        </div>
        <p className="text-gray-400 text-xs mt-2">{filtered.length} {t.notes}</p>
      </div>

<div className="flex-1 overflow-y-auto px-4 pb-4">
        {filtered.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-16 gap-3">
            <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center">
              <FileText className="w-7 h-7 text-gray-300" />
            </div>
            <p className="text-gray-400 text-sm">{t.empty}</p>
            <p className="text-gray-300 text-xs">{t.emptyDesc}</p>
          </div>
        ) : (
          <div className="grid grid-cols-2 gap-2">
            {filtered.map(note => (
              <button key={note.id} onClick={() => openEdit(note)}
                className={"text-left p-3 rounded-xl border active:scale-[0.97] transition-transform " + note.color}>
                <p className="text-gray-900 text-sm font-semibold truncate">{note.title}</p>
                <p className="text-gray-500 text-xs mt-1 line-clamp-3 leading-relaxed">{note.body}</p>
                <div className="flex items-center gap-1 mt-2 text-gray-400 text-[10px]">
                  <Clock className="w-2.5 h-2.5" />
                  {fmtDate(note.updatedAt)}
                </div>
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
</article></body></html>

Quick Note

Quick Note

reviews