blob: d39f06378632d13c50eb19ecbaf703188716b4a4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
import {
faChevronLeft,
faCirclePlay,
faLayerGroup,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useAtomValue } from "jotai";
import { Suspense } from "react";
import { Link, useParams } from "wouter";
import { cardsByDeckAtomFamily, deckByIdAtomFamily } from "../atoms";
import { ErrorBoundary } from "../components/ErrorBoundary";
import { LoadingSpinner } from "../components/LoadingSpinner";
function DeckHeader({ deckId }: { deckId: string }) {
const deck = useAtomValue(deckByIdAtomFamily(deckId));
return (
<div className="mb-8">
<h1 className="font-display text-3xl font-semibold text-ink mb-2">
{deck.name}
</h1>
{deck.description && <p className="text-muted">{deck.description}</p>}
</div>
);
}
function DeckStats({ deckId }: { deckId: string }) {
const cards = useAtomValue(cardsByDeckAtomFamily(deckId));
// Count cards due today
const now = new Date();
const dueCards = cards.filter((card) => new Date(card.due) <= now);
return (
<div className="bg-white rounded-xl border border-border/50 p-6 mb-6">
<div className="grid grid-cols-2 gap-6">
<div>
<p className="text-sm text-muted mb-1">Total Cards</p>
<p className="text-2xl font-semibold text-ink">{cards.length}</p>
</div>
<div>
<p className="text-sm text-muted mb-1">Due Today</p>
<p className="text-2xl font-semibold text-primary">
{dueCards.length}
</p>
</div>
</div>
</div>
);
}
function DeckContent({ deckId }: { deckId: string }) {
return (
<div className="animate-fade-in">
{/* Deck Header */}
<ErrorBoundary>
<Suspense fallback={<LoadingSpinner />}>
<DeckHeader deckId={deckId} />
</Suspense>
</ErrorBoundary>
{/* Deck Stats */}
<ErrorBoundary>
<Suspense fallback={<LoadingSpinner />}>
<DeckStats deckId={deckId} />
</Suspense>
</ErrorBoundary>
{/* Action Buttons */}
<div className="space-y-4">
{/* Study Button */}
<Link
href={`/decks/${deckId}/study`}
className="flex items-center justify-center gap-3 w-full bg-success hover:bg-success/90 text-white font-medium py-4 px-6 rounded-xl transition-all duration-200 active:scale-[0.98] shadow-sm hover:shadow-md"
>
<FontAwesomeIcon
icon={faCirclePlay}
className="w-6 h-6"
aria-hidden="true"
/>
<span className="text-lg">Study Now</span>
</Link>
{/* View Cards Link */}
<Link
href={`/decks/${deckId}/cards`}
className="flex items-center justify-center gap-3 w-full border border-border hover:bg-ivory text-slate font-medium py-4 px-6 rounded-xl transition-all duration-200 active:scale-[0.98]"
>
<FontAwesomeIcon
icon={faLayerGroup}
className="w-5 h-5"
aria-hidden="true"
/>
<span className="text-lg">View Cards</span>
</Link>
</div>
</div>
);
}
export function DeckDetailPage() {
const { deckId } = useParams<{ deckId: string }>();
if (!deckId) {
return (
<div className="min-h-screen bg-cream flex items-center justify-center">
<div className="text-center">
<p className="text-muted mb-4">Invalid deck ID</p>
<Link
href="/"
className="text-primary hover:text-primary-dark font-medium"
>
Back to decks
</Link>
</div>
</div>
);
}
return (
<div className="min-h-screen bg-cream">
{/* Header */}
<header className="bg-white border-b border-border/50">
<div className="max-w-4xl mx-auto px-4 py-4">
<Link
href="/"
className="inline-flex items-center gap-2 text-muted hover:text-slate transition-colors text-sm"
>
<FontAwesomeIcon
icon={faChevronLeft}
className="w-4 h-4"
aria-hidden="true"
/>
Back to Decks
</Link>
</div>
</header>
{/* Main Content */}
<main className="max-w-4xl mx-auto px-4 py-8">
<ErrorBoundary>
<Suspense fallback={<LoadingSpinner />}>
<DeckContent deckId={deckId} />
</Suspense>
</ErrorBoundary>
</main>
</div>
);
}
|
