Add study activity tracking and refresh class header UI
All checks were successful
Automated Container Build / build-and-push (push) Successful in 54s
All checks were successful
Automated Container Build / build-and-push (push) Successful in 54s
This commit is contained in:
parent
95af276d2e
commit
dad62c9914
21 changed files with 1598 additions and 44 deletions
199
src/components/activity/ActivityBanner.tsx
Normal file
199
src/components/activity/ActivityBanner.tsx
Normal file
|
|
@ -0,0 +1,199 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
interface DailyActivity {
|
||||
date: string;
|
||||
flashcards: number;
|
||||
questions: number;
|
||||
total: number;
|
||||
level: 0 | 1 | 2 | 3 | 4;
|
||||
}
|
||||
|
||||
interface ActivitySummary {
|
||||
days: DailyActivity[];
|
||||
today: string;
|
||||
activeDays: number;
|
||||
flashcards: number;
|
||||
questions: number;
|
||||
currentStreak: number;
|
||||
}
|
||||
|
||||
const levelClasses = [
|
||||
"bg-white/10",
|
||||
"bg-primary/45",
|
||||
"bg-primary",
|
||||
"bg-accent",
|
||||
"bg-[#fbbf24]",
|
||||
] as const;
|
||||
|
||||
export function ActivityBanner({ onNewClass }: { onNewClass: () => void }) {
|
||||
const [summary, setSummary] = useState<ActivitySummary | null>(null);
|
||||
const [error, setError] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/activity")
|
||||
.then((response) => {
|
||||
if (!response.ok) throw new Error("Failed to load activity");
|
||||
return response.json();
|
||||
})
|
||||
.then(setSummary)
|
||||
.catch(() => setError(true));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="relative mb-10 overflow-hidden rounded-[2rem] bg-[#172033] px-5 py-7 text-white shadow-[var(--shadow-card)] sm:px-8 sm:py-9 dark:bg-[#111827]">
|
||||
<div className="absolute -right-16 -top-24 h-64 w-64 rounded-full bg-primary/70 blur-3xl" />
|
||||
<div className="absolute -bottom-28 right-1/3 h-52 w-52 rounded-full bg-accent/35 blur-3xl" />
|
||||
<div className="relative mb-6 flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs font-bold uppercase tracking-[0.22em] text-white/55">Personal library</p>
|
||||
<h1 className="editorial-title mt-1 text-3xl text-white sm:text-4xl">Study activity</h1>
|
||||
</div>
|
||||
<button onClick={onNewClass} className="inline-flex min-h-11 shrink-0 items-center justify-center gap-2 rounded-xl bg-white px-4 text-sm font-bold text-[#172033] shadow-lg transition-transform hover:-translate-y-0.5 sm:min-h-12 sm:px-5">
|
||||
<span className="text-xl leading-none">+</span> New class
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="relative rounded-xl border border-white/15 bg-white/8 px-4 py-5 text-sm text-white/70" role="alert">
|
||||
Study activity could not be loaded. Your library is still available below.
|
||||
</div>
|
||||
)}
|
||||
{!summary && !error && <div className="relative h-52 animate-subtle-pulse rounded-2xl bg-white/8" />}
|
||||
{summary && (
|
||||
<div className="relative grid gap-6 xl:grid-cols-[minmax(0,1fr)_10rem] xl:items-center">
|
||||
<div className="min-w-0">
|
||||
<ActivityHeatmap days={summary.days} today={summary.today} />
|
||||
<div className="mt-5 grid grid-cols-3 gap-3 border-t border-white/12 pt-5">
|
||||
<SummaryStat value={summary.activeDays} label="Active days" />
|
||||
<SummaryStat value={summary.flashcards} label="Flashcards" />
|
||||
<SummaryStat value={summary.questions} label="Questions" />
|
||||
</div>
|
||||
</div>
|
||||
<StreakDisplay streak={summary.currentStreak} />
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ActivityHeatmap({ days, today }: { days: DailyActivity[]; today: string }) {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const [activeDay, setActiveDay] = useState<DailyActivity | null>(null);
|
||||
const weeks = useMemo(
|
||||
() => Array.from({ length: 53 }, (_, index) => days.slice(index * 7, index * 7 + 7)),
|
||||
[days]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const container = scrollRef.current;
|
||||
if (container) container.scrollLeft = container.scrollWidth;
|
||||
}, [days]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="relative mb-2 h-12">
|
||||
<p className="absolute bottom-0 left-0 text-xs font-semibold text-white/55">Last 53 weeks · Arizona time</p>
|
||||
<div className="absolute right-0 top-0">
|
||||
{activeDay && <DayTooltip day={activeDay} />}
|
||||
</div>
|
||||
</div>
|
||||
<div ref={scrollRef} className="overflow-x-auto pb-2 [scrollbar-color:rgba(255,255,255,.25)_transparent]">
|
||||
<div className="grid w-max grid-cols-[2rem_auto] gap-2">
|
||||
<div className="pt-6 text-[10px] font-semibold leading-[15px] text-white/45" aria-hidden>
|
||||
<div className="h-[15px]" />
|
||||
<div>Mon</div>
|
||||
<div className="h-[15px]" />
|
||||
<div>Wed</div>
|
||||
<div className="h-[15px]" />
|
||||
<div>Fri</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="mb-2 flex h-4 gap-[3px] text-[10px] font-semibold text-white/45" aria-hidden>
|
||||
{weeks.map((week, index) => (
|
||||
<div key={week[0]?.date ?? index} className="w-3">
|
||||
{getMonthLabel(week, weeks[index - 1])}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-[3px]" role="group" aria-label="Study activity over the last 53 weeks">
|
||||
{weeks.map((week, weekIndex) => (
|
||||
<div key={week[0]?.date ?? weekIndex} className="grid grid-rows-7 gap-[3px]">
|
||||
{week.map((day) => day.date > today ? (
|
||||
<span key={day.date} aria-hidden className="h-3 w-3" />
|
||||
) : (
|
||||
<button
|
||||
key={day.date}
|
||||
type="button"
|
||||
aria-label={getDayAriaLabel(day)}
|
||||
onMouseEnter={() => setActiveDay(day)}
|
||||
onMouseLeave={() => setActiveDay(null)}
|
||||
onFocus={() => setActiveDay(day)}
|
||||
onBlur={() => setActiveDay(null)}
|
||||
onClick={() => setActiveDay((current) => current?.date === day.date ? null : day)}
|
||||
className={`h-3 w-3 rounded-[3px] border border-white/8 ${levelClasses[day.level]} focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 flex items-center justify-end gap-1.5 text-[10px] font-semibold text-white/45" aria-label="Activity intensity from less to more">
|
||||
<span>Less</span>
|
||||
{levelClasses.map((className, index) => <span key={index} className={`h-3 w-3 rounded-[3px] border border-white/8 ${className}`} />)}
|
||||
<span>More</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DayTooltip({ day }: { day: DailyActivity }) {
|
||||
const formatted = new Date(`${day.date}T12:00:00Z`).toLocaleDateString("en-US", {
|
||||
timeZone: "America/Phoenix",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
return (
|
||||
<div role="tooltip" className="rounded-lg border border-white/15 bg-[#0d1422] px-3 py-2 text-right text-xs shadow-xl">
|
||||
<div className="font-bold text-white">{formatted} · {day.total} total</div>
|
||||
<div className="mt-0.5 text-white/60">{day.flashcards} flashcards · {day.questions} questions</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StreakDisplay({ streak }: { streak: number }) {
|
||||
const size = 24 + Math.min(streak, 30) * 0.6;
|
||||
const color = streak === 0 ? "text-white/30" : streak < 7 ? "text-accent" : streak < 30 ? "text-[#ff7a36]" : "text-[#fbbf24]";
|
||||
return (
|
||||
<div className="flex items-center justify-center gap-4 rounded-2xl border border-white/12 bg-white/7 px-5 py-4 xl:flex-col xl:gap-2 xl:text-center">
|
||||
<svg viewBox="0 0 24 24" aria-hidden className={`shrink-0 fill-current ${color}`} style={{ width: size, height: size }}>
|
||||
<path d="M13.5 2.1c.4 3.1-1.4 4.5-2.6 6.1-1 1.3-1.5 2.4-.8 4.1.5-1.4 1.5-2.3 2.5-3.2 1.8 1.6 3.4 3.6 3.4 6.3 0 2.5-1.7 4.6-4 4.6s-4-2-4-4.6c0-1.2.4-2.3 1-3.3-2.4 1.3-4 3.7-4 6.3 0 3.1 2.8 5.6 7 5.6s7-2.7 7-6.7c0-5.6-3.4-10.3-5.5-15.2Z" />
|
||||
</svg>
|
||||
<div>
|
||||
<div className="text-3xl font-extrabold">{streak}</div>
|
||||
<div className="text-xs font-semibold text-white/55">day streak</div>
|
||||
<div className="mt-1 text-[10px] text-white/40">20 activities per day</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SummaryStat({ value, label }: { value: number; label: string }) {
|
||||
return <div><div className="text-xl font-extrabold sm:text-2xl">{value}</div><div className="mt-1 text-xs font-semibold text-white/50">{label}</div></div>;
|
||||
}
|
||||
|
||||
function getMonthLabel(week: DailyActivity[], previousWeek?: DailyActivity[]) {
|
||||
const firstOfMonth = week.find((day) => Number(day.date.slice(8, 10)) <= 7);
|
||||
if (!firstOfMonth) return "";
|
||||
const month = firstOfMonth.date.slice(5, 7);
|
||||
if (previousWeek?.some((day) => day.date.slice(5, 7) === month)) return "";
|
||||
return new Date(`${firstOfMonth.date}T12:00:00Z`).toLocaleDateString("en-US", { month: "short", timeZone: "America/Phoenix" });
|
||||
}
|
||||
|
||||
function getDayAriaLabel(day: DailyActivity) {
|
||||
return `${day.date}: ${day.flashcards} flashcards and ${day.questions} questions, ${day.total} total activities`;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue