mirror of
https://github.com/nihonbuzz/nihonbuzz-academy.git
synced 2026-01-26 05:25:37 +07:00
89 lines
4.5 KiB
TypeScript
89 lines
4.5 KiB
TypeScript
import DashboardLayout from '@/Layouts/DashboardLayout';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import { Button } from '@/Components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
|
|
import { BookOpen, Brain, TrendingUp } from 'lucide-react';
|
|
|
|
interface SrsStats {
|
|
due: number;
|
|
new: number;
|
|
total_learned: number;
|
|
}
|
|
|
|
export default function SrsIndex({ stats }: { stats: SrsStats }) {
|
|
return (
|
|
<DashboardLayout
|
|
header={
|
|
<h2 className="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
|
|
Vocabulary SRS
|
|
</h2>
|
|
}
|
|
>
|
|
<Head title="Vocabulary Flashcards" />
|
|
|
|
<div className="py-12">
|
|
<div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-8">
|
|
{/* Due Reviews Card */}
|
|
<Card className="bg-orange-50 border-orange-200">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium text-orange-900">
|
|
Review Due
|
|
</CardTitle>
|
|
<Brain className="h-4 w-4 text-orange-600" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-4xl font-bold text-orange-700">{stats.due}</div>
|
|
<p className="text-xs text-orange-600 mt-1">Cards ready to review</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* New Cards Card */}
|
|
<Card className="bg-blue-50 border-blue-200">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium text-blue-900">
|
|
New Cards
|
|
</CardTitle>
|
|
<BookOpen className="h-4 w-4 text-blue-600" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-4xl font-bold text-blue-700">{stats.new}</div>
|
|
<p className="text-xs text-blue-600 mt-1">Ready to learn</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Total Learned Card */}
|
|
<Card className="bg-green-50 border-green-200">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium text-green-900">
|
|
Total Learned
|
|
</CardTitle>
|
|
<TrendingUp className="h-4 w-4 text-green-600" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-4xl font-bold text-green-700">{stats.total_learned}</div>
|
|
<p className="text-xs text-green-600 mt-1">Vocabulary mastered</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="flex justify-center">
|
|
{stats.due + stats.new > 0 ? (
|
|
<Link href={route('srs.practice')}>
|
|
<Button size="lg" className="w-full md:w-auto px-12 py-6 text-lg font-bold bg-nihonbuzz-red hover:bg-nihonbuzz-red/90 shadow-xl shadow-nihonbuzz-red/20 rounded-2xl transition-all hover:scale-105 active:scale-95">
|
|
Start Session ({stats.due + stats.new})
|
|
</Button>
|
|
</Link>
|
|
) : (
|
|
<div className="text-center p-12 bg-gray-50 rounded-3xl border border-gray-100">
|
|
<h3 className="text-xl font-bold text-gray-800 mb-2">All Caught Up! 🎉</h3>
|
|
<p className="text-gray-500">You have no cards due for review. Come back later!</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
}
|