blob: 792bbe2715f5c31af515b3644526093f86575900 (
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
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 { getEndOfStudyDayBoundary } from "../../shared/date";
import { cardsByDeckAtomFamily, deckByIdAtomFamily } from "../atoms";
import { ErrorBoundary } from "../components/ErrorBoundary";
import { LoadingSpinner } from "../components/LoadingSpinner";
function DeckHeader({ deckId }: { deckId: string }) {
const { data: 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 { data: cards } = useAtomValue(cardsByDeckAtomFamily(deckId));
// Count cards due today (study day boundary is 3:00 AM)
const boundary = getEndOfStudyDayBoundary();
const dueCards = cards.filter((card) => new Date(card.due) < boundary);
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={
<div className="mb-8">
<div className="h-9 w-48 bg-muted/20 rounded animate-pulse mb-2" />
<div className="h-5 w-64 bg-muted/20 rounded animate-pulse" />
</div>
}
>
<DeckHeader deckId={deckId} />
</Suspense>
</ErrorBoundary>
{/* Deck Stats */}
<ErrorBoundary>
<Suspense
fallback={
<div className="bg-white rounded-xl border border-border/50 p-6 mb-6">
<div className="grid grid-cols-2 gap-6">
<div>
<div className="h-4 w-20 bg-muted/20 rounded animate-pulse mb-1" />
<div className="h-8 w-12 bg-muted/20 rounded animate-pulse" />
</div>
<div>
<div className="h-4 w-20 bg-muted/20 rounded animate-pulse mb-1" />
<div className="h-8 w-12 bg-muted/20 rounded animate-pulse" />
</div>
</div>
</div>
}
>
<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>
);
}
|
