feat(lessons): add lessons from client db
This commit is contained in:
shafin-r
@ -1,11 +1,25 @@
|
||||
import { useAuthStore } from "../../stores/authStore";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useState, useMemo } from "react";
|
||||
import { api } from "../../utils/api";
|
||||
import { type Lesson } from "../../types/lesson";
|
||||
import { LessonSkeleton } from "../../components/LessonSkeleton";
|
||||
import { type Lesson, type LessonMetadata } from "../../types/lesson";
|
||||
import { LessonModal } from "../../components/LessonModal";
|
||||
import { BookOpen, Calculator } from "lucide-react";
|
||||
import {
|
||||
BookOpen,
|
||||
Calculator,
|
||||
Video,
|
||||
ChevronRight,
|
||||
Search,
|
||||
X,
|
||||
Play,
|
||||
} from "lucide-react";
|
||||
import { truncate } from "../../lib/utils";
|
||||
import { EBRW_LESSONS, MATH_LESSONS } from "../../utils/constants";
|
||||
import { renderLessonIcon } from "../../components/RenderLessonIcon";
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────────────────────
|
||||
type VideoSubTab = "rw" | "math";
|
||||
|
||||
// ─── Decorative dots ─────────────────────────────────────────────────────────
|
||||
const DOTS = [
|
||||
{ size: 10, color: "#f97316", top: "6%", left: "4%", delay: "0s" },
|
||||
{ size: 7, color: "#a855f7", top: "25%", left: "2%", delay: "1.2s" },
|
||||
@ -15,6 +29,7 @@ const DOTS = [
|
||||
{ size: 9, color: "#eab308", top: "75%", right: "5%", delay: "0.4s" },
|
||||
];
|
||||
|
||||
// ─── Styles ───────────────────────────────────────────────────────────────────
|
||||
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');
|
||||
|
||||
@ -26,126 +41,421 @@ const STYLES = `
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.ls-blob { position: fixed; pointer-events: none; z-index: 0; filter: blur(48px); opacity: 0.35; }
|
||||
.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);}
|
||||
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);}
|
||||
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; }
|
||||
.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);}
|
||||
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;
|
||||
position:relative; z-index:1;
|
||||
max-width:680px; margin:0 auto;
|
||||
padding:2rem 1.25rem 6rem;
|
||||
display:flex; flex-direction:column; gap:1.5rem;
|
||||
}
|
||||
|
||||
@keyframes lsPopIn {
|
||||
from { opacity:0; transform: scale(0.92) translateY(12px); }
|
||||
to { opacity:1; transform: scale(1) translateY(0); }
|
||||
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; }
|
||||
.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;
|
||||
.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;
|
||||
/* ── Search ── */
|
||||
.ls-search-wrap {
|
||||
position: relative;
|
||||
animation: lsPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.08s both;
|
||||
}
|
||||
.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;
|
||||
.ls-search-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem 0.75rem 2.75rem;
|
||||
border-radius: 16px;
|
||||
border: 2.5px solid #f3f4f6;
|
||||
background: white;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 0.875rem; font-weight: 700; color: #1e1b4b;
|
||||
outline: none;
|
||||
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;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.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-search-input::placeholder { color: #c4b5fd; font-weight: 600; }
|
||||
.ls-search-input:focus {
|
||||
border-color: #a855f7;
|
||||
box-shadow: 0 4px 20px rgba(168,85,247,0.15);
|
||||
}
|
||||
.ls-search-icon {
|
||||
position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%);
|
||||
color: #c4b5fd; pointer-events: none; transition: color 0.2s ease;
|
||||
}
|
||||
.ls-search-wrap:focus-within .ls-search-icon { color: #a855f7; }
|
||||
.ls-search-clear {
|
||||
position: absolute; right: 0.875rem; top: 50%; transform: translateY(-50%);
|
||||
background: #f3f4f6; border: none; border-radius: 50%; cursor: pointer;
|
||||
width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
|
||||
color: #9ca3af; transition: background 0.15s ease, color 0.15s ease; padding: 0;
|
||||
}
|
||||
.ls-search-clear:hover { background: #f3e8ff; color: #a855f7; }
|
||||
.ls-search-results-hint {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.72rem; font-weight: 700; color: #9ca3af;
|
||||
padding: 0 0.25rem;
|
||||
display: flex; align-items: center; gap: 0.4rem;
|
||||
}
|
||||
.ls-search-results-hint strong { color: #a855f7; }
|
||||
|
||||
.ls-card-thumb {
|
||||
width: 100%; aspect-ratio: 16/9; object-fit: cover;
|
||||
display: block; background: #f3f4f6;
|
||||
/* ── Tabs ── */
|
||||
.ls-tabs-list { display:flex; gap:0.5rem; }
|
||||
.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-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;
|
||||
.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; }
|
||||
|
||||
/* ── Video sub-tabs ── */
|
||||
.ls-video-subtabs {
|
||||
display: flex; gap: 0.4rem;
|
||||
padding: 0.5rem;
|
||||
background: white; border: 2px solid #f3f4f6; border-radius: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
animation: lsPopIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||
}
|
||||
.ls-video-subtab-btn {
|
||||
flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.45rem;
|
||||
padding: 0.5rem 1rem; border-radius: 10px; cursor: pointer; border: none;
|
||||
font-family: 'Nunito', sans-serif; font-size: 0.78rem; font-weight: 800;
|
||||
transition: all 0.2s ease; color: #9ca3af; background: transparent;
|
||||
}
|
||||
.ls-video-subtab-btn.active { background: #fff7ed; color: #f97316; box-shadow: 0 2px 8px rgba(249,115,22,0.15); }
|
||||
.ls-video-subtab-btn:not(.active):hover { background: #fafafa; color: #6b7280; }
|
||||
.ls-video-subtab-dot { width: 7px; height: 7px; border-radius: 50%; }
|
||||
.ls-video-subtab-btn.active .ls-video-subtab-dot { background: #f97316; }
|
||||
.ls-video-subtab-btn:not(.active) .ls-video-subtab-dot { background: #d1d5db; }
|
||||
|
||||
/* ── Section group ── */
|
||||
.ls-group { display:flex; flex-direction:column; gap:0; }
|
||||
.ls-group-header {
|
||||
display:flex; align-items:center; gap:0.75rem;
|
||||
padding:0.6rem 1rem; margin-bottom:0;
|
||||
}
|
||||
.ls-group-accent { width:3px; height:1.1rem; border-radius:100px; flex-shrink:0; }
|
||||
.ls-group-accent.rw { background:#a855f7; }
|
||||
.ls-group-accent.math { background:#0891b2; }
|
||||
.ls-group-accent.video{ background:#f97316; }
|
||||
.ls-group-name {
|
||||
font-family:'Nunito Sans',sans-serif;
|
||||
font-size:0.68rem; font-weight:700; letter-spacing:0.14em;
|
||||
text-transform:uppercase; color:#9ca3af; flex:1;
|
||||
}
|
||||
.ls-group-count { font-family:'Nunito',sans-serif; font-size:0.68rem; font-weight:800; color:#d1d5db; }
|
||||
|
||||
/* ── Lesson list card ── */
|
||||
.ls-list {
|
||||
background:white; border:2px solid #f3f4f6; border-radius:20px;
|
||||
overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,0.04);
|
||||
animation:lsPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||
}
|
||||
.ls-lesson-row {
|
||||
display:flex; align-items:center; gap:1rem;
|
||||
padding:1rem 1.1rem; cursor:pointer;
|
||||
transition:background 0.15s ease; position:relative;
|
||||
}
|
||||
.ls-lesson-row:not(:last-child)::after {
|
||||
content:''; position:absolute; bottom:0; left:1.1rem; right:1.1rem;
|
||||
height:1px; background:#f3f4f6;
|
||||
}
|
||||
.ls-lesson-row:hover { background:#fafafa; }
|
||||
.ls-lesson-row:active { background:#f5f3ff; }
|
||||
.ls-row-num {
|
||||
font-family:'Nunito',sans-serif; font-size:0.7rem; font-weight:900; color:#d1d5db;
|
||||
width:1.4rem; text-align:center; flex-shrink:0; letter-spacing:0.04em;
|
||||
}
|
||||
.ls-row-icon {
|
||||
width:36px; height:36px; border-radius:10px; flex-shrink:0;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
}
|
||||
.ls-row-icon.rw { background:#f3e8ff; color:#a855f7; }
|
||||
.ls-row-icon.math { background:#e0f2fe; color:#0891b2; }
|
||||
.ls-row-icon.video { background:#fff7ed; color:#f97316; }
|
||||
.ls-row-body { flex:1; min-width:0; }
|
||||
.ls-row-title {
|
||||
font-size:0.9rem; font-weight:800; color:#1e1b4b;
|
||||
line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
|
||||
}
|
||||
.ls-row-desc {
|
||||
font-family:'Nunito Sans',sans-serif;
|
||||
font-size:0.72rem; font-weight:600; color:#9ca3af;
|
||||
margin-top:0.15rem; line-height:1.4;
|
||||
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
|
||||
}
|
||||
.ls-status {
|
||||
display:flex; align-items:center; gap:0.3rem;
|
||||
padding:0.25rem 0.6rem; border-radius:100px; flex-shrink:0;
|
||||
font-family:'Nunito',sans-serif; font-size:0.65rem; font-weight:800;
|
||||
letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap;
|
||||
}
|
||||
.ls-status.started { background:#fef9c3; color:#ca8a04; border:1.5px solid #fde047; }
|
||||
.ls-status.completed { background:#dcfce7; color:#16a34a; border:1.5px solid #86efac; }
|
||||
.ls-chevron { color:#d1d5db; flex-shrink:0; }
|
||||
.ls-lesson-row:hover .ls-chevron { color:#a855f7; }
|
||||
|
||||
/* ── Search highlight ── */
|
||||
.ls-highlight {
|
||||
background: linear-gradient(120deg, #fde68a 0%, #fbbf24 100%);
|
||||
border-radius: 3px; padding: 0 2px; color: #92400e;
|
||||
}
|
||||
|
||||
/* ── Video Cards Grid ── */
|
||||
.ls-video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
|
||||
@media (max-width: 480px) { .ls-video-grid { grid-template-columns: 1fr; } }
|
||||
|
||||
.ls-video-card {
|
||||
background: white; border: 2px solid #f3f4f6; border-radius: 16px;
|
||||
overflow: hidden; cursor: pointer;
|
||||
box-shadow: 0 4px 14px rgba(0,0,0,0.05);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
animation: lsPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||
}
|
||||
.ls-video-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(249,115,22,0.15); border-color: #fed7aa; }
|
||||
.ls-video-card:active { transform: translateY(-1px); }
|
||||
|
||||
.ls-video-thumb {
|
||||
position: relative; width: 100%; aspect-ratio: 16 / 9;
|
||||
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
.ls-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
|
||||
.ls-video-card:hover .ls-video-thumb img { transform: scale(1.04); }
|
||||
.ls-video-thumb-overlay {
|
||||
position: absolute; inset: 0;
|
||||
background: linear-gradient(to top, rgba(30,27,75,0.7) 0%, rgba(30,27,75,0.1) 50%, transparent 100%);
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.ls-video-card:hover .ls-video-thumb-overlay { opacity: 0.85; }
|
||||
.ls-video-play-btn {
|
||||
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
||||
width: 40px; height: 40px; background: rgba(255,255,255,0.95); border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
|
||||
transition: transform 0.2s ease, background 0.2s ease; color: #f97316;
|
||||
}
|
||||
.ls-video-card:hover .ls-video-play-btn { transform: translate(-50%, -50%) scale(1.1); background: white; }
|
||||
.ls-video-thumb-fallback {
|
||||
position: absolute; inset: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 60%, #4c1d95 100%);
|
||||
font-size: 1.6rem; opacity: 0.7;
|
||||
}
|
||||
.ls-video-card-body { padding: 0.75rem 0.875rem 0.875rem; }
|
||||
.ls-video-card-title {
|
||||
font-size: 0.82rem; font-weight: 800; color: #1e1b4b; line-height: 1.35;
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
||||
}
|
||||
.ls-video-card-topic {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.68rem; font-weight: 600; color: #a855f7;
|
||||
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-video-card-arrow {
|
||||
color: #f97316; opacity: 0.5; margin-top: 0.5rem;
|
||||
display: flex; justify-content: flex-end;
|
||||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
.ls-empty-emoji { font-size: 2.5rem; }
|
||||
.ls-empty-text { font-size: 0.9rem; font-weight: 700; color: #9ca3af; }
|
||||
.ls-video-card:hover .ls-video-card-arrow { opacity: 1; transform: translateX(2px); }
|
||||
|
||||
/* 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; } }
|
||||
/* ── Skeleton ── */
|
||||
.ls-skel-list { background:white; border:2px solid #f3f4f6; border-radius:20px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,0.04); }
|
||||
.ls-skel-row { display:flex; align-items:center; gap:1rem; padding:1rem 1.1rem; position:relative; }
|
||||
.ls-skel-row:not(:last-child)::after { content:''; position:absolute; bottom:0; left:1.1rem; right:1.1rem; height:1px; background:#f3f4f6; }
|
||||
.ls-skel-circle { width:36px; height:36px; border-radius:10px; flex-shrink:0; }
|
||||
.ls-skel-lines { flex:1; display:flex; flex-direction:column; gap:0.4rem; }
|
||||
.ls-skel-line { height:10px; border-radius:100px; }
|
||||
.ls-skel-video-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.875rem; }
|
||||
.ls-skel-video-card { background:white; border:2px solid #f3f4f6; border-radius:16px; overflow:hidden; }
|
||||
.ls-skel-video-thumb { aspect-ratio:16/9; }
|
||||
.ls-skel-video-body { padding:0.75rem; display:flex; flex-direction:column; gap:0.4rem; }
|
||||
@keyframes lsSkelShimmer { 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
|
||||
.ls-skel-circle,.ls-skel-line,.ls-skel-video-thumb,.ls-skel-video-body .ls-skel-line {
|
||||
background:linear-gradient(90deg,#f3f4f6 25%,#e9eaec 50%,#f3f4f6 75%);
|
||||
background-size:200% 100%; animation:lsSkelShimmer 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ── Empty ── */
|
||||
.ls-empty {
|
||||
text-align:center; padding:3rem 1rem;
|
||||
background:white; border:2.5px dashed #e5e7eb; border-radius:20px;
|
||||
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; }
|
||||
.ls-empty-sub { font-family:'Nunito Sans',sans-serif; font-size:0.78rem; color:#c4b5fd; font-weight:600; }
|
||||
`;
|
||||
|
||||
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
||||
|
||||
function highlightText(text: string, query: string): React.ReactNode {
|
||||
if (!query.trim()) return text;
|
||||
const idx = text.toLowerCase().indexOf(query.toLowerCase());
|
||||
if (idx === -1) return text;
|
||||
return (
|
||||
<>
|
||||
{text.slice(0, idx)}
|
||||
<mark className="ls-highlight">
|
||||
{text.slice(idx, idx + query.length)}
|
||||
</mark>
|
||||
{text.slice(idx + query.length)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function filterLessonMetadata(
|
||||
lessons: LessonMetadata[],
|
||||
query: string,
|
||||
): LessonMetadata[] {
|
||||
if (!query.trim()) return lessons;
|
||||
const q = query.toLowerCase();
|
||||
return lessons.filter(
|
||||
(l) =>
|
||||
l.title.toLowerCase().includes(q) ||
|
||||
l.description.toLowerCase().includes(q) ||
|
||||
l.category.toLowerCase().includes(q),
|
||||
);
|
||||
}
|
||||
|
||||
function filterVideoLessons(lessons: Lesson[], query: string): Lesson[] {
|
||||
if (!query.trim()) return lessons;
|
||||
const q = query.toLowerCase();
|
||||
return lessons.filter(
|
||||
(l) =>
|
||||
l.title.toLowerCase().includes(q) ||
|
||||
l.topic?.name?.toLowerCase().includes(q),
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Skeletons ────────────────────────────────────────────────────────────────
|
||||
const SkeletonGroup = () => (
|
||||
<div className="ls-group">
|
||||
<div className="ls-skel-list">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="ls-skel-row">
|
||||
<div className="ls-skel-circle" />
|
||||
<div className="ls-skel-lines">
|
||||
<div
|
||||
className="ls-skel-line"
|
||||
style={{ width: `${60 + ((i * 11) % 30)}%` }}
|
||||
/>
|
||||
<div
|
||||
className="ls-skel-line"
|
||||
style={{ width: `${40 + ((i * 7) % 35)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const SkeletonVideoGrid = () => (
|
||||
<div className="ls-skel-video-grid">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="ls-skel-video-card">
|
||||
<div className="ls-skel-video-thumb" />
|
||||
<div className="ls-skel-video-body">
|
||||
<div className="ls-skel-line" style={{ width: "80%" }} />
|
||||
<div className="ls-skel-line" style={{ width: "55%" }} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
// ─── Video Card ───────────────────────────────────────────────────────────────
|
||||
interface VideoCardProps {
|
||||
lesson: Lesson; // uses the Lesson type from API: id, title, thumbnail_url, topic
|
||||
index: number;
|
||||
searchQuery: string;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const VideoCard = ({ lesson, index, searchQuery, onClick }: VideoCardProps) => (
|
||||
<div
|
||||
className="ls-video-card"
|
||||
style={{ animationDelay: `${0.05 + index * 0.05}s` }}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className="ls-video-thumb">
|
||||
{lesson.thumbnail_url ? (
|
||||
<>
|
||||
<img src={lesson.thumbnail_url} alt={lesson.title} loading="lazy" />
|
||||
<div className="ls-video-thumb-overlay" />
|
||||
</>
|
||||
) : (
|
||||
<div className="ls-video-thumb-fallback">🎬</div>
|
||||
)}
|
||||
<div className="ls-video-play-btn">
|
||||
<Play size={16} fill="currentColor" strokeWidth={0} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ls-video-card-body">
|
||||
<p className="ls-video-card-title">
|
||||
{highlightText(lesson.title, searchQuery)}
|
||||
</p>
|
||||
{lesson.topic?.name && (
|
||||
<p className="ls-video-card-topic">
|
||||
{highlightText(lesson.topic.name, searchQuery)}
|
||||
</p>
|
||||
)}
|
||||
<div className="ls-video-card-arrow">
|
||||
<ChevronRight size={14} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// ─── Component ────────────────────────────────────────────────────────────────
|
||||
export const Lessons = () => {
|
||||
const user = useAuthStore((state) => state.user);
|
||||
const [lessons, setLessons] = useState<Lesson[]>([]);
|
||||
const user = useAuthStore((s) => s.user);
|
||||
|
||||
// Video lessons from API — typed as Lesson[]
|
||||
const [allVideos, setAllVideos] = useState<Lesson[]>([]);
|
||||
const [lessonLoading, setLessonLoading] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState<"rw" | "math">("rw");
|
||||
|
||||
const [activeTab, setActiveTab] = useState<"rw" | "math" | "video">("rw");
|
||||
const [videoSubTab, setVideoSubTab] = useState<VideoSubTab>("rw");
|
||||
const [selectedLessonId, setSelectedLessonId] = useState<string | null>(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
const handleLessonClick = (id: string) => {
|
||||
setSelectedLessonId(id);
|
||||
@ -153,7 +463,7 @@ export const Lessons = () => {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchAllLessons = async () => {
|
||||
const fetchVideos = async () => {
|
||||
if (!user) return;
|
||||
try {
|
||||
setLessonLoading(true);
|
||||
@ -163,74 +473,176 @@ export const Lessons = () => {
|
||||
state: { token },
|
||||
} = JSON.parse(authStorage) as { state?: { token?: string } };
|
||||
if (!token) return;
|
||||
const response = await api.fetchAllLessons(token);
|
||||
setLessons(response.data);
|
||||
const response = await api.fetchLessonVideos(token);
|
||||
// response matches LessonsResponse: { data: Lesson[], pagination: ... }
|
||||
setAllVideos(response.data);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setLessonLoading(false);
|
||||
}
|
||||
};
|
||||
fetchAllLessons();
|
||||
fetchVideos();
|
||||
}, [user]);
|
||||
|
||||
const renderGrid = (variant: "rw" | "math") => {
|
||||
if (lessonLoading) {
|
||||
return (
|
||||
<div className="ls-skeleton-grid">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<LessonSkeleton key={i} />
|
||||
))}
|
||||
</div>
|
||||
// Split videos by sub-tab using topic name (the only subject signal in Lesson type)
|
||||
const videos = useMemo<Lesson[]>(() => {
|
||||
if (videoSubTab === "math") {
|
||||
return allVideos.filter((v) =>
|
||||
v.topic?.name?.toLowerCase().includes("math"),
|
||||
);
|
||||
}
|
||||
return allVideos.filter(
|
||||
(v) => !v.topic?.name?.toLowerCase().includes("math"),
|
||||
);
|
||||
}, [allVideos, videoSubTab]);
|
||||
|
||||
// Count for search hint
|
||||
const totalCount = useMemo(() => {
|
||||
if (activeTab === "video") return videos.length;
|
||||
return activeTab === "math" ? MATH_LESSONS.length : EBRW_LESSONS.length;
|
||||
}, [activeTab, videos.length]);
|
||||
|
||||
const filteredCount = useMemo(() => {
|
||||
if (activeTab === "video")
|
||||
return filterVideoLessons(videos, searchQuery).length;
|
||||
const base = activeTab === "math" ? MATH_LESSONS : EBRW_LESSONS;
|
||||
return filterLessonMetadata(base, searchQuery).length;
|
||||
}, [activeTab, videos, searchQuery]);
|
||||
|
||||
// ── Local lesson group renderer (LessonMetadata[]) ──
|
||||
const renderLessonGroups = (rawLessons: LessonMetadata[]) => {
|
||||
const lessons = filterLessonMetadata(rawLessons, searchQuery);
|
||||
|
||||
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 className="ls-empty">
|
||||
<span className="ls-empty-emoji">🔍</span>
|
||||
<p className="ls-empty-text">No lessons found for "{searchQuery}"</p>
|
||||
<p className="ls-empty-sub">Try a different search term</p>
|
||||
</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>
|
||||
|
||||
const grouped = lessons.reduce<Record<string, LessonMetadata[]>>(
|
||||
(acc, lesson) => {
|
||||
if (!acc[lesson.category]) acc[lesson.category] = [];
|
||||
acc[lesson.category].push(lesson);
|
||||
return acc;
|
||||
},
|
||||
{},
|
||||
);
|
||||
|
||||
return Object.entries(grouped).map(([category, categoryLessons], gi) => (
|
||||
<div
|
||||
key={category}
|
||||
className="ls-group ls-anim"
|
||||
style={{ animationDelay: `${0.05 + gi * 0.06}s` }}
|
||||
>
|
||||
<div className="ls-group-header">
|
||||
<div className={`ls-group-accent ${categoryLessons[0].color}`} />
|
||||
<span className="ls-group-name">
|
||||
{highlightText(category, searchQuery)}
|
||||
</span>
|
||||
<span className="ls-group-count">{categoryLessons.length}</span>
|
||||
</div>
|
||||
|
||||
<div className="ls-list">
|
||||
{categoryLessons.map((lesson, li) => (
|
||||
<div
|
||||
key={lesson.id}
|
||||
className="ls-lesson-row"
|
||||
onClick={() => handleLessonClick(lesson.id)}
|
||||
>
|
||||
<span className="ls-row-num">
|
||||
{String(li + 1).padStart(2, "0")}
|
||||
</span>
|
||||
|
||||
<div className={`ls-row-icon ${lesson.color}`}>
|
||||
{renderLessonIcon(lesson.iconName)}
|
||||
</div>
|
||||
|
||||
<div className="ls-row-body">
|
||||
<p className="ls-row-title">
|
||||
{highlightText(lesson.title, searchQuery)}
|
||||
</p>
|
||||
{lesson.description && (
|
||||
<p className="ls-row-desc">
|
||||
{highlightText(lesson.description, searchQuery)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ChevronRight size={16} className="ls-chevron" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
};
|
||||
|
||||
// ── Video grid renderer (Lesson[]) ──
|
||||
const renderVideoGrid = () => {
|
||||
const filtered = filterVideoLessons(videos, searchQuery);
|
||||
|
||||
if (!filtered.length) {
|
||||
return (
|
||||
<div className="ls-empty">
|
||||
<span className="ls-empty-emoji">{searchQuery ? "🔍" : "📭"}</span>
|
||||
<p className="ls-empty-text">
|
||||
{searchQuery
|
||||
? `No videos found for "${searchQuery}"`
|
||||
: "No videos available yet."}
|
||||
</p>
|
||||
{searchQuery && (
|
||||
<p className="ls-empty-sub">Try a different search term</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ls-video-grid">
|
||||
{filtered.map((lesson, i) => (
|
||||
<VideoCard
|
||||
key={lesson.id}
|
||||
lesson={lesson}
|
||||
index={i}
|
||||
searchQuery={searchQuery}
|
||||
onClick={() => handleLessonClick(lesson.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
if (lessonLoading) {
|
||||
return activeTab === "video" ? (
|
||||
<SkeletonVideoGrid />
|
||||
) : (
|
||||
<>
|
||||
<SkeletonGroup />
|
||||
<SkeletonGroup />
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (activeTab === "video") return renderVideoGrid();
|
||||
if (activeTab === "math") return renderLessonGroups(MATH_LESSONS);
|
||||
return renderLessonGroups(EBRW_LESSONS);
|
||||
};
|
||||
|
||||
const isSearchActive = searchQuery.trim().length > 0;
|
||||
|
||||
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}
|
||||
@ -241,8 +653,8 @@ export const Lessons = () => {
|
||||
height: d.size,
|
||||
background: d.color,
|
||||
top: d.top,
|
||||
left: d.left,
|
||||
right: d.right,
|
||||
left: (d as any).left,
|
||||
right: (d as any).right,
|
||||
animationDelay: d.delay,
|
||||
animationDuration: `${5 + i * 0.5}s`,
|
||||
} as React.CSSProperties
|
||||
@ -251,7 +663,6 @@ export const Lessons = () => {
|
||||
))}
|
||||
|
||||
<div className="ls-inner">
|
||||
{/* Header */}
|
||||
<header className="ls-header">
|
||||
<h1 className="ls-title">📚 Lessons</h1>
|
||||
<p className="ls-sub">
|
||||
@ -260,14 +671,43 @@ export const Lessons = () => {
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Tabs + content */}
|
||||
{/* Search */}
|
||||
<div className="ls-search-wrap">
|
||||
<Search size={16} className="ls-search-icon" />
|
||||
<input
|
||||
className="ls-search-input"
|
||||
type="text"
|
||||
placeholder="Search lessons, topics, categories…"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
{isSearchActive && (
|
||||
<button
|
||||
className="ls-search-clear"
|
||||
onClick={() => setSearchQuery("")}
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isSearchActive && !lessonLoading && (
|
||||
<div className="ls-search-results-hint">
|
||||
<Search size={11} />
|
||||
<span>
|
||||
<strong>{filteredCount}</strong> of {totalCount} lessons match "
|
||||
<strong>{searchQuery}</strong>"
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<section className="ls-anim ls-anim-1">
|
||||
<div className="ls-tabs-list">
|
||||
<div className="ls-tabs-list" style={{ marginBottom: "1.25rem" }}>
|
||||
<button
|
||||
className={`ls-tab-btn${activeTab === "rw" ? " active" : ""}`}
|
||||
onClick={() => setActiveTab("rw")}
|
||||
>
|
||||
<BookOpen size={15} /> Reading & Writing
|
||||
<BookOpen size={15} /> {truncate("Reading & Writing")}
|
||||
</button>
|
||||
<button
|
||||
className={`ls-tab-btn${activeTab === "math" ? " active" : ""}`}
|
||||
@ -275,9 +715,37 @@ export const Lessons = () => {
|
||||
>
|
||||
<Calculator size={15} /> Math
|
||||
</button>
|
||||
<button
|
||||
className={`ls-tab-btn${activeTab === "video" ? " active" : ""}`}
|
||||
onClick={() => setActiveTab("video")}
|
||||
>
|
||||
<Video size={15} /> Videos
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{renderGrid(activeTab)}
|
||||
{activeTab === "video" && (
|
||||
<div
|
||||
className="ls-video-subtabs"
|
||||
style={{ marginBottom: "1.25rem" }}
|
||||
>
|
||||
<button
|
||||
className={`ls-video-subtab-btn${videoSubTab === "rw" ? " active" : ""}`}
|
||||
onClick={() => setVideoSubTab("rw")}
|
||||
>
|
||||
<span className="ls-video-subtab-dot" />
|
||||
<BookOpen size={13} /> Reading & Writing
|
||||
</button>
|
||||
<button
|
||||
className={`ls-video-subtab-btn${videoSubTab === "math" ? " active" : ""}`}
|
||||
onClick={() => setVideoSubTab("math")}
|
||||
>
|
||||
<span className="ls-video-subtab-dot" />
|
||||
<Calculator size={13} /> Math
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{renderContent()}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user