295 lines
10 KiB
TypeScript
295 lines
10 KiB
TypeScript
import { useAuthStore } from "../../stores/authStore";
|
|
import { useEffect, useState } from "react";
|
|
import { api } from "../../utils/api";
|
|
import { type Lesson } from "../../types/lesson";
|
|
import { LessonSkeleton } from "../../components/LessonSkeleton";
|
|
import { LessonModal } from "../../components/LessonModal";
|
|
import { BookOpen, Calculator } from "lucide-react";
|
|
|
|
const DOTS = [
|
|
{ size: 10, color: "#f97316", top: "6%", left: "4%", delay: "0s" },
|
|
{ size: 7, color: "#a855f7", top: "25%", left: "2%", delay: "1.2s" },
|
|
{ size: 9, color: "#22c55e", top: "60%", left: "3%", delay: "0.6s" },
|
|
{ size: 12, color: "#3b82f6", top: "10%", right: "4%", delay: "1.8s" },
|
|
{ size: 7, color: "#f43f5e", top: "45%", right: "2%", delay: "0.9s" },
|
|
{ size: 9, color: "#eab308", top: "75%", right: "5%", delay: "0.4s" },
|
|
];
|
|
|
|
const STYLES = `
|
|
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
|
|
|
|
.ls-screen {
|
|
min-height: 100vh;
|
|
background: #fffbf4;
|
|
font-family: 'Nunito', sans-serif;
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.ls-blob { position: fixed; pointer-events: none; z-index: 0; filter: blur(48px); opacity: 0.35; }
|
|
.ls-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:lsWobble1 14s ease-in-out infinite; }
|
|
.ls-blob-2 { width:190px;height:190px;background:#a5f3c0;bottom:-50px;left:6%;border-radius:40% 60% 30% 70%/60% 40% 60% 40%;animation:lsWobble2 16s ease-in-out infinite; }
|
|
.ls-blob-3 { width:210px;height:210px;background:#fbcfe8;top:15%;right:-60px;border-radius:70% 30% 50% 50%/40% 60% 40% 60%;animation:lsWobble1 18s ease-in-out infinite reverse; }
|
|
.ls-blob-4 { width:150px;height:150px;background:#bfdbfe;bottom:12%;right:2%;border-radius:50% 50% 30% 70%/60% 40% 60% 40%;animation:lsWobble2 12s ease-in-out infinite; }
|
|
|
|
@keyframes lsWobble1 {
|
|
0%,100%{border-radius:60% 40% 70% 30%/50% 60% 40% 50%;transform:translate(0,0) rotate(0deg);}
|
|
50%{border-radius:40% 60% 30% 70%/60% 40% 60% 40%;transform:translate(12px,16px) rotate(8deg);}
|
|
}
|
|
@keyframes lsWobble2 {
|
|
0%,100%{border-radius:40% 60% 30% 70%/60% 40% 60% 40%;transform:translate(0,0) rotate(0deg);}
|
|
50%{border-radius:60% 40% 70% 30%/40% 60% 40% 60%;transform:translate(-10px,12px) rotate(-6deg);}
|
|
}
|
|
|
|
.ls-dot { position:fixed;border-radius:50%;pointer-events:none;z-index:0;opacity:0.3;animation:lsFloat 7s ease-in-out infinite; }
|
|
@keyframes lsFloat {
|
|
0%,100%{transform:translateY(0) rotate(0deg);}
|
|
50%{transform:translateY(-12px) rotate(180deg);}
|
|
}
|
|
|
|
.ls-inner {
|
|
position: relative; z-index: 1;
|
|
max-width: 680px; margin: 0 auto;
|
|
padding: 2rem 1.25rem 4rem;
|
|
display: flex; flex-direction: column; gap: 1.25rem;
|
|
}
|
|
|
|
@keyframes lsPopIn {
|
|
from { opacity:0; transform: scale(0.92) translateY(12px); }
|
|
to { opacity:1; transform: scale(1) translateY(0); }
|
|
}
|
|
.ls-anim { animation: lsPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
|
|
.ls-anim-1 { animation-delay: 0.05s; }
|
|
.ls-anim-2 { animation-delay: 0.1s; }
|
|
.ls-anim-3 { animation-delay: 0.15s; }
|
|
|
|
/* Header */
|
|
.ls-header { animation: lsPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
|
|
.ls-title { font-size: 1.8rem; font-weight: 900; color: #1e1b4b; letter-spacing: -0.02em; }
|
|
.ls-sub {
|
|
font-family: 'Nunito Sans', sans-serif;
|
|
font-size: 0.85rem; font-weight: 600; color: #9ca3af; margin-top: 0.25rem;
|
|
line-height: 1.5; max-width: 420px;
|
|
}
|
|
|
|
/* Tabs */
|
|
.ls-tabs-list {
|
|
display: flex; gap: 0.5rem; margin-bottom: 1.25rem;
|
|
}
|
|
.ls-tab-btn {
|
|
display: flex; align-items: center; gap: 0.5rem;
|
|
padding: 0.55rem 1.1rem; border-radius: 100px; cursor: pointer; border: none;
|
|
font-family: 'Nunito', sans-serif; font-size: 0.82rem; font-weight: 800;
|
|
transition: all 0.2s ease;
|
|
background: white; border: 2.5px solid #f3f4f6; color: #9ca3af;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
}
|
|
.ls-tab-btn.active {
|
|
background: #1e1b4b; border-color: #1e1b4b; color: white;
|
|
box-shadow: 0 4px 0 #1e1b4b66;
|
|
}
|
|
.ls-tab-btn:not(.active):hover { border-color: #c4b5fd; color: #7c3aed; }
|
|
|
|
/* Lesson grid */
|
|
.ls-grid {
|
|
display: grid; gap: 0.85rem; grid-template-columns: 1fr;
|
|
}
|
|
@media(min-width: 480px) { .ls-grid { grid-template-columns: 1fr 1fr; } }
|
|
|
|
/* Lesson card */
|
|
.ls-card {
|
|
background: white; border: 2.5px solid #f3f4f6; border-radius: 22px;
|
|
overflow: hidden; cursor: pointer;
|
|
box-shadow: 0 4px 14px rgba(0,0,0,0.04);
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
.ls-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); }
|
|
.ls-card:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(0,0,0,0.05); }
|
|
|
|
.ls-card-thumb {
|
|
width: 100%; aspect-ratio: 16/9; object-fit: cover;
|
|
display: block; background: #f3f4f6;
|
|
}
|
|
.ls-card-body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
|
|
.ls-card-title { font-size: 0.92rem; font-weight: 900; color: #1e1b4b; line-height: 1.3; }
|
|
.ls-card-topic {
|
|
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
display: flex; align-items: center; gap: 0.35rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
.ls-card-topic.rw { color: #a855f7; }
|
|
.ls-card-topic.math { color: #0891b2; }
|
|
.ls-topic-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
|
|
.ls-topic-dot.rw { background: #a855f7; }
|
|
.ls-topic-dot.math { background: #0891b2; }
|
|
|
|
/* Empty / error */
|
|
.ls-empty {
|
|
grid-column: 1 / -1; text-align: center; padding: 3rem 1rem;
|
|
background: white; border: 2.5px dashed #e5e7eb; border-radius: 22px;
|
|
display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
|
|
}
|
|
.ls-empty-emoji { font-size: 2.5rem; }
|
|
.ls-empty-text { font-size: 0.9rem; font-weight: 700; color: #9ca3af; }
|
|
|
|
/* Skeleton shimmer override */
|
|
.ls-skeleton-grid { display: grid; gap: 0.85rem; grid-template-columns: 1fr; }
|
|
@media(min-width: 480px) { .ls-skeleton-grid { grid-template-columns: 1fr 1fr; } }
|
|
`;
|
|
|
|
export const Lessons = () => {
|
|
const user = useAuthStore((state) => state.user);
|
|
const [lessons, setLessons] = useState<Lesson[]>([]);
|
|
const [lessonLoading, setLessonLoading] = useState(true);
|
|
const [activeTab, setActiveTab] = useState<"rw" | "math">("rw");
|
|
const [selectedLessonId, setSelectedLessonId] = useState<string | null>(null);
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
|
|
const handleLessonClick = (id: string) => {
|
|
setSelectedLessonId(id);
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const fetchAllLessons = async () => {
|
|
if (!user) return;
|
|
try {
|
|
setLessonLoading(true);
|
|
const authStorage = localStorage.getItem("auth-storage");
|
|
if (!authStorage) return;
|
|
const {
|
|
state: { token },
|
|
} = JSON.parse(authStorage) as { state?: { token?: string } };
|
|
if (!token) return;
|
|
const response = await api.fetchAllLessons(token);
|
|
setLessons(response.data);
|
|
} catch (e) {
|
|
console.error(e);
|
|
} finally {
|
|
setLessonLoading(false);
|
|
}
|
|
};
|
|
fetchAllLessons();
|
|
}, [user]);
|
|
|
|
const renderGrid = (variant: "rw" | "math") => {
|
|
if (lessonLoading) {
|
|
return (
|
|
<div className="ls-skeleton-grid">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<LessonSkeleton key={i} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
if (!lessons.length) {
|
|
return (
|
|
<div className="ls-grid">
|
|
<div className="ls-empty">
|
|
<span className="ls-empty-emoji">📭</span>
|
|
<p className="ls-empty-text">No lessons available yet.</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div className="ls-grid">
|
|
{lessons.map((lesson) => (
|
|
<div
|
|
key={lesson.id}
|
|
className="ls-card"
|
|
onClick={() => handleLessonClick(lesson.id)}
|
|
>
|
|
<img
|
|
src={lesson.thumbnail_url}
|
|
alt={lesson.title}
|
|
className="ls-card-thumb"
|
|
/>
|
|
<div className="ls-card-body">
|
|
<p className="ls-card-title">{lesson.title}</p>
|
|
<p className={`ls-card-topic ${variant}`}>
|
|
<span className={`ls-topic-dot ${variant}`} />
|
|
{lesson.topic.name}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="ls-screen pb-12">
|
|
<style>{STYLES}</style>
|
|
|
|
{/* Blobs */}
|
|
<div className="ls-blob ls-blob-1" />
|
|
<div className="ls-blob ls-blob-2" />
|
|
<div className="ls-blob ls-blob-3" />
|
|
<div className="ls-blob ls-blob-4" />
|
|
|
|
{/* Dots */}
|
|
{DOTS.map((d, i) => (
|
|
<div
|
|
key={i}
|
|
className="ls-dot"
|
|
style={
|
|
{
|
|
width: d.size,
|
|
height: d.size,
|
|
background: d.color,
|
|
top: d.top,
|
|
left: d.left,
|
|
right: d.right,
|
|
animationDelay: d.delay,
|
|
animationDuration: `${5 + i * 0.5}s`,
|
|
} as React.CSSProperties
|
|
}
|
|
/>
|
|
))}
|
|
|
|
<div className="ls-inner">
|
|
{/* Header */}
|
|
<header className="ls-header">
|
|
<h1 className="ls-title">📚 Lessons</h1>
|
|
<p className="ls-sub">
|
|
Step-by-step lessons from expert Edbridge tutors — pick up tips to
|
|
tackle similar questions with confidence.
|
|
</p>
|
|
</header>
|
|
|
|
{/* Tabs + content */}
|
|
<section className="ls-anim ls-anim-1">
|
|
<div className="ls-tabs-list">
|
|
<button
|
|
className={`ls-tab-btn${activeTab === "rw" ? " active" : ""}`}
|
|
onClick={() => setActiveTab("rw")}
|
|
>
|
|
<BookOpen size={15} /> Reading & Writing
|
|
</button>
|
|
<button
|
|
className={`ls-tab-btn${activeTab === "math" ? " active" : ""}`}
|
|
onClick={() => setActiveTab("math")}
|
|
>
|
|
<Calculator size={15} /> Math
|
|
</button>
|
|
</div>
|
|
|
|
{renderGrid(activeTab)}
|
|
</section>
|
|
</div>
|
|
|
|
<LessonModal
|
|
open={isModalOpen}
|
|
lessonId={selectedLessonId}
|
|
onOpenChange={(open) => {
|
|
setIsModalOpen(open);
|
|
if (!open) setSelectedLessonId(null);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|