import React, { useState, useCallback } from "react"; import { Plus, X, Trash2, RotateCcw, ChevronLeft, ChevronRight, Shuffle } from "lucide-react"; var LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); var T = { ko: { title: "플래시카드", add: "카드 추가", front: "앞면 (질문)", back: "뒷면 (답)", save: "추가", empty: "카드를 추가하세요", emptyDesc: "질문과 답을 입력해 학습 카드를 만드세요", tap: "탭하면 뒤집기", of: "/", shuffle: "섞기", cards: "장" }, en: { title: "Flashcards", add: "Add Card", front: "Front (question)", back: "Back (answer)", save: "Add", empty: "Add your cards", emptyDesc: "Create question and answer flashcards", tap: "Tap to flip", of: "/", shuffle: "Shuffle", cards: "cards" }, ja: { title: "フラッシュカード", add: "カード追加", front: "表面 (質問)", back: "裏面 (答え)", save: "追加", empty: "カードを追加してください", emptyDesc: "質問と答えのフラッシュカードを作りましょう", tap: "タップで裏返す", of: "/", shuffle: "シャッフル", cards: "枚" }, zh: { title: "闪卡", add: "添加卡片", front: "正面 (问题)", back: "背面 (答案)", save: "添加", empty: "添加卡片", emptyDesc: "创建问答闪卡来学习", tap: "点击翻转", of: "/", shuffle: "打乱", cards: "张" }, }; var t = T[LANG] || T.en; var COLORS = ["from-blue-500 to-indigo-600", "from-emerald-500 to-teal-600", "from-rose-500 to-pink-600", "from-amber-500 to-orange-600", "from-violet-500 to-purple-600", "from-cyan-500 to-sky-600"]; export default function App() { var [cards, setCards] = useSharedStorage("flash_v2", []); var [idx, setIdx] = useState(0); var [flipped, setFlipped] = useState(false); var [showAdd, setShowAdd] = useState(false); var [front, setFront] = useState(""); var [back, setBack] = useState(""); var list = cards || []; var card = list[idx]; var color = COLORS[idx % COLORS.length]; var handleAdd = useCallback(function() { if (!front.trim() || !back.trim()) return; setCards(function(prev) { return [...(prev || []), { id: Date.now(), f: front.trim(), b: back.trim() }]; }); setFront(""); setBack(""); setShowAdd(false); }, [front, back, setCards]); var handleDelete = useCallback(function() { if (!card) return; setCards(function(prev) { return (prev || []).filter(function(c) { return c.id !== card.id; }); }); setIdx(function(i) { return Math.max(0, Math.min(i, list.length - 2)); }); setFlipped(false); }, [card, list.length, setCards]); var next = useCallback(function() { setIdx(function(i) { return Math.min(i + 1, list.length - 1); }); setFlipped(false); }, [list.length]); var prev = useCallback(function() { setIdx(function(i) { return Math.max(i - 1, 0); }); setFlipped(false); }, []); var shuffle = useCallback(function() { setCards(function(prev) { var a = [...(prev || [])]; for (var i = a.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var tmp = a[i]; a[i] = a[j]; a[j] = tmp; } return a; }); setIdx(0); setFlipped(false); }, [setCards]); return (

{t.title}

{list.length > 1 && ( )}

{list.length === 0 ? (

🃏

{t.empty}

{t.emptyDesc}

) : ( <>

{idx + 1} {t.of} {list.length} {t.cards}

)}

{showAdd && (

{t.add}

{t.front} {t.back}

)}

); }

Flashcards

Flashcards

reviews