renolation/english
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
renolation
2026-04-18 23:16:52 +07:00
parent 3e0b3f6a6d
commit 309609fccb
32 changed files with 2261 additions and 1030 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/features/writing/components/WritingChecker.tsx
View File

@@ -95,60 +95,104 @@ export function WritingChecker() {
)
}
const sentenceCount = text.split(/[.!?]+/).filter(s => s.trim()).length
const wordCount = text.split(/\s+/).filter(Boolean).length
return (
<div className="px-4 lg:px-6 py-6 max-w-6xl mx-auto page-enter">
<div className="mb-6">
<h1 className="text-2xl font-extrabold text-slate-800 mb-1">AI Chấm Writing</h1>
<p className="text-slate-500 text-sm">Nhận phản hồi tức thì về ngữ pháp, từ vựng và cấu trúc bài viết.</p>
<div className="px-6 lg:px-10 py-10 max-w-6xl mx-auto page-enter">
{/* Editorial page head */}
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 mb-10">
<div className="min-w-0">
<div className="at-eyebrow mb-3 inline-flex items-center gap-1.5">
<span className="material-symbols-outlined" style={{ fontSize: 12 }}>auto_awesome</span>
AI Writing Checker
</div>
<h1 className="at-title text-4xl lg:text-[44px]">
Kiểm tra <i>bài viết</i>
</h1>
<p className="mt-4 text-sm" style={{ color: 'var(--at-mute)' }}>
Dán bài viết — AI sẽ kiểm tra ngữ pháp, chính tả, và chấm điểm IELTS/TOEIC
</p>
</div>
<div className="flex gap-2.5 flex-shrink-0">
<button
className="inline-flex items-center gap-2 px-4 py-3 rounded-xl text-[13.5px] font-semibold transition-colors hover:opacity-80"
style={{ background: 'var(--at-surface)', border: '1px solid var(--at-line)', color: 'var(--at-ink-2)' }}
>
<span className="material-symbols-outlined" style={{ fontSize: 16 }}>mic</span>
Nhập bằng giọng nói
</button>
<button
onClick={handleSubmit}
disabled={!canSubmit}
className={cn(
'inline-flex items-center gap-2 px-5 py-3 rounded-xl text-[13.5px] font-semibold transition-opacity',
canSubmit ? 'hover:opacity-90' : 'cursor-not-allowed opacity-50',
)}
style={{ background: 'var(--at-ink)', color: 'var(--at-paper)', border: '1px solid var(--at-ink)' }}
>
{isPending ? (
<>
<span className="w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" />
Đang chấm...
</>
) : (
<>
<span className="material-symbols-outlined" style={{ fontSize: 16 }}>auto_awesome</span>
Kiểm tra ngay
</>
)}
</button>
</div>
</div>
<div className="flex flex-col lg:flex-row gap-5">
<div className="grid lg:grid-cols-[1.5fr_1fr] gap-5">
{/* Left: Input */}
<div className="flex-1 min-w-0">
<div className="bg-white rounded-2xl border border-slate-200 p-5">
<div className="flex items-center justify-between mb-3">
<span className="text-sm font-semibold text-slate-700">Bài writing của bạn</span>
<span className={cn('text-xs tabular-nums', charCount > MAX_CHARS ? 'text-red-500 font-bold' : 'text-slate-400')}>
{charCount}/{MAX_CHARS}
</span>
<div className="min-w-0">
<div
className="rounded-2xl overflow-hidden"
style={{ background: 'var(--at-surface)', border: '1px solid var(--at-line)' }}
>
<div
className="px-5 py-3.5 flex items-center justify-between"
style={{ background: 'var(--at-paper-2)', borderBottom: '1px solid var(--at-line)' }}
>
<div className="flex gap-1.5">
<span className="at-chip">
<span className="at-chip-dot" />
Đề: Working from home
</span>
<span className="at-chip at-chip-brand">
<span className="at-chip-dot" />
Essay · Band 6-7
</span>
</div>
<div className="text-xs tabular-nums" style={{ color: charCount > MAX_CHARS ? 'var(--at-bad)' : 'var(--at-mute)' }}>
{wordCount} từ · {sentenceCount} câu · {charCount}/{MAX_CHARS}
</div>
</div>
<textarea
value={text}
onChange={(e) => setText(e.target.value.slice(0, MAX_CHARS))}
rows={12}
dir="ltr"
placeholder="Nhập bài writing của bạn vào đây... (TOEIC email, IELTS task, hoặc đoạn văn tự do)"
className="w-full resize-none rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm text-left text-slate-800 placeholder:text-slate-400 focus:outline-none focus:border-blue-400 focus:bg-white transition-colors"
/>
<div className="mt-3 flex items-center justify-between">
<div className="flex items-center gap-1.5">
<span className="material-symbols-outlined text-slate-400" style={{ fontSize: 14 }}>info</span>
<span className={cn('text-xs font-medium', remaining <= 1 ? 'text-red-500' : 'text-slate-400')}>
<div className="p-5">
<textarea
value={text}
onChange={(e) => setText(e.target.value.slice(0, MAX_CHARS))}
rows={12}
dir="ltr"
placeholder="Bắt đầu viết hoặc dán bài của bạn ở đây..."
className="w-full resize-none bg-transparent border-none outline-none"
style={{
fontFamily: 'var(--at-sans)',
fontSize: 15,
lineHeight: 1.7,
color: 'var(--at-ink)',
minHeight: 280,
}}
/>
<div className="mt-3 flex items-center gap-1.5">
<span className="material-symbols-outlined" style={{ fontSize: 14, color: 'var(--at-mute)' }}>info</span>
<span className="text-xs font-medium" style={{ color: remaining <= 1 ? 'var(--at-bad)' : 'var(--at-mute)' }}>
Còn {remaining}/{dailyLimit} lượt hôm nay
</span>
</div>
<button
onClick={handleSubmit}
disabled={!canSubmit}
className={cn(
'flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-bold transition-all',
canSubmit
? 'bg-blue-600 text-white hover:bg-blue-700 shadow-lg shadow-blue-600/20'
: 'bg-slate-100 text-slate-400 cursor-not-allowed',
)}
>
{isPending ? (
<>
<span className="w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" />
Đang chấm...
</>
) : (
<>
<span className="material-symbols-outlined" style={{ fontSize: 18 }}>auto_fix_high</span>
Chấm bài ngay
</>
)}
</button>
</div>
</div>
@@ -172,11 +216,16 @@ export function WritingChecker() {
</div>
{/* Right: Feedback */}
<div className="lg:w-80 flex-shrink-0">
<div className="flex flex-col gap-5">
{!feedback && !isPending && (
<div className="bg-white rounded-2xl border border-slate-200 p-6 flex flex-col items-center justify-center text-center h-full min-h-48">
<span className="material-symbols-outlined text-slate-300 mb-3" style={{ fontSize: 48 }}>auto_fix_high</span>
<p className="text-sm text-slate-400">Nhập bài và nhấn "Chấm bài ngay" để nhận phản hồi từ AI</p>
<div className="at-tip">
<div className="at-tip-label">AI kiểm tra gì?</div>
<div className="text-[12.5px] leading-[1.55]" style={{ color: 'var(--at-ink-2)' }}>
Ngữ pháp · Chính tả · Từ vựng học thuật · Tính mạch lạc · Chấm điểm theo band IELTS/TOEIC.
Một bài TOEIC Writing band 7+ cần{' '}
<b style={{ color: 'var(--at-warm)', fontWeight: 700 }}>ít nhất 250 từ</b> và sử dụng{' '}
<b style={{ color: 'var(--at-warm)', fontWeight: 700 }}>3-4 linking words</b>.
</div>
</div>
)}