feat: initial commit

src/components/FlashCard.tsx

@@ -0,0 +1,31 @@
+import { useState } from "react"
+
+interface FlashCardProps {
+  word?: string
+  phonetic?: string
+  meaningVi?: string
+  example?: string
+}
+
+export function FlashCard({ word, phonetic, meaningVi, example }: FlashCardProps) {
+  const [flipped, setFlipped] = useState(false)
+
+  return (
+    <div
+      onClick={() => setFlipped((f) => !f)}
+      className="rounded-lg border p-6 text-center cursor-pointer min-h-[160px] flex flex-col justify-center select-none hover:bg-gray-50"
+    >
+      {!flipped ? (
+        <div>
+          <p className="text-2xl font-bold">{word || "word"}</p>
+          {phonetic && <p className="text-gray-400 mt-1">{phonetic}</p>}
+        </div>
+      ) : (
+        <div className="space-y-2">
+          <p className="text-lg font-semibold text-blue-600">{meaningVi || "nghĩa tiếng Việt"}</p>
+          {example && <p className="text-sm text-gray-500 italic">{example}</p>}
+        </div>
+      )}
+    </div>
+  )
+}

src/components/ProgressBar.tsx

@@ -0,0 +1,26 @@
+interface ProgressBarProps {
+  value?: number
+  max?: number
+  label?: string
+}
+
+export function ProgressBar({ value = 0, max = 100, label }: ProgressBarProps) {
+  const pct = Math.min(100, Math.round((value / max) * 100))
+
+  return (
+    <div className="space-y-1">
+      {label && (
+        <div className="flex justify-between text-sm text-gray-600">
+          <span>{label}</span>
+          <span>{value}/{max}</span>
+        </div>
+      )}
+      <div className="h-2 w-full rounded-full bg-gray-200">
+        <div
+          className="h-2 rounded-full bg-blue-500 transition-all"
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+    </div>
+  )
+}

src/components/QuestionCard.tsx

@@ -0,0 +1,29 @@
+interface QuestionCardProps {
+  question?: string
+  options?: string[]
+  selectedAnswer?: string
+  onSelect?: (answer: string) => void
+}
+
+export function QuestionCard({ question, options, selectedAnswer, onSelect }: QuestionCardProps) {
+  return (
+    <div className="rounded-lg border p-4 space-y-3">
+      <p className="font-medium">{question || "Question placeholder"}</p>
+      {options && (
+        <ul className="space-y-2">
+          {options.map((opt) => (
+            <li
+              key={opt}
+              onClick={() => onSelect?.(opt[0])}
+              className={`rounded border p-2 text-sm cursor-pointer hover:bg-gray-50 ${
+                selectedAnswer === opt[0] ? "border-blue-500 bg-blue-50" : ""
+              }`}
+            >
+              {opt}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

src/components/Timer.tsx

@@ -0,0 +1,14 @@
+interface TimerProps {
+  seconds?: number
+}
+
+export function Timer({ seconds = 0 }: TimerProps) {
+  const mins = Math.floor(seconds / 60)
+  const secs = seconds % 60
+
+  return (
+    <div className="font-mono text-lg font-semibold tabular-nums">
+      {String(mins).padStart(2, "0")}:{String(secs).padStart(2, "0")}
+    </div>
+  )
+}

src/components/WritingFeedback.tsx

@@ -0,0 +1,44 @@
+interface WritingFeedbackProps {
+  score?: string
+  grammar?: string[]
+  vocabulary?: string[]
+  structure?: string
+  summary?: string
+  improvedVersion?: string
+}
+
+export function WritingFeedback({ score, grammar, vocabulary, structure, summary }: WritingFeedbackProps) {
+  if (!score) return null
+
+  return (
+    <div className="space-y-4 rounded-lg border p-4">
+      <div className="flex items-center gap-2">
+        <span className="font-semibold">Band score:</span>
+        <span className="text-lg font-bold text-blue-600">{score}</span>
+      </div>
+      {summary && <p className="text-sm text-gray-700">{summary}</p>}
+      {grammar && grammar.length > 0 && (
+        <div>
+          <p className="font-medium text-sm">Ngữ pháp:</p>
+          <ul className="mt-1 space-y-1 text-sm text-gray-600 list-disc list-inside">
+            {grammar.map((item, i) => <li key={i}>{item}</li>)}
+          </ul>
+        </div>
+      )}
+      {vocabulary && vocabulary.length > 0 && (
+        <div>
+          <p className="font-medium text-sm">Từ vựng:</p>
+          <ul className="mt-1 space-y-1 text-sm text-gray-600 list-disc list-inside">
+            {vocabulary.map((item, i) => <li key={i}>{item}</li>)}
+          </ul>
+        </div>
+      )}
+      {structure && (
+        <div>
+          <p className="font-medium text-sm">Bố cục:</p>
+          <p className="text-sm text-gray-600">{structure}</p>
+        </div>
+      )}
+    </div>
+  )
+}

src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }