Compare commits
2 Commits
feat/ui
...
65dbe99647
| Author | SHA1 | Date | |
|---|---|---|---|
| 65dbe99647 | |||
| 76d2108aec |
@ -31,6 +31,7 @@
|
||||
"react-router-dom": "^7.12.0",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"tailwindcss": "^4.1.18",
|
||||
"vaul": "^1.1.2",
|
||||
"zustand": "^5.0.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
18
pnpm-lock.yaml
generated
18
pnpm-lock.yaml
generated
@ -71,6 +71,9 @@ importers:
|
||||
tailwindcss:
|
||||
specifier: ^4.1.18
|
||||
version: 4.1.18
|
||||
vaul:
|
||||
specifier: ^1.1.2
|
||||
version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
|
||||
zustand:
|
||||
specifier: ^5.0.9
|
||||
version: 5.0.9(@types/react@19.2.7)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
|
||||
@ -2221,6 +2224,12 @@ packages:
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
vaul@1.1.2:
|
||||
resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
|
||||
peerDependencies:
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
|
||||
|
||||
vite@7.3.0:
|
||||
resolution: {integrity: sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
@ -4385,6 +4394,15 @@ snapshots:
|
||||
dependencies:
|
||||
react: 19.2.3
|
||||
|
||||
vaul@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
|
||||
dependencies:
|
||||
'@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
|
||||
react: 19.2.3
|
||||
react-dom: 19.2.3(react@19.2.3)
|
||||
transitivePeerDependencies:
|
||||
- '@types/react'
|
||||
- '@types/react-dom'
|
||||
|
||||
vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2):
|
||||
dependencies:
|
||||
esbuild: 0.27.2
|
||||
|
||||
@ -1,4 +1,126 @@
|
||||
import { Badge } from "./ui/badge";
|
||||
const STYLES = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@600;700&display=swap');
|
||||
|
||||
.cc-btn {
|
||||
width: 100%;
|
||||
background: white;
|
||||
border: 2.5px solid #f3f4f6;
|
||||
border-radius: 18px;
|
||||
padding: 0.85rem 1rem;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.04);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.cc-btn:hover:not(.cc-selected) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.07);
|
||||
border-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.cc-btn:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
/* Selected state */
|
||||
.cc-btn.cc-selected {
|
||||
border-color: #c4b5fd;
|
||||
background: #fdf4ff;
|
||||
box-shadow: 0 6px 0 #e9d5ff, 0 8px 20px rgba(168,85,247,0.1);
|
||||
}
|
||||
|
||||
/* Selected shimmer bar on left edge */
|
||||
.cc-btn.cc-selected::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0; top: 0; bottom: 0;
|
||||
width: 4px;
|
||||
background: linear-gradient(180deg, #a855f7, #7c3aed);
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
/* Top row */
|
||||
.cc-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.cc-label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 900;
|
||||
color: #1e1b4b;
|
||||
line-height: 1.2;
|
||||
flex: 1;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
.cc-btn.cc-selected .cc-label { color: #7c3aed; }
|
||||
|
||||
/* Section badge */
|
||||
.cc-section-badge {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
border-radius: 100px;
|
||||
padding: 0.2rem 0.6rem;
|
||||
flex-shrink: 0;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
.cc-section-badge.ebrw {
|
||||
background: #eff6ff;
|
||||
border-color: #bfdbfe;
|
||||
color: #2563eb;
|
||||
}
|
||||
.cc-section-badge.math {
|
||||
background: #fff1f2;
|
||||
border-color: #fecdd3;
|
||||
color: #e11d48;
|
||||
}
|
||||
|
||||
/* Sub label */
|
||||
.cc-sublabel {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #9ca3af;
|
||||
line-height: 1.3;
|
||||
padding-left: 0.05rem;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
.cc-btn.cc-selected .cc-sublabel { color: #a855f7; }
|
||||
|
||||
/* Checkmark */
|
||||
.cc-check {
|
||||
position: absolute;
|
||||
top: 0.65rem;
|
||||
right: 0.75rem;
|
||||
width: 20px; height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #e5e7eb;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
|
||||
background: white;
|
||||
}
|
||||
.cc-btn.cc-selected .cc-check {
|
||||
background: #a855f7;
|
||||
border-color: #a855f7;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
`;
|
||||
|
||||
let stylesInjected = false;
|
||||
|
||||
export const ChoiceCard = ({
|
||||
label,
|
||||
@ -12,23 +134,51 @@ export const ChoiceCard = ({
|
||||
subLabel?: string;
|
||||
section?: string;
|
||||
onClick: () => void;
|
||||
}) => (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={`rounded-2xl border p-4 text-left transition flex flex-col
|
||||
${selected ? "border-indigo-600 bg-indigo-50" : "hover:border-gray-300"}`}
|
||||
>
|
||||
<div className="flex justify-between">
|
||||
<span className="font-satoshi-bold text-lg">{label}</span>
|
||||
{section && (
|
||||
<Badge
|
||||
variant={"secondary"}
|
||||
className={`font-satoshi text-sm ${section === "EBRW" ? "bg-blue-400 text-blue-100" : "bg-red-400 text-red-100"}`}
|
||||
>
|
||||
{section}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{subLabel && <span className="font-satoshi text-md">{subLabel}</span>}
|
||||
</button>
|
||||
);
|
||||
}) => {
|
||||
if (!stylesInjected) {
|
||||
const tag = document.createElement("style");
|
||||
tag.textContent = STYLES;
|
||||
document.head.appendChild(tag);
|
||||
stylesInjected = true;
|
||||
}
|
||||
|
||||
const sectionClass =
|
||||
section === "EBRW"
|
||||
? "ebrw"
|
||||
: section === "Math" || section === "MATH"
|
||||
? "math"
|
||||
: "";
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={`cc-btn${selected ? " cc-selected" : ""}`}
|
||||
>
|
||||
{/* Checkmark */}
|
||||
<div className="cc-check">
|
||||
{selected && (
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
|
||||
<path
|
||||
d="M1.5 5L4 7.5L8.5 2.5"
|
||||
stroke="white"
|
||||
strokeWidth="1.8"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Top row: label + section badge */}
|
||||
<div className="cc-top" style={{ paddingRight: "1.75rem" }}>
|
||||
<span className="cc-label">{label}</span>
|
||||
{section && (
|
||||
<span className={`cc-section-badge ${sectionClass}`}>{section}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Sub label */}
|
||||
{subLabel && <span className="cc-sublabel">{subLabel}</span>}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
@ -11,26 +11,187 @@ type Props = {
|
||||
level: number;
|
||||
};
|
||||
|
||||
const STYLES = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600&display=swap');
|
||||
|
||||
.clp-wrap {
|
||||
width: 100%;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
}
|
||||
|
||||
/* Outer card — full width */
|
||||
.clp-card {
|
||||
width: 100%;
|
||||
background: white;
|
||||
border: 2.5px solid #f3f4f6;
|
||||
border-radius: 24px;
|
||||
padding: 1.25rem 1.5rem;
|
||||
box-shadow: 0 6px 24px rgba(0,0,0,0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.85rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Top row: level badge + XP gained chip */
|
||||
.clp-top-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.clp-level-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.clp-level-bubble {
|
||||
width: 52px; height: 52px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #c084fc, #a855f7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 0 #7e22ce44;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.clp-level-num {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.clp-level-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.clp-level-word {
|
||||
font-size: 0.62rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.clp-level-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 900;
|
||||
color: #1e1b4b;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* XP gained chip */
|
||||
.clp-xp-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
background: #fff7ed;
|
||||
border: 2px solid #fed7aa;
|
||||
border-radius: 100px;
|
||||
padding: 0.4rem 0.9rem;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 800;
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
/* Bar section */
|
||||
.clp-bar-wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.clp-bar-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.66rem;
|
||||
font-weight: 700;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.clp-bar-track {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.clp-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 100px;
|
||||
background: linear-gradient(90deg, #c084fc, #f97316);
|
||||
transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
|
||||
}
|
||||
|
||||
/* XP total */
|
||||
.clp-xp-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
color: #9ca3af;
|
||||
animation: clpFadeUp 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||
}
|
||||
|
||||
.clp-xp-pill .xp-dot {
|
||||
width: 7px; height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #f97316;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Level-up banner */
|
||||
.clp-levelup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
background: #fdf4ff;
|
||||
border: 2.5px solid #e9d5ff;
|
||||
border-radius: 14px;
|
||||
padding: 0.6rem 1rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 900;
|
||||
color: #9333ea;
|
||||
animation: clpPop 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||
box-shadow: 0 4px 12px rgba(147,51,234,0.1);
|
||||
}
|
||||
|
||||
@keyframes clpPop {
|
||||
from { opacity:0; transform: scale(0.8); }
|
||||
to { opacity:1; transform: scale(1); }
|
||||
}
|
||||
@keyframes clpFadeUp {
|
||||
from { opacity:0; transform: translateY(6px); }
|
||||
to { opacity:1; transform: translateY(0); }
|
||||
}
|
||||
`;
|
||||
|
||||
export const CircularLevelProgress = ({
|
||||
size = 300,
|
||||
strokeWidth = 16,
|
||||
previousXP,
|
||||
gainedXP,
|
||||
levelMinXP,
|
||||
levelMaxXP,
|
||||
level,
|
||||
}: Props) => {
|
||||
const radius = (size - strokeWidth) / 2;
|
||||
const circumference = 2 * Math.PI * radius;
|
||||
const levelRange = levelMaxXP - levelMinXP;
|
||||
|
||||
const normalize = (xp: number) =>
|
||||
Math.min(Math.max(xp - levelMinXP, 0), levelRange) / levelRange;
|
||||
|
||||
const [progress, setProgress] = useState(normalize(previousXP));
|
||||
const [barProgress, setBarProgress] = useState(normalize(previousXP));
|
||||
const [currentLevel, setCurrentLevel] = useState(level);
|
||||
const [showLevelUp, setShowLevelUp] = useState(false);
|
||||
const [showThresholdText, setShowThresholdText] = useState(false);
|
||||
const [showXPTotal, setShowXPTotal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let animationFrame: number;
|
||||
@ -38,28 +199,23 @@ export const CircularLevelProgress = ({
|
||||
|
||||
const availableXP = previousXP + gainedXP;
|
||||
const crossesLevel = availableXP >= levelMaxXP;
|
||||
|
||||
const phase1Target = crossesLevel ? 1 : normalize(previousXP + gainedXP);
|
||||
|
||||
const phase1Target = crossesLevel ? 1 : normalize(availableXP);
|
||||
const leftoverXP = crossesLevel ? availableXP - levelMaxXP : 0;
|
||||
|
||||
const duration = 1200;
|
||||
|
||||
const animatePhase1 = (timestamp: number) => {
|
||||
if (!start) start = timestamp;
|
||||
const t = Math.min((timestamp - start) / duration, 1);
|
||||
|
||||
setProgress(
|
||||
setBarProgress(
|
||||
normalize(previousXP) + t * (phase1Target - normalize(previousXP)),
|
||||
);
|
||||
|
||||
if (t < 1) {
|
||||
animationFrame = requestAnimationFrame(animatePhase1);
|
||||
} else if (crossesLevel) {
|
||||
setShowLevelUp(true);
|
||||
setTimeout(startPhase2, 1200);
|
||||
} else {
|
||||
setShowThresholdText(true);
|
||||
setShowXPTotal(true);
|
||||
}
|
||||
};
|
||||
|
||||
@ -67,78 +223,77 @@ export const CircularLevelProgress = ({
|
||||
start = null;
|
||||
setShowLevelUp(false);
|
||||
setCurrentLevel((l) => l + 1);
|
||||
setProgress(0);
|
||||
|
||||
setBarProgress(0);
|
||||
const target = Math.min(leftoverXP / levelRange, 1);
|
||||
|
||||
const animatePhase2 = (timestamp: number) => {
|
||||
if (!start) start = timestamp;
|
||||
const t = Math.min((timestamp - start) / duration, 1);
|
||||
|
||||
setProgress(t * target);
|
||||
|
||||
setBarProgress(t * target);
|
||||
if (t < 1) {
|
||||
animationFrame = requestAnimationFrame(animatePhase2);
|
||||
} else {
|
||||
setShowThresholdText(true);
|
||||
setShowXPTotal(true);
|
||||
}
|
||||
};
|
||||
|
||||
animationFrame = requestAnimationFrame(animatePhase2);
|
||||
};
|
||||
|
||||
animationFrame = requestAnimationFrame(animatePhase1);
|
||||
|
||||
return () => cancelAnimationFrame(animationFrame);
|
||||
}, []);
|
||||
|
||||
const offset = circumference * (1 - progress);
|
||||
const barPct = Math.round(barProgress * 100);
|
||||
const totalXP = previousXP + gainedXP;
|
||||
|
||||
return (
|
||||
<div className="relative flex flex-col items-center gap-2">
|
||||
<div className="clp-wrap">
|
||||
<style>{STYLES}</style>
|
||||
{showLevelUp && <ConfettiBurst />}
|
||||
<div
|
||||
className="relative flex items-center justify-center"
|
||||
style={{ width: size, height: size }}
|
||||
>
|
||||
<svg width={size} height={size}>
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
stroke="oklch(94.6% 0.033 307.174)"
|
||||
strokeWidth={strokeWidth}
|
||||
fill="none"
|
||||
/>
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
stroke="oklch(62.7% 0.265 303.9)"
|
||||
strokeWidth={strokeWidth}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={offset}
|
||||
transform={`rotate(-90 ${size / 2} ${size / 2})`}
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span className="absolute text-[100px] font-satoshi-bold flex flex-col items-center">
|
||||
{currentLevel}
|
||||
<div className="clp-card">
|
||||
{/* Top row */}
|
||||
<div className="clp-top-row">
|
||||
<div className="clp-level-badge">
|
||||
<div className="clp-level-bubble">
|
||||
<span className="clp-level-num">{currentLevel}</span>
|
||||
</div>
|
||||
<div className="clp-level-text">
|
||||
<span className="clp-level-word">Current Level</span>
|
||||
<span className="clp-level-title">Level {currentLevel}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showThresholdText && (
|
||||
<span className="text-xl font-satoshi-medium text-gray-500 animate-fade-in">
|
||||
Total XP: {previousXP + gainedXP}
|
||||
</span>
|
||||
)}
|
||||
<div className="clp-xp-chip">⚡ +{gainedXP} XP</div>
|
||||
</div>
|
||||
|
||||
{showLevelUp && (
|
||||
<span className="text-xl font-satoshi-medium text-purple-600 animate-fade-in">
|
||||
🎉 You leveled up!
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
{/* Progress bar */}
|
||||
<div className="clp-bar-wrap">
|
||||
<div className="clp-bar-labels">
|
||||
<span>{levelMinXP} XP</span>
|
||||
<span>{barPct}%</span>
|
||||
<span>{levelMaxXP} XP</span>
|
||||
</div>
|
||||
<div className="clp-bar-track">
|
||||
<div className="clp-bar-fill" style={{ width: `${barPct}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer state */}
|
||||
{showLevelUp && (
|
||||
<div className="clp-levelup">
|
||||
🎉 You leveled up! Welcome to Level {currentLevel}!
|
||||
</div>
|
||||
)}
|
||||
{showXPTotal && !showLevelUp && (
|
||||
<div className="clp-xp-pill">
|
||||
<div className="xp-dot" />
|
||||
Total XP:{" "}
|
||||
<strong style={{ color: "#1e1b4b", marginLeft: 3 }}>
|
||||
{totalXP}
|
||||
</strong>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,13 +1,8 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
} from "../components/ui/dialog";
|
||||
import { Dialog, DialogContent, DialogHeader } from "../components/ui/dialog";
|
||||
import { api } from "../utils/api";
|
||||
import { useAuthStore } from "../stores/authStore";
|
||||
import { Loader, X } from "lucide-react";
|
||||
|
||||
interface LessonModalProps {
|
||||
lessonId: string | null;
|
||||
@ -15,6 +10,107 @@ interface LessonModalProps {
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
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');
|
||||
|
||||
/* Override Dialog defaults */
|
||||
.lm-content {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
background: #fffbf4;
|
||||
border: 2.5px solid #f3f4f6;
|
||||
border-radius: 28px !important;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
max-width: 680px;
|
||||
width: calc(100vw - 2rem);
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.12);
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Header bar */
|
||||
.lm-header {
|
||||
display: flex; align-items: flex-start; justify-content: space-between;
|
||||
padding: 1.25rem 1.5rem 0;
|
||||
flex-shrink: 0;
|
||||
gap: 1rem;
|
||||
}
|
||||
.lm-title-wrap { display:flex;flex-direction:column;gap:0.2rem; flex:1; }
|
||||
.lm-eyebrow {
|
||||
font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em;
|
||||
text-transform: uppercase; color: #a855f7;
|
||||
}
|
||||
.lm-title {
|
||||
font-size: 1.2rem; font-weight: 900; color: #1e1b4b;
|
||||
letter-spacing: -0.01em; line-height: 1.25;
|
||||
}
|
||||
.lm-close-btn {
|
||||
width: 34px; height: 34px; flex-shrink: 0;
|
||||
border-radius: 50%; border: 2.5px solid #f3f4f6;
|
||||
background: white; cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.lm-close-btn:hover { border-color: #fecdd3; background: #fff1f2; }
|
||||
|
||||
/* Scrollable body */
|
||||
.lm-body {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
padding: 1rem 1.5rem 1.5rem;
|
||||
display: flex; flex-direction: column; gap: 1rem;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Video player */
|
||||
.lm-video {
|
||||
width: 100%; border-radius: 18px;
|
||||
aspect-ratio: 16/9; background: #1e1b4b;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Topic chip */
|
||||
.lm-topic-chip {
|
||||
display: inline-flex; align-items: center; gap: 0.4rem;
|
||||
background: #f3e8ff; border: 2px solid #e9d5ff;
|
||||
border-radius: 100px; padding: 0.3rem 0.8rem;
|
||||
font-size: 0.7rem; font-weight: 800;
|
||||
letter-spacing: 0.08em; text-transform: uppercase;
|
||||
color: #9333ea; width: fit-content;
|
||||
}
|
||||
|
||||
/* Description & content cards */
|
||||
.lm-card {
|
||||
background: white; border: 2.5px solid #f3f4f6;
|
||||
border-radius: 18px; padding: 1rem 1.1rem;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.04);
|
||||
}
|
||||
.lm-card-label {
|
||||
font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em;
|
||||
text-transform: uppercase; color: #9ca3af; margin-bottom: 0.4rem;
|
||||
}
|
||||
.lm-card-text {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.88rem; font-weight: 600; color: #374151;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Loading state */
|
||||
.lm-loading {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
justify-content: center; gap: 0.75rem;
|
||||
padding: 3rem 1.5rem;
|
||||
flex: 1;
|
||||
}
|
||||
.lm-loading-spinner { animation: lmSpin 0.8s linear infinite; }
|
||||
@keyframes lmSpin { to { transform: rotate(360deg); } }
|
||||
.lm-loading-text {
|
||||
font-size: 0.85rem; font-weight: 700; color: #9ca3af;
|
||||
}
|
||||
`;
|
||||
|
||||
export const LessonModal = ({
|
||||
lessonId,
|
||||
open,
|
||||
@ -26,21 +122,15 @@ export const LessonModal = ({
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !lessonId || !user) return;
|
||||
|
||||
const fetchLesson = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const authStorage = localStorage.getItem("auth-storage");
|
||||
if (!authStorage) return;
|
||||
|
||||
const parsed = JSON.parse(authStorage) as {
|
||||
state?: { token?: string };
|
||||
};
|
||||
|
||||
const token = parsed.state?.token;
|
||||
const {
|
||||
state: { token },
|
||||
} = JSON.parse(authStorage) as { state?: { token?: string } };
|
||||
if (!token) return;
|
||||
|
||||
const response = await api.fetchLessonById(token, lessonId);
|
||||
setLesson(response);
|
||||
} catch (err) {
|
||||
@ -49,40 +139,73 @@ export const LessonModal = ({
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchLesson();
|
||||
}, [open, lessonId, user]);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-3xl">
|
||||
{loading && (
|
||||
<div className="py-12 text-center text-muted-foreground">
|
||||
Loading lesson...
|
||||
</div>
|
||||
)}
|
||||
<DialogHeader>
|
||||
<DialogTitle>{lesson ? lesson.title : "Lesson details"}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<style>{STYLES}</style>
|
||||
<DialogContent className="lm-content" showCloseButton={false}>
|
||||
<DialogHeader style={{ display: "none" }} />
|
||||
|
||||
{!loading && lesson && (
|
||||
<div className="space-y-4">
|
||||
{lesson.video_url && (
|
||||
<video
|
||||
src={lesson.video_url}
|
||||
controls
|
||||
className="w-full rounded-lg"
|
||||
/>
|
||||
)}
|
||||
<h2 className="font-satoshi-bold text-xl">
|
||||
{lesson ? lesson.title : "Lesson details"}
|
||||
{/* Header */}
|
||||
<div className="lm-header">
|
||||
<div className="lm-title-wrap">
|
||||
<span className="lm-eyebrow">📖 Lesson</span>
|
||||
<h2 className="lm-title">
|
||||
{loading ? "Loading..." : (lesson?.title ?? "Lesson details")}
|
||||
</h2>
|
||||
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{lesson.description}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">{lesson.content}</p>
|
||||
</div>
|
||||
<button className="lm-close-btn" onClick={() => onOpenChange(false)}>
|
||||
<X size={16} color="#6b7280" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
{loading ? (
|
||||
<div className="lm-loading">
|
||||
<Loader size={28} color="#a855f7" className="lm-loading-spinner" />
|
||||
<p className="lm-loading-text">Loading lesson...</p>
|
||||
</div>
|
||||
) : (
|
||||
lesson && (
|
||||
<div className="lm-body">
|
||||
{lesson.video_url && (
|
||||
<video src={lesson.video_url} controls className="lm-video" />
|
||||
)}
|
||||
|
||||
{lesson.topic?.name && (
|
||||
<div>
|
||||
<span className="lm-topic-chip">
|
||||
<span
|
||||
style={{
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: "50%",
|
||||
background: "#a855f7",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
{lesson.topic.name}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{lesson.description && (
|
||||
<div className="lm-card">
|
||||
<p className="lm-card-label">About this lesson</p>
|
||||
<p className="lm-card-text">{lesson.description}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{lesson.content && (
|
||||
<div className="lm-card">
|
||||
<p className="lm-card-label">Content</p>
|
||||
<p className="lm-card-text">{lesson.content}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
@ -1,11 +1,4 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../components/ui/card";
|
||||
import { api } from "../utils/api";
|
||||
import { useAuthToken } from "../hooks/useAuthToken";
|
||||
import {
|
||||
@ -36,34 +29,38 @@ interface PredictedScoreResponse {
|
||||
|
||||
const confidenceConfig: Record<
|
||||
string,
|
||||
{ label: string; color: string; bg: string; dot: string }
|
||||
{ label: string; color: string; bg: string; border: string; dot: string }
|
||||
> = {
|
||||
high: {
|
||||
label: "High confidence",
|
||||
color: "text-emerald-700",
|
||||
bg: "bg-emerald-50 border-emerald-200",
|
||||
dot: "bg-emerald-500",
|
||||
color: "#16a34a",
|
||||
bg: "#f0fdf4",
|
||||
border: "#bbf7d0",
|
||||
dot: "#22c55e",
|
||||
},
|
||||
medium: {
|
||||
label: "Medium confidence",
|
||||
color: "text-amber-700",
|
||||
bg: "bg-amber-50 border-amber-200",
|
||||
dot: "bg-amber-400",
|
||||
color: "#d97706",
|
||||
bg: "#fffbeb",
|
||||
border: "#fde68a",
|
||||
dot: "#f59e0b",
|
||||
},
|
||||
low: {
|
||||
label: "Low confidence",
|
||||
color: "text-rose-700",
|
||||
bg: "bg-rose-50 border-rose-200",
|
||||
dot: "bg-rose-400",
|
||||
color: "#e11d48",
|
||||
bg: "#fff1f2",
|
||||
border: "#fecdd3",
|
||||
dot: "#f43f5e",
|
||||
},
|
||||
};
|
||||
|
||||
const getConfidenceStyle = (confidence: string) =>
|
||||
confidenceConfig[confidence.toLowerCase()] ?? {
|
||||
label: confidence,
|
||||
color: "text-gray-600",
|
||||
bg: "bg-gray-50 border-gray-200",
|
||||
dot: "bg-gray-400",
|
||||
color: "#6b7280",
|
||||
bg: "#f9fafb",
|
||||
border: "#f3f4f6",
|
||||
dot: "#9ca3af",
|
||||
};
|
||||
|
||||
const useCountUp = (target: number, duration = 900) => {
|
||||
@ -83,70 +80,256 @@ const useCountUp = (target: number, duration = 900) => {
|
||||
return value;
|
||||
};
|
||||
|
||||
// ─── Expanded section detail ──────────────────────────────────────────────────
|
||||
// ─── Styles ───────────────────────────────────────────────────────────────────
|
||||
|
||||
const STYLES = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
|
||||
|
||||
.psc-card {
|
||||
background: white;
|
||||
border: 2.5px solid #f3f4f6;
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
|
||||
font-family: 'Nunito', sans-serif;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.psc-header {
|
||||
padding: 1.1rem 1.25rem 0.75rem;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
border-bottom: 2px solid #f9fafb;
|
||||
}
|
||||
.psc-header-left { display:flex;flex-direction:column;gap:0.15rem; }
|
||||
.psc-header-title {
|
||||
font-size: 0.88rem; font-weight: 900; color: #1e1b4b;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.psc-header-sub {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.7rem; font-weight: 600; color: #9ca3af;
|
||||
}
|
||||
.psc-header-icon {
|
||||
width: 36px; height: 36px; border-radius: 12px;
|
||||
background: linear-gradient(135deg, #a855f7, #7c3aed);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 4px 0 #5b21b644;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
.psc-body { padding: 1.1rem 1.25rem; display:flex;flex-direction:column;gap:0.85rem; }
|
||||
|
||||
/* Scores row */
|
||||
.psc-scores-row {
|
||||
display: flex; align-items: stretch; gap: 0;
|
||||
background: #fafaf9; border: 2px solid #f3f4f6;
|
||||
border-radius: 18px; overflow: hidden;
|
||||
}
|
||||
|
||||
.psc-score-cell {
|
||||
flex: 1; display:flex;flex-direction:column;align-items:center;
|
||||
padding: 1rem 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
.psc-score-cell + .psc-score-cell::before {
|
||||
content:''; position:absolute; left:0; top:20%; bottom:20%;
|
||||
width:2px; background:#f3f4f6; border-radius:2px;
|
||||
}
|
||||
|
||||
/* Total cell — slightly different bg */
|
||||
.psc-score-cell.total {
|
||||
background: white;
|
||||
border-right: 2px solid #f3f4f6;
|
||||
flex: 1.2;
|
||||
}
|
||||
|
||||
.psc-cell-label {
|
||||
display: flex; align-items: center; gap: 0.3rem;
|
||||
font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em;
|
||||
text-transform: uppercase; color: #9ca3af; margin-bottom: 0.3rem;
|
||||
}
|
||||
.psc-cell-score {
|
||||
font-weight: 900; color: #1e1b4b; line-height: 1;
|
||||
}
|
||||
.psc-cell-score.large { font-size: 2.8rem; }
|
||||
.psc-cell-score.medium { font-size: 1.7rem; }
|
||||
.psc-cell-out {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.62rem; font-weight: 600; color: #d1d5db;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
/* Toggle button */
|
||||
.psc-toggle-btn {
|
||||
width: 100%; display:flex;align-items:center;justify-content:center;gap:0.4rem;
|
||||
padding: 0.55rem; border-radius: 12px; border: 2px solid #f3f4f6;
|
||||
background: white; cursor: pointer;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 0.72rem; font-weight: 800; color: #9ca3af;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.psc-toggle-btn:hover { border-color: #e9d5ff; color: #a855f7; background: #fdf4ff; }
|
||||
|
||||
/* Section detail cards */
|
||||
.psc-detail-card {
|
||||
background: #fafaf9; border: 2.5px solid #f3f4f6; border-radius: 18px;
|
||||
padding: 0.9rem 1rem;
|
||||
display: flex; flex-direction: column; gap: 0.65rem;
|
||||
}
|
||||
|
||||
.psc-detail-top {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
|
||||
}
|
||||
.psc-detail-icon-wrap {
|
||||
width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.psc-detail-label {
|
||||
font-size: 0.8rem; font-weight: 900; color: #1e1b4b; flex: 1;
|
||||
}
|
||||
.psc-conf-badge {
|
||||
display: flex; align-items: center; gap: 0.3rem;
|
||||
padding: 0.2rem 0.6rem; border-radius: 100px; border: 2px solid;
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.6rem; font-weight: 700; flex-shrink: 0;
|
||||
}
|
||||
.psc-conf-dot { width:6px;height:6px;border-radius:50%;flex-shrink:0; }
|
||||
|
||||
.psc-score-range-row {
|
||||
display: flex; align-items: flex-end; justify-content: space-between;
|
||||
}
|
||||
.psc-detail-score {
|
||||
font-size: 1.6rem; font-weight: 900; color: #1e1b4b; line-height: 1;
|
||||
}
|
||||
.psc-range-text {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.68rem; font-weight: 600; color: #9ca3af;
|
||||
text-align: right; line-height: 1.4;
|
||||
}
|
||||
.psc-range-text span { font-weight: 800; color: #6b7280; }
|
||||
|
||||
/* Range bar */
|
||||
.psc-bar-wrap {
|
||||
height: 8px; border-radius: 100px; background: #f3f4f6;
|
||||
position: relative; overflow: visible;
|
||||
}
|
||||
.psc-bar-fill {
|
||||
position: absolute; height: 100%; border-radius: 100px; opacity: 0.4;
|
||||
}
|
||||
.psc-bar-dot {
|
||||
position: absolute; width: 14px; height: 14px;
|
||||
border-radius: 50%; border: 2.5px solid white;
|
||||
top: 50%; transform: translate(-50%, -50%);
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
|
||||
}
|
||||
.psc-bar-labels {
|
||||
display: flex; justify-content: space-between;
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.58rem; font-weight: 600; color: #d1d5db;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
/* Expanded animation */
|
||||
.psc-expanded-wrap {
|
||||
display: flex; flex-direction: column; gap: 0.6rem;
|
||||
animation: pscFadeIn 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||
}
|
||||
@keyframes pscFadeIn {
|
||||
from { opacity:0; transform:translateY(-8px); }
|
||||
to { opacity:1; transform:translateY(0); }
|
||||
}
|
||||
|
||||
/* Loading */
|
||||
.psc-loading {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
gap: 0.5rem; padding: 2rem;
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.82rem; font-weight: 600; color: #9ca3af;
|
||||
}
|
||||
.psc-spinner { animation: pscSpin 0.8s linear infinite; }
|
||||
@keyframes pscSpin { to { transform: rotate(360deg); } }
|
||||
|
||||
.psc-error {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.82rem; font-weight: 700; color: #e11d48;
|
||||
text-align: center; padding: 1.5rem;
|
||||
background: #fff1f2; border-radius: 14px; border: 2px solid #fecdd3;
|
||||
}
|
||||
`;
|
||||
|
||||
// ─── Section detail ───────────────────────────────────────────────────────────
|
||||
|
||||
const SectionDetail = ({
|
||||
label,
|
||||
icon: Icon,
|
||||
prediction,
|
||||
accentClass,
|
||||
iconBg,
|
||||
barColor,
|
||||
}: {
|
||||
label: string;
|
||||
icon: React.ElementType;
|
||||
prediction: SectionPrediction;
|
||||
accentClass: string;
|
||||
iconBg: string;
|
||||
barColor: string;
|
||||
}) => {
|
||||
const conf = getConfidenceStyle(prediction.confidence);
|
||||
const pct = (v: number) => ((v - 200) / (800 - 200)) * 100;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2 rounded-2xl border border-gray-100 bg-gray-50 px-4 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`p-1.5 rounded-lg ${accentClass}`}>
|
||||
<Icon size={14} className="text-white" />
|
||||
</div>
|
||||
<span className="font-satoshi-medium text-sm text-gray-700">
|
||||
{label}
|
||||
</span>
|
||||
<div className="psc-detail-card">
|
||||
<div className="psc-detail-top">
|
||||
<div className="psc-detail-icon-wrap" style={{ background: iconBg }}>
|
||||
<Icon size={15} color={barColor} />
|
||||
</div>
|
||||
<span
|
||||
className={`flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full border font-satoshi ${conf.bg} ${conf.color}`}
|
||||
<span className="psc-detail-label">{label}</span>
|
||||
<div
|
||||
className="psc-conf-badge"
|
||||
style={{
|
||||
background: conf.bg,
|
||||
borderColor: conf.border,
|
||||
color: conf.color,
|
||||
}}
|
||||
>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${conf.dot}`} />
|
||||
<div className="psc-conf-dot" style={{ background: conf.dot }} />
|
||||
{conf.label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-end justify-between mt-1">
|
||||
<span className="font-satoshi-bold text-2xl text-gray-900">
|
||||
{prediction.score}
|
||||
</span>
|
||||
<span className="font-satoshi text-xs text-gray-400 mb-1">
|
||||
Range:{" "}
|
||||
<span className="text-gray-600 font-satoshi-medium">
|
||||
<div className="psc-score-range-row">
|
||||
<span className="psc-detail-score">{prediction.score}</span>
|
||||
<div className="psc-range-text">
|
||||
<span>Range</span>
|
||||
<br />
|
||||
<span>
|
||||
{prediction.range_min}–{prediction.range_max}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Range bar */}
|
||||
<div className="relative h-1.5 rounded-full bg-gray-200 mt-1">
|
||||
<div
|
||||
className={`absolute h-1.5 rounded-full ${accentClass} opacity-60`}
|
||||
style={{
|
||||
left: `${((prediction.range_min - 200) / (800 - 200)) * 100}%`,
|
||||
right: `${100 - ((prediction.range_max - 200) / (800 - 200)) * 100}%`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className={`absolute w-2.5 h-2.5 rounded-full border-2 border-white ${accentClass} -top-0.5 shadow-sm`}
|
||||
style={{
|
||||
left: `calc(${((prediction.score - 200) / (800 - 200)) * 100}% - 5px)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between text-[10px] text-gray-300 font-satoshi mt-0.5">
|
||||
<span>200</span>
|
||||
<span>800</span>
|
||||
<div>
|
||||
<div className="psc-bar-wrap">
|
||||
<div
|
||||
className="psc-bar-fill"
|
||||
style={{
|
||||
left: `${pct(prediction.range_min)}%`,
|
||||
right: `${100 - pct(prediction.range_max)}%`,
|
||||
background: barColor,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="psc-bar-dot"
|
||||
style={{
|
||||
left: `${pct(prediction.score)}%`,
|
||||
background: barColor,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="psc-bar-labels">
|
||||
<span>200</span>
|
||||
<span>800</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -154,6 +337,8 @@ const SectionDetail = ({
|
||||
|
||||
// ─── Main component ───────────────────────────────────────────────────────────
|
||||
|
||||
let stylesInjected = false;
|
||||
|
||||
export const PredictedScoreCard = () => {
|
||||
const token = useAuthToken();
|
||||
const [data, setData] = useState<PredictedScoreResponse | null>(null);
|
||||
@ -177,129 +362,113 @@ export const PredictedScoreCard = () => {
|
||||
})();
|
||||
}, [token]);
|
||||
|
||||
if (!stylesInjected) {
|
||||
const tag = document.createElement("style");
|
||||
tag.textContent = STYLES;
|
||||
document.head.appendChild(tag);
|
||||
stylesInjected = true;
|
||||
}
|
||||
|
||||
const animatedTotal = useCountUp(data?.total_score ?? 0, 1000);
|
||||
|
||||
return (
|
||||
<Card className="w-full border border-gray-200 shadow-sm overflow-hidden">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="font-satoshi-bold text-lg text-gray-900">
|
||||
Predicted SAT Score
|
||||
</CardTitle>
|
||||
<CardDescription className="font-satoshi text-sm text-gray-400 mt-0.5">
|
||||
Based on your practice performance
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="p-2 rounded-xl bg-purple-50 border border-purple-100">
|
||||
<TrendingUp size={18} className="text-purple-500" />
|
||||
</div>
|
||||
<div className="psc-card">
|
||||
{/* Header */}
|
||||
<div className="psc-header">
|
||||
<div className="psc-header-left">
|
||||
<p className="psc-header-title">Predicted SAT Score</p>
|
||||
<p className="psc-header-sub">Based on your practice performance</p>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<div className="psc-header-icon">
|
||||
<TrendingUp size={17} color="white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CardContent className="space-y-4">
|
||||
{/* Body */}
|
||||
<div className="psc-body">
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 size={26} className="animate-spin text-purple-400" />
|
||||
<div className="psc-loading">
|
||||
<Loader2 size={20} color="#a855f7" className="psc-spinner" />
|
||||
Calculating your score...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && !loading && (
|
||||
<p className="font-satoshi text-sm text-rose-500 text-center py-4">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
{error && !loading && <div className="psc-error">⚠️ {error}</div>}
|
||||
|
||||
{data && !loading && (
|
||||
<>
|
||||
{/* ── Collapsed view: big numbers only ── */}
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Score cells */}
|
||||
<div className="psc-scores-row">
|
||||
{/* Total */}
|
||||
<div className="flex flex-col">
|
||||
<span className="font-satoshi text-lg text-gray-400 mb-0.5">
|
||||
Total
|
||||
</span>
|
||||
<span className="font-satoshi-bold text-6xl text-gray-900 leading-none">
|
||||
{animatedTotal}
|
||||
</span>
|
||||
<span className="font-satoshi text-[18px] text-gray-300 mt-1">
|
||||
out of 1600
|
||||
</span>
|
||||
<div className="psc-score-cell total">
|
||||
<div className="psc-cell-label">
|
||||
<TrendingUp size={10} color="#a855f7" /> Total
|
||||
</div>
|
||||
<span className="psc-cell-score large">{animatedTotal}</span>
|
||||
<span className="psc-cell-out">/ 1600</span>
|
||||
</div>
|
||||
|
||||
<div className="h-12 w-px bg-gray-100" />
|
||||
|
||||
{/* Math */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="flex items-center gap-1 mb-0.5">
|
||||
<Calculator size={16} className="text-violet-400" />
|
||||
<span className="font-satoshi text-sm text-gray-400">
|
||||
Math
|
||||
</span>
|
||||
<div className="psc-score-cell">
|
||||
<div className="psc-cell-label">
|
||||
<Calculator size={10} color="#7c3aed" /> Math
|
||||
</div>
|
||||
<span className="font-satoshi-bold text-3xl text-gray-900 leading-none">
|
||||
<span className="psc-cell-score medium">
|
||||
{data.math_prediction.score}
|
||||
</span>
|
||||
<span className="font-satoshi text-[12px] text-gray-300 mt-1">
|
||||
out of 800
|
||||
</span>
|
||||
<span className="psc-cell-out">/ 800</span>
|
||||
</div>
|
||||
|
||||
<div className="h-12 w-px bg-gray-100" />
|
||||
|
||||
{/* R&W */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="flex items-center gap-1 mb-0.5">
|
||||
<BookOpen size={16} className="text-sky-400" />
|
||||
<span className="font-satoshi text-sm text-gray-400">
|
||||
R&W
|
||||
</span>
|
||||
<div className="psc-score-cell">
|
||||
<div className="psc-cell-label">
|
||||
<BookOpen size={10} color="#0891b2" /> R&W
|
||||
</div>
|
||||
<span className="font-satoshi-bold text-3xl text-gray-900 leading-none">
|
||||
<span className="psc-cell-score medium">
|
||||
{data.rw_prediction.score}
|
||||
</span>
|
||||
<span className="font-satoshi text-[12px] text-gray-300 mt-1">
|
||||
out of 800
|
||||
</span>
|
||||
<span className="psc-cell-out">/ 800</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Expand toggle ── */}
|
||||
{/* Toggle */}
|
||||
<button
|
||||
className="psc-toggle-btn"
|
||||
onClick={() => setExpanded((p) => !p)}
|
||||
className="w-full flex items-center justify-center gap-1.5 py-2 text-xs font-satoshi-medium text-gray-400 hover:text-purple-500 transition-colors"
|
||||
>
|
||||
{expanded ? (
|
||||
<>
|
||||
<ChevronUp size={14} /> Less detail
|
||||
<ChevronUp size={13} /> Less detail
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ChevronDown size={14} /> More detail
|
||||
<ChevronDown size={13} /> Score breakdown
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* ── Expanded: range bars + confidence ── */}
|
||||
{/* Expanded */}
|
||||
{expanded && (
|
||||
<div className="space-y-3 pt-1">
|
||||
<div className="psc-expanded-wrap">
|
||||
<SectionDetail
|
||||
label="Math"
|
||||
label="Mathematics"
|
||||
icon={Calculator}
|
||||
prediction={data.math_prediction}
|
||||
accentClass="bg-violet-500"
|
||||
iconBg="#fdf4ff"
|
||||
barColor="#a855f7"
|
||||
/>
|
||||
<SectionDetail
|
||||
label="Reading & Writing"
|
||||
icon={BookOpen}
|
||||
prediction={data.rw_prediction}
|
||||
accentClass="bg-sky-500"
|
||||
iconBg="#ecfeff"
|
||||
barColor="#0891b2"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
133
src/components/ui/drawer.tsx
Normal file
133
src/components/ui/drawer.tsx
Normal file
@ -0,0 +1,133 @@
|
||||
import * as React from "react"
|
||||
import { Drawer as DrawerPrimitive } from "vaul"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Drawer({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
|
||||
return <DrawerPrimitive.Root data-slot="drawer" {...props} />
|
||||
}
|
||||
|
||||
function DrawerTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
|
||||
return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DrawerPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
|
||||
return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
|
||||
}
|
||||
|
||||
function DrawerClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
|
||||
return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
|
||||
}
|
||||
|
||||
function DrawerOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
|
||||
return (
|
||||
<DrawerPrimitive.Overlay
|
||||
data-slot="drawer-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DrawerContent({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
|
||||
return (
|
||||
<DrawerPortal data-slot="drawer-portal">
|
||||
<DrawerOverlay />
|
||||
<DrawerPrimitive.Content
|
||||
data-slot="drawer-content"
|
||||
className={cn(
|
||||
"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
|
||||
"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
|
||||
"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
|
||||
"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
|
||||
"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
|
||||
{children}
|
||||
</DrawerPrimitive.Content>
|
||||
</DrawerPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="drawer-header"
|
||||
className={cn(
|
||||
"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="drawer-footer"
|
||||
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DrawerTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
|
||||
return (
|
||||
<DrawerPrimitive.Title
|
||||
data-slot="drawer-title"
|
||||
className={cn("text-foreground font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DrawerDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
|
||||
return (
|
||||
<DrawerPrimitive.Description
|
||||
data-slot="drawer-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Drawer,
|
||||
DrawerPortal,
|
||||
DrawerOverlay,
|
||||
DrawerTrigger,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerHeader,
|
||||
DrawerFooter,
|
||||
DrawerTitle,
|
||||
DrawerDescription,
|
||||
}
|
||||
7
src/hooks/usePageTitle.ts
Normal file
7
src/hooks/usePageTitle.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { useEffect } from "react";
|
||||
|
||||
export function usePageTitle(title: string) {
|
||||
useEffect(() => {
|
||||
document.title = title;
|
||||
}, [title]);
|
||||
}
|
||||
@ -2,16 +2,185 @@ import { useState, useEffect } from "react";
|
||||
import type { FormEvent } from "react";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { useAuthStore } from "../../stores/authStore";
|
||||
import { Loader2, Mail, Lock } from "lucide-react";
|
||||
import { usePageTitle } from "../../hooks/usePageTitle";
|
||||
|
||||
interface LocationState {
|
||||
from?: {
|
||||
pathname: string;
|
||||
};
|
||||
from?: { pathname: string };
|
||||
}
|
||||
|
||||
const DOTS = [
|
||||
{ size: 12, color: "#f97316", top: "8%", left: "6%", delay: "0s" },
|
||||
{ size: 7, color: "#a855f7", top: "22%", left: "3%", delay: "1.2s" },
|
||||
{ size: 9, color: "#22c55e", top: "65%", left: "5%", delay: "0.6s" },
|
||||
{ size: 8, color: "#f43f5e", top: "80%", left: "8%", delay: "2.1s" },
|
||||
{ size: 12, color: "#3b82f6", top: "10%", right: "6%", delay: "1.8s" },
|
||||
{ size: 7, color: "#eab308", top: "40%", right: "3%", delay: "0.9s" },
|
||||
{ size: 10, color: "#a855f7", top: "72%", right: "5%", delay: "0.4s" },
|
||||
{ size: 8, color: "#f97316", top: "55%", right: "8%", delay: "1.5s" },
|
||||
];
|
||||
|
||||
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');
|
||||
|
||||
.lg-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
padding: 2rem 1.25rem;
|
||||
}
|
||||
|
||||
/* Blobs */
|
||||
.lg-blob { position:fixed;pointer-events:none;z-index:0;filter:blur(52px);opacity:0.38; }
|
||||
.lg-blob-1 { width:280px;height:280px;background:#fde68a;top:-100px;left:-100px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:lgWobble1 14s ease-in-out infinite; }
|
||||
.lg-blob-2 { width:220px;height:220px;background:#a5f3c0;bottom:-60px;left:4%;border-radius:40% 60% 30% 70%/60% 40% 60% 40%;animation:lgWobble2 16s ease-in-out infinite; }
|
||||
.lg-blob-3 { width:250px;height:250px;background:#fbcfe8;top:10%;right:-70px;border-radius:70% 30% 50% 50%/40% 60% 40% 60%;animation:lgWobble1 18s ease-in-out infinite reverse; }
|
||||
.lg-blob-4 { width:180px;height:180px;background:#bfdbfe;bottom:8%;right:0;border-radius:50% 50% 30% 70%/60% 40% 60% 40%;animation:lgWobble2 12s ease-in-out infinite; }
|
||||
|
||||
@keyframes lgWobble1 {
|
||||
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(14px,18px) rotate(8deg);}
|
||||
}
|
||||
@keyframes lgWobble2 {
|
||||
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(-12px,14px) rotate(-6deg);}
|
||||
}
|
||||
|
||||
.lg-dot { position:fixed;border-radius:50%;pointer-events:none;z-index:0;opacity:0.28;animation:lgFloat 7s ease-in-out infinite; }
|
||||
@keyframes lgFloat {
|
||||
0%,100%{transform:translateY(0) rotate(0deg);}
|
||||
50%{transform:translateY(-14px) rotate(180deg);}
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.lg-card {
|
||||
position: relative; z-index: 1;
|
||||
width: 100%; max-width: 400px;
|
||||
background: white; border: 2.5px solid #f3f4f6;
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
|
||||
padding: 2.25rem 2rem 2rem;
|
||||
display: flex; flex-direction: column; gap: 1.75rem;
|
||||
animation: lgPopIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||
}
|
||||
@keyframes lgPopIn {
|
||||
from { opacity:0; transform:scale(0.9) translateY(20px); }
|
||||
to { opacity:1; transform:scale(1) translateY(0); }
|
||||
}
|
||||
|
||||
/* Logo area */
|
||||
.lg-logo-wrap {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
|
||||
}
|
||||
.lg-logo-badge {
|
||||
width: 64px; height: 64px; border-radius: 20px;
|
||||
background: linear-gradient(135deg, #a855f7, #7c3aed);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 6px 0 #5b21b655, 0 10px 24px rgba(124,58,237,0.25);
|
||||
font-size: 1.75rem;
|
||||
animation: lgPopIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.1s both;
|
||||
}
|
||||
.lg-title {
|
||||
font-size: 1.5rem; font-weight: 900; color: #1e1b4b;
|
||||
letter-spacing: -0.02em; text-align: center;
|
||||
}
|
||||
.lg-sub {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.82rem; font-weight: 600; color: #9ca3af;
|
||||
text-align: center; margin-top: -0.25rem;
|
||||
}
|
||||
|
||||
/* Form fields */
|
||||
.lg-fields { display: flex; flex-direction: column; gap: 1rem; }
|
||||
|
||||
.lg-field { display: flex; flex-direction: column; gap: 0.4rem; }
|
||||
.lg-label {
|
||||
font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em;
|
||||
text-transform: uppercase; color: #6b7280;
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
.lg-input-wrap { position: relative; }
|
||||
.lg-input-icon {
|
||||
position: absolute; left: 0.85rem; top: 50%;
|
||||
transform: translateY(-50%); pointer-events: none; color: #9ca3af;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
.lg-input {
|
||||
width: 100%; padding: 0.8rem 1rem 0.8rem 2.6rem;
|
||||
background: #f9fafb; border: 2.5px solid #f3f4f6;
|
||||
border-radius: 14px;
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.88rem; font-weight: 600; color: #1e1b4b;
|
||||
outline: none; transition: all 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.lg-input:focus {
|
||||
background: white; border-color: #c4b5fd;
|
||||
box-shadow: 0 0 0 3px rgba(168,85,247,0.1);
|
||||
}
|
||||
.lg-input:focus ~ .lg-input-icon { color: #a855f7; }
|
||||
.lg-input:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.lg-input::placeholder { color: #d1d5db; }
|
||||
|
||||
/* Remember me */
|
||||
.lg-remember {
|
||||
display: flex; align-items: center; gap: 0.5rem;
|
||||
padding: 0 0.1rem;
|
||||
}
|
||||
.lg-checkbox {
|
||||
width: 18px; height: 18px; border-radius: 6px;
|
||||
accent-color: #a855f7; cursor: pointer; flex-shrink: 0;
|
||||
}
|
||||
.lg-remember-label {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.8rem; font-weight: 600; color: #6b7280;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Error */
|
||||
.lg-error {
|
||||
background: #fff1f2; border: 2px solid #fecdd3;
|
||||
border-radius: 14px; padding: 0.75rem 1rem;
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.82rem; font-weight: 700; color: #e11d48;
|
||||
display: flex; align-items: center; gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Submit button */
|
||||
.lg-btn {
|
||||
width: 100%; padding: 0.95rem;
|
||||
background: #f97316; color: white; border: none;
|
||||
border-radius: 100px; cursor: pointer;
|
||||
font-family: 'Nunito', sans-serif; font-size: 0.95rem; font-weight: 900;
|
||||
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
|
||||
box-shadow: 0 6px 0 #c2560e, 0 8px 20px rgba(249,115,22,0.25);
|
||||
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
.lg-btn:hover { transform:translateY(-2px); box-shadow:0 8px 0 #c2560e,0 12px 24px rgba(249,115,22,0.3); }
|
||||
.lg-btn:active { transform:translateY(3px); box-shadow:0 3px 0 #c2560e; }
|
||||
.lg-btn:disabled {
|
||||
background: #e5e7eb; color: #9ca3af;
|
||||
cursor: not-allowed; box-shadow: 0 4px 0 #d1d5db;
|
||||
}
|
||||
.lg-btn:disabled:hover { transform: none; box-shadow: 0 4px 0 #d1d5db; }
|
||||
|
||||
.lg-spinner { animation: lgSpin 0.8s linear infinite; }
|
||||
@keyframes lgSpin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* Footer hint */
|
||||
.lg-footer {
|
||||
text-align: center;
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.75rem; font-weight: 600; color: #9ca3af;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Login = () => {
|
||||
const [email, setEmail] = useState<string>("");
|
||||
const [password, setPassword] = useState<string>("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
@ -20,14 +189,10 @@ export const Login = () => {
|
||||
|
||||
const from = (location.state as LocationState)?.from?.pathname || "/student";
|
||||
|
||||
// Redirect if already authenticated
|
||||
useEffect(() => {
|
||||
if (isAuthenticated) {
|
||||
navigate("/student/home", { replace: true });
|
||||
}
|
||||
if (isAuthenticated) navigate("/student/home", { replace: true });
|
||||
}, [isAuthenticated, navigate]);
|
||||
|
||||
// Clear error when component unmounts or inputs change
|
||||
useEffect(() => {
|
||||
return () => clearError();
|
||||
}, [clearError]);
|
||||
@ -35,122 +200,140 @@ export const Login = () => {
|
||||
const handleSubmit = async (e: FormEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
clearError();
|
||||
|
||||
const success = await login({ email, password });
|
||||
if (success) {
|
||||
navigate(from, { replace: true });
|
||||
}
|
||||
if (success) navigate(from, { replace: true });
|
||||
};
|
||||
|
||||
// Don't render login form if already authenticated
|
||||
if (isAuthenticated) {
|
||||
return null;
|
||||
}
|
||||
if (isAuthenticated) return null;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center ">
|
||||
<div className="bg-white p-8 rounded-lg shadow-lg w-full max-w-sm border border-gray-300 space-y-6">
|
||||
<div className="flex justify-center">
|
||||
<img
|
||||
src="src/assets/ed_logo.png"
|
||||
alt="EdBridge logo"
|
||||
className="h-15 w-auto object-contain"
|
||||
draggable={false}
|
||||
/>
|
||||
</div>
|
||||
<h2 className="text-3xl font-satoshi-bold text-center text-gray-800">
|
||||
Welcome Back
|
||||
</h2>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-satoshi-medium text-gray-700 mb-2"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
disabled={isLoading}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition disabled:bg-gray-100 disabled:cursor-not-allowed"
|
||||
placeholder="Enter your email"
|
||||
<div className="lg-screen">
|
||||
<style>{STYLES}</style>
|
||||
|
||||
{/* Blobs */}
|
||||
<div className="lg-blob lg-blob-1" />
|
||||
<div className="lg-blob lg-blob-2" />
|
||||
<div className="lg-blob lg-blob-3" />
|
||||
<div className="lg-blob lg-blob-4" />
|
||||
|
||||
{/* Dots */}
|
||||
{DOTS.map((d, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="lg-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.5 + i * 0.4}s`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
))}
|
||||
|
||||
<div className="lg-card">
|
||||
{/* Logo + heading */}
|
||||
<div className="lg-logo-wrap">
|
||||
<div className="lg-logo-badge">
|
||||
<img
|
||||
src="src/assets/ed_logo.png"
|
||||
alt="EdBridge"
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
objectFit: "contain",
|
||||
borderRadius: 8,
|
||||
}}
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).style.display = "none";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block text-sm font-satoshi-medium text-gray-700 mb-2"
|
||||
>
|
||||
Password
|
||||
<h1 className="lg-title">Welcome back 👋</h1>
|
||||
<p className="lg-sub">Sign in to continue your SAT prep</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fields */}
|
||||
<div className="lg-fields">
|
||||
{/* Email */}
|
||||
<div className="lg-field">
|
||||
<label className="lg-label" htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
disabled={isLoading}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition disabled:bg-gray-100 disabled:cursor-not-allowed"
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
<div className="flex items-center mt-4">
|
||||
<div className="lg-input-wrap">
|
||||
<Mail size={15} className="lg-input-icon" />
|
||||
<input
|
||||
id="rememberMe"
|
||||
type="checkbox"
|
||||
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
|
||||
id="email"
|
||||
type="email"
|
||||
className="lg-input"
|
||||
placeholder="you@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<label
|
||||
htmlFor="rememberMe"
|
||||
className="ml-2 block text-sm font-satoshi-medium text-gray-700"
|
||||
>
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div className="lg-field">
|
||||
<label className="lg-label" htmlFor="password">
|
||||
Password
|
||||
</label>
|
||||
<div className="lg-input-wrap">
|
||||
<Lock size={15} className="lg-input-icon" />
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
className="lg-input"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Remember me */}
|
||||
<div className="lg-remember">
|
||||
<input id="rememberMe" type="checkbox" className="lg-checkbox" />
|
||||
<label htmlFor="rememberMe" className="lg-remember-label">
|
||||
Keep me signed in
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm">
|
||||
{error}
|
||||
<div className="lg-error">
|
||||
<span>⚠️</span> {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Submit */}
|
||||
<button
|
||||
className="lg-btn"
|
||||
onClick={handleSubmit}
|
||||
disabled={isLoading || !email || !password}
|
||||
className="w-full bg-linear-to-br from-purple-500 to-purple-600 text-white py-3 rounded-2xl hover:bg-purple-700 transition font-medium disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center justify-center font-satoshi hover:cursor-pointer"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<svg
|
||||
className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
Signing in...
|
||||
<Loader2 size={18} className="lg-spinner" /> Signing in...
|
||||
</>
|
||||
) : (
|
||||
"Sign In"
|
||||
"Sign In →"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="lg-footer">
|
||||
By signing in you agree to Edbridge's Terms & Privacy Policy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,23 +1,8 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Tabs,
|
||||
TabsTrigger,
|
||||
TabsList,
|
||||
TabsContent,
|
||||
} from "../../components/ui/tabs";
|
||||
import { useAuthStore } from "../../stores/authStore";
|
||||
import { CheckCircle, Flame, Search, Zap } from "lucide-react";
|
||||
import { CheckCircle, Flame, Gauge, Play, Search } from "lucide-react";
|
||||
import { api } from "../../utils/api";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../../components/ui/card";
|
||||
import { Badge } from "../../components/ui/badge";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import type { PracticeSheet } from "../../types/sheet";
|
||||
import { formatStatus } from "../../lib/utils";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
@ -29,6 +14,322 @@ import {
|
||||
AvatarImage,
|
||||
} from "../../components/ui/avatar";
|
||||
import { useExamConfigStore } from "../../stores/useExamConfigStore";
|
||||
import {
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
DrawerTrigger,
|
||||
} from "../../components/ui/drawer";
|
||||
|
||||
// ─── Shared blob/dot background (same as break/results screens) ────────────────
|
||||
const DOTS = [
|
||||
{ size: 12, color: "#f97316", top: "8%", left: "6%", delay: "0s" },
|
||||
{ size: 8, color: "#a855f7", top: "22%", left: "2%", delay: "1s" },
|
||||
{ size: 10, color: "#22c55e", top: "55%", left: "4%", delay: "0.5s" },
|
||||
{ size: 14, color: "#3b82f6", top: "10%", right: "5%", delay: "1.5s" },
|
||||
{ size: 8, color: "#f43f5e", top: "40%", right: "3%", delay: "0.8s" },
|
||||
{ size: 10, color: "#eab308", top: "70%", right: "7%", delay: "0.3s" },
|
||||
];
|
||||
|
||||
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');
|
||||
|
||||
.home-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ── Blobs ── */
|
||||
.h-blob { position: fixed; pointer-events: none; z-index: 0; filter: blur(48px); opacity: 0.35; }
|
||||
.h-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:hWobble1 14s ease-in-out infinite; }
|
||||
.h-blob-2 { width:190px;height:190px;background:#a5f3c0;bottom:-50px;left:6%;border-radius:40% 60% 30% 70%/60% 40% 60% 40%;animation:hWobble2 16s ease-in-out infinite; }
|
||||
.h-blob-3 { width:210px;height:210px;background:#fbcfe8;top:15%;right:-60px;border-radius:70% 30% 50% 50%/40% 60% 40% 60%;animation:hWobble1 18s ease-in-out infinite reverse; }
|
||||
.h-blob-4 { width:150px;height:150px;background:#bfdbfe;bottom:12%;right:2%;border-radius:50% 50% 30% 70%/60% 40% 60% 40%;animation:hWobble2 12s ease-in-out infinite; }
|
||||
|
||||
@keyframes hWobble1 {
|
||||
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 hWobble2 {
|
||||
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);}
|
||||
}
|
||||
|
||||
/* ── Floating dots ── */
|
||||
.h-dot { position:fixed;border-radius:50%;pointer-events:none;z-index:0;opacity:0.3;animation:hFloat 6s ease-in-out infinite; }
|
||||
@keyframes hFloat {
|
||||
0%,100%{transform:translateY(0) rotate(0deg);}
|
||||
50%{transform:translateY(-14px) rotate(180deg);}
|
||||
}
|
||||
|
||||
/* ── Inner scroll container ── */
|
||||
.home-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 580px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1.25rem 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.75rem;
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
.home-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
animation: hPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||
}
|
||||
.home-header-left { display:flex;align-items:center;gap:0.75rem; }
|
||||
.home-user-name {
|
||||
font-size: 1.1rem; font-weight: 900; color: #1e1b4b; line-height:1.1;
|
||||
}
|
||||
.home-user-role {
|
||||
font-size: 0.72rem; font-weight: 700; letter-spacing:0.08em;
|
||||
text-transform: uppercase; color: #a855f7;
|
||||
}
|
||||
.home-header-right { display:flex;align-items:center;gap:0.6rem; }
|
||||
|
||||
/* Header action chips */
|
||||
.h-chip {
|
||||
display: flex; align-items: center; gap: 0.4rem;
|
||||
background: white; border: 2.5px solid #f3f4f6;
|
||||
border-radius: 100px; padding: 0.5rem 0.9rem;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.06);
|
||||
cursor: pointer; font-size:0.85rem; font-weight:800;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.h-chip:hover { transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,0.08); }
|
||||
.h-chip.streak { border-color:#fecaca; background:#fff5f5; color:#ef4444; }
|
||||
.h-chip.score { border-color:#d9f99d; background:#f7ffe4; color:#65a30d; }
|
||||
|
||||
/* ── Section titles ── */
|
||||
.h-section-title {
|
||||
font-size: 1.2rem; font-weight: 900; color: #1e1b4b;
|
||||
letter-spacing: -0.01em; margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* ── Search bar ── */
|
||||
.h-search-wrap {
|
||||
position: relative;
|
||||
animation: hPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.05s both;
|
||||
}
|
||||
.h-search-input {
|
||||
width: 100%; box-sizing: border-box;
|
||||
padding: 0.85rem 1rem 0.85rem 2.8rem;
|
||||
background: white; border: 2.5px solid #f3f4f6;
|
||||
border-radius: 18px;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 0.9rem; font-weight: 700; color: #9ca3af;
|
||||
box-shadow: 0 4px 14px rgba(0,0,0,0.05);
|
||||
cursor: pointer; outline: none;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.h-search-input:focus { border-color:#c084fc; box-shadow:0 4px 20px rgba(192,132,252,0.15); }
|
||||
.h-search-icon {
|
||||
position: absolute; left: 0.9rem; top: 50%;
|
||||
transform: translateY(-50%); pointer-events:none;
|
||||
}
|
||||
|
||||
/* ── In-progress card ── */
|
||||
.h-inprogress-card {
|
||||
background: white;
|
||||
border: 2.5px solid #c4b5fd;
|
||||
border-radius: 22px;
|
||||
padding: 1.1rem 1.25rem;
|
||||
box-shadow: 0 4px 16px rgba(167,139,250,0.12);
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
gap: 1rem; cursor: pointer;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.h-inprogress-card:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(167,139,250,0.2); }
|
||||
.h-inprogress-info { display:flex;flex-direction:column;gap:0.25rem;flex:1;min-width:0; }
|
||||
.h-inprogress-title {
|
||||
font-size: 0.95rem; font-weight: 900; color: #1e1b4b;
|
||||
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
|
||||
}
|
||||
.h-inprogress-badge {
|
||||
font-size: 0.65rem; font-weight: 800; letter-spacing:0.1em;
|
||||
text-transform:uppercase; color:#a855f7;
|
||||
background:#f3e8ff; border-radius:100px; padding:0.2rem 0.6rem;
|
||||
width: fit-content;
|
||||
}
|
||||
.h-play-btn {
|
||||
width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
|
||||
background: linear-gradient(135deg, #a855f7, #7c3aed);
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
box-shadow: 0 4px 0 #5b21b6aa;
|
||||
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
||||
flex-shrink:0;
|
||||
}
|
||||
.h-play-btn:hover { transform:translateY(-2px);box-shadow:0 6px 0 #5b21b6aa; }
|
||||
.h-play-btn:active { transform:translateY(2px);box-shadow:0 2px 0 #5b21b6aa; }
|
||||
|
||||
/* ── Empty state ── */
|
||||
.h-empty {
|
||||
background:white; border:2.5px dashed #e5e7eb; border-radius:22px;
|
||||
padding: 1.75rem; text-align:center;
|
||||
font-size:0.9rem; font-weight:700; color:#9ca3af;
|
||||
}
|
||||
.h-empty-emoji { font-size:2rem; display:block; margin-bottom:0.5rem; }
|
||||
|
||||
/* ── Tabs ── */
|
||||
.h-tabs-list {
|
||||
display:flex; border-bottom: 2px solid #f3f4f6;
|
||||
gap: 0; margin-bottom:1rem;
|
||||
}
|
||||
.h-tab-btn {
|
||||
flex:1; padding:0.65rem 0; text-align:center;
|
||||
font-family:'Nunito',sans-serif; font-size:0.82rem; font-weight:800;
|
||||
color:#9ca3af; background:transparent; border:none; border-bottom: 3px solid transparent;
|
||||
margin-bottom:-2px; cursor:pointer;
|
||||
transition: color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
.h-tab-btn.active { color:#1e1b4b; border-bottom-color:#a855f7; }
|
||||
|
||||
/* ── Practice sheet card ── */
|
||||
.h-sheet-grid {
|
||||
display:grid; gap:0.85rem;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@media(min-width:520px){ .h-sheet-grid { grid-template-columns:1fr 1fr; } }
|
||||
|
||||
.h-sheet-card {
|
||||
background:white; border:2.5px solid #f3f4f6; border-radius:22px;
|
||||
padding:1.1rem; box-shadow:0 4px 14px rgba(0,0,0,0.04);
|
||||
display:flex; flex-direction:column; gap:0.6rem;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.h-sheet-card:hover { transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.07); }
|
||||
|
||||
.h-sheet-title { font-size:0.95rem;font-weight:900;color:#1e1b4b;line-height:1.2; }
|
||||
.h-sheet-desc { font-size:0.78rem;font-weight:600;color:#9ca3af;font-family:'Nunito Sans',sans-serif; }
|
||||
|
||||
.h-sheet-meta {
|
||||
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.4rem;
|
||||
}
|
||||
.h-status-pill {
|
||||
font-size:0.65rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;
|
||||
border-radius:100px;padding:0.25rem 0.65rem;
|
||||
}
|
||||
.h-status-pill.inprogress { background:#f3e8ff;color:#9333ea; }
|
||||
.h-status-pill.notstarted { background:#f3f4f6;color:#6b7280; }
|
||||
.h-status-pill.completed { background:#dcfce7;color:#16a34a; }
|
||||
|
||||
.h-modules-badge {
|
||||
font-size:0.65rem;font-weight:800;
|
||||
background:#ede9fe;color:#7c3aed;border-radius:100px;padding:0.25rem 0.65rem;
|
||||
}
|
||||
.h-time-badge {
|
||||
font-size:0.72rem;font-weight:700;color:#9ca3af;display:flex;align-items:center;gap:0.3rem;
|
||||
}
|
||||
|
||||
.h-start-btn {
|
||||
width:100%;margin-top:auto;
|
||||
background:#f97316;color:white;border:none;border-radius:100px;
|
||||
padding:0.75rem;font-family:'Nunito',sans-serif;
|
||||
font-size:0.9rem;font-weight:800;cursor:pointer;
|
||||
box-shadow:0 4px 0 #c2560e,0 6px 16px rgba(249,115,22,0.2);
|
||||
transition:transform 0.1s ease,box-shadow 0.1s ease;
|
||||
}
|
||||
.h-start-btn:hover { transform:translateY(-2px);box-shadow:0 6px 0 #c2560e,0 10px 20px rgba(249,115,22,0.25); }
|
||||
.h-start-btn:active { transform:translateY(2px); box-shadow:0 2px 0 #c2560e,0 3px 8px rgba(249,115,22,0.15); }
|
||||
|
||||
/* ── Tips section ── */
|
||||
.h-tips-list { display:flex;flex-direction:column;gap:0.6rem; }
|
||||
.h-tip-row {
|
||||
display:flex;align-items:flex-start;gap:0.65rem;
|
||||
background:white;border:2.5px solid #f3f4f6;border-radius:16px;
|
||||
padding:0.75rem 1rem;box-shadow:0 2px 8px rgba(0,0,0,0.03);
|
||||
}
|
||||
.h-tip-icon { flex-shrink:0;margin-top:1px; }
|
||||
.h-tip-text { font-size:0.85rem;font-weight:700;color:#374151;line-height:1.4; }
|
||||
|
||||
|
||||
/* ── Load more ── */
|
||||
.h-load-more-btn {
|
||||
width: 100%; margin-top: 0.25rem;
|
||||
padding: 0.75rem;
|
||||
background: white; border: 2.5px solid #f3f4f6;
|
||||
border-radius: 100px; cursor: pointer;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 0.82rem; font-weight: 800; color: #9ca3af;
|
||||
display: flex; align-items: center; justify-content: center; gap: 0.4rem;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.04);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.h-load-more-btn:hover { border-color: #c4b5fd; color: #a855f7; background: #fdf4ff; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,0.06); }
|
||||
.h-load-more-btn:active { transform: translateY(1px); }
|
||||
|
||||
.h-sheet-count {
|
||||
text-align: center;
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.72rem; font-weight: 600; color: #d1d5db;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.h-sheet-count span { font-weight: 800; color: #9ca3af; }
|
||||
|
||||
@keyframes hPopIn {
|
||||
from{opacity:0;transform:scale(0.92) translateY(10px);}
|
||||
to{opacity:1;transform:scale(1) translateY(0);}
|
||||
}
|
||||
.h-anim { animation: hPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
|
||||
.h-anim-1 { animation-delay:0.05s; }
|
||||
.h-anim-2 { animation-delay:0.1s; }
|
||||
.h-anim-3 { animation-delay:0.15s; }
|
||||
.h-anim-4 { animation-delay:0.2s; }
|
||||
.h-anim-5 { animation-delay:0.25s; }
|
||||
`;
|
||||
|
||||
// ─── Sheet card ───────────────────────────────────────────────────────────────
|
||||
const SheetCard = ({
|
||||
sheet,
|
||||
onStart,
|
||||
}: {
|
||||
sheet: PracticeSheet;
|
||||
onStart: (id: string) => void;
|
||||
}) => {
|
||||
const statusClass =
|
||||
sheet.user_status === "IN_PROGRESS"
|
||||
? "inprogress"
|
||||
: sheet.user_status === "COMPLETED"
|
||||
? "completed"
|
||||
: "notstarted";
|
||||
|
||||
return (
|
||||
<div className="h-sheet-card">
|
||||
<p className="h-sheet-title">{sheet.title}</p>
|
||||
{sheet.description && <p className="h-sheet-desc">{sheet.description}</p>}
|
||||
<div className="h-sheet-meta">
|
||||
<span className={`h-status-pill ${statusClass}`}>
|
||||
{formatStatus(sheet.user_status)}
|
||||
</span>
|
||||
<span className="h-modules-badge">
|
||||
📚 {sheet.modules_count} modules
|
||||
</span>
|
||||
</div>
|
||||
<p className="h-time-badge">⏱️ {sheet.time_limit} min</p>
|
||||
<button className="h-start-btn" onClick={() => onStart(sheet.id)}>
|
||||
{sheet.user_status === "COMPLETED" ? "Retry →" : "Start →"}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── Tips data ────────────────────────────────────────────────────────────────
|
||||
const TIPS = [
|
||||
"Practice regularly with official SAT materials",
|
||||
"Review your mistakes and learn from them",
|
||||
"Focus on your weak areas first",
|
||||
"Take full-length practice tests",
|
||||
"Get plenty of rest before test day",
|
||||
];
|
||||
|
||||
// ─── Main component ───────────────────────────────────────────────────────────
|
||||
const PAGE_SIZE = 2;
|
||||
|
||||
export const Home = () => {
|
||||
const user = useAuthStore((state) => state.user);
|
||||
@ -39,358 +340,272 @@ export const Home = () => {
|
||||
const [notStartedSheets, setNotStartedSheets] = useState<PracticeSheet[]>([]);
|
||||
const [inProgressSheets, setInProgressSheets] = useState<PracticeSheet[]>([]);
|
||||
const [completedSheets, setCompletedSheets] = useState<PracticeSheet[]>([]);
|
||||
|
||||
const [activeTab, setActiveTab] = useState<
|
||||
"all" | "NOT_STARTED" | "COMPLETED"
|
||||
>("all");
|
||||
const [isSearchOpen, setIsSearchOpen] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
|
||||
|
||||
useEffect(() => {
|
||||
const sortPracticeSheets = (sheets: PracticeSheet[]) => {
|
||||
const notStarted = sheets.filter(
|
||||
(sheet) => sheet.user_status === "NOT_STARTED",
|
||||
const sort = (sheets: PracticeSheet[]) => {
|
||||
setNotStartedSheets(
|
||||
sheets.filter((s) => s.user_status === "NOT_STARTED"),
|
||||
);
|
||||
const inProgress = sheets.filter(
|
||||
(sheet) => sheet.user_status === "IN_PROGRESS",
|
||||
setInProgressSheets(
|
||||
sheets.filter((s) => s.user_status === "IN_PROGRESS"),
|
||||
);
|
||||
const completed = sheets.filter(
|
||||
(sheet) => sheet.user_status === "COMPLETED",
|
||||
);
|
||||
|
||||
setNotStartedSheets(notStarted);
|
||||
setInProgressSheets(inProgress);
|
||||
setCompletedSheets(completed);
|
||||
setCompletedSheets(sheets.filter((s) => s.user_status === "COMPLETED"));
|
||||
};
|
||||
|
||||
const fetchPracticeSheets = async () => {
|
||||
const fetch = async () => {
|
||||
if (!user) return;
|
||||
|
||||
try {
|
||||
const authStorage = localStorage.getItem("auth-storage");
|
||||
if (!authStorage) {
|
||||
console.error("authStorage not found in local storage");
|
||||
return;
|
||||
}
|
||||
if (!authStorage) return;
|
||||
const {
|
||||
state: { token },
|
||||
} = JSON.parse(authStorage);
|
||||
if (!token) {
|
||||
console.error("Token not found in authStorage");
|
||||
return;
|
||||
}
|
||||
if (!token) return;
|
||||
const sheets = await api.getPracticeSheets(token, 1, 10);
|
||||
setPracticeSheets(sheets.data);
|
||||
sortPracticeSheets(sheets.data);
|
||||
} catch (error) {
|
||||
console.error("Error fetching practice sheets:", error);
|
||||
sort(sheets.data);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
fetchPracticeSheets();
|
||||
fetch();
|
||||
}, [user]);
|
||||
|
||||
const handleStartPracticeSheet = (sheetId: string) => {
|
||||
navigate(`/student/practice/${sheetId}`);
|
||||
const handleStart = (id: string) => navigate(`/student/practice/${id}`);
|
||||
|
||||
const allTabSheets =
|
||||
activeTab === "all"
|
||||
? practiceSheets
|
||||
: activeTab === "NOT_STARTED"
|
||||
? notStartedSheets
|
||||
: completedSheets;
|
||||
|
||||
const tabSheets = allTabSheets.slice(0, visibleCount);
|
||||
const hasMore = visibleCount < allTabSheets.length;
|
||||
const remaining = allTabSheets.length - visibleCount;
|
||||
|
||||
const handleTabChange = (tab: "all" | "NOT_STARTED" | "COMPLETED") => {
|
||||
setActiveTab(tab);
|
||||
setVisibleCount(PAGE_SIZE);
|
||||
};
|
||||
|
||||
const greeting =
|
||||
new Date().getHours() < 12
|
||||
? "Good morning"
|
||||
: new Date().getHours() < 17
|
||||
? "Good afternoon"
|
||||
: "Good evening";
|
||||
|
||||
return (
|
||||
<main className="min-h-screen space-y-6 mx-auto px-8 sm:px-6 lg:px-90 py-12">
|
||||
<header className="flex items-center gap-3 justify-between">
|
||||
<div className="flex gap-3">
|
||||
<Avatar className="w-12 h-12">
|
||||
<AvatarImage src={user?.avatar_url} />
|
||||
<AvatarFallback className="font-satoshi-bold bg-linear-to-br from-indigo-400 to-indigo-500 uppercase text-lg text-white">
|
||||
{user?.name.slice(0, 1)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="text-xl font-satoshi-bold tracking-tight text-gray-800 text-center">
|
||||
Welcome, {user?.name || "Student"}
|
||||
</h1>
|
||||
<h4 className="text-sm font-satoshi-bold text-indigo-500 ">
|
||||
{user?.role === "STUDENT"
|
||||
? "Student"
|
||||
: user?.role === "ADMIN"
|
||||
? "Admin"
|
||||
: "Taecher"}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<div className="rounded-full w-fit flex items-center gap-2">
|
||||
<Flame size={20} className="text-red-500 fill-amber-200" />
|
||||
<div className="home-screen">
|
||||
<style>{STYLES}</style>
|
||||
|
||||
<span className="font-satoshi-bold text-md">5</span>
|
||||
</div>
|
||||
<div className="rounded-full w-fit flex items-center gap-2">
|
||||
<Zap size={20} className="text-lime-500 fill-lime-200" />
|
||||
{/* Blobs */}
|
||||
<div className="h-blob h-blob-1" />
|
||||
<div className="h-blob h-blob-2" />
|
||||
<div className="h-blob h-blob-3" />
|
||||
<div className="h-blob h-blob-4" />
|
||||
|
||||
<span className="font-satoshi-bold text-md">{userXp}</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<PredictedScoreCard />
|
||||
<h1 className="font-satoshi-bold text-2xl tracking-tight">
|
||||
What are you looking for?
|
||||
</h1>
|
||||
<section className="relative w-full">
|
||||
<input
|
||||
onFocus={() => setIsSearchOpen(true)}
|
||||
placeholder="Search practice sheets..."
|
||||
readOnly
|
||||
className="font-satoshi w-full pl-10 pr-4 py-3 border border-gray-300 rounded-2xl shadow-sm cursor-pointer"
|
||||
{/* Dots */}
|
||||
{DOTS.map((d, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="h-dot"
|
||||
style={
|
||||
{
|
||||
width: d.size,
|
||||
height: d.size,
|
||||
background: d.color,
|
||||
top: d.top,
|
||||
left: d.left,
|
||||
right: d.right,
|
||||
animationDelay: d.delay,
|
||||
animationDuration: `${3.5 + i * 0.4}s`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<Search size={22} color="gray" />
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
|
||||
<section className="space-y-4">
|
||||
<h1 className="font-satoshi-bold text-2xl tracking-tight">
|
||||
Pick up where you left off
|
||||
</h1>
|
||||
{inProgressSheets.length > 0 ? (
|
||||
inProgressSheets.map((sheet) => (
|
||||
<Card
|
||||
key={sheet?.id}
|
||||
className="rounded-4xl border bg-indigo-50/70 border-indigo-500"
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle className="font-satoshi-medium text-xl">
|
||||
{sheet?.title}
|
||||
</CardTitle>
|
||||
<CardDescription className="font-satoshi">
|
||||
{sheet?.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex justify-between">
|
||||
<p className="font-satoshi text-sm border px-2 rounded-full bg-indigo-500 text-white py-1">
|
||||
{formatStatus(sheet?.user_status)}
|
||||
</p>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="bg-indigo-100 text-indigo-500 font-satoshi tracking-wide"
|
||||
>
|
||||
{sheet?.modules_count} modules
|
||||
</Badge>
|
||||
</CardContent>
|
||||
<CardContent>
|
||||
<p className="font-satoshi text-gray-700">
|
||||
{sheet?.time_limit} minutes
|
||||
</p>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button
|
||||
onClick={() => handleStartPracticeSheet(sheet?.id)}
|
||||
variant="outline"
|
||||
className="font-satoshi rounded-3xl w-full text-lg py-6 bg-linear-to-br from-indigo-500 to-indigo-600 text-white"
|
||||
>
|
||||
Resume
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))
|
||||
) : (
|
||||
<Card className="flex items-center justify-center py-4 rounded-4xl">
|
||||
<h2 className="text-center font-satoshi text-lg text-gray-800">
|
||||
You don't have any practice sheets in progress. Why not start one?
|
||||
</h2>
|
||||
</Card>
|
||||
)}
|
||||
</section>
|
||||
<section className="w-full">
|
||||
<Tabs defaultValue="all" className="w-full">
|
||||
<TabsList className="bg-transparent p-0 w-full">
|
||||
<TabsTrigger
|
||||
value="all"
|
||||
className="font-satoshi-regular tracking-wide text-md rounded-none border-b-3 data-[state=active]:font-satoshi-medium data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
|
||||
>
|
||||
All
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="NOT_STARTED"
|
||||
className="font-satoshi-regular tracking-wide text-md rounded-none border-b-3 data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
|
||||
>
|
||||
Not Started
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="COMPLETED"
|
||||
className="font-satoshi-regular tracking-wide text-md rounded-none border-b-3 data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
|
||||
>
|
||||
Completed
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="all" className="pt-6">
|
||||
<div className="gap-6 flex flex-col md:grid md:grid-cols-2">
|
||||
{practiceSheets.length > 0 ? (
|
||||
practiceSheets.map((sheet) => (
|
||||
<Card key={sheet?.id} className="rounded-4xl">
|
||||
<CardHeader>
|
||||
<CardTitle className="font-satoshi-medium text-xl">
|
||||
{sheet?.title}
|
||||
</CardTitle>
|
||||
<CardDescription className="font-satoshi">
|
||||
{sheet?.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex justify-between">
|
||||
<p className="font-satoshi text-gray-500">
|
||||
{formatStatus(sheet?.user_status)}
|
||||
</p>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="bg-indigo-100 text-indigo-500 font-satoshi tracking-wide"
|
||||
>
|
||||
{sheet?.modules_count} modules
|
||||
</Badge>
|
||||
</CardContent>
|
||||
<CardContent>
|
||||
<p className="font-satoshi text-gray-700">
|
||||
{sheet?.time_limit} minutes
|
||||
</p>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button
|
||||
onClick={() => handleStartPracticeSheet(sheet?.id)}
|
||||
variant="outline"
|
||||
className="font-satoshi rounded-3xl w-full text-lg py-6 bg-linear-to-br from-indigo-500 to-indigo-600 text-white"
|
||||
>
|
||||
Start
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))
|
||||
) : (
|
||||
<div className="flex items-center justify-center py-4 rounded-full">
|
||||
<h2 className="text-center font-satoshi text-lg text-gray-500">
|
||||
No Practice Sheets available.
|
||||
</h2>
|
||||
</div>
|
||||
)}
|
||||
<div className="home-inner">
|
||||
{/* ── Header ── */}
|
||||
<header className="home-header">
|
||||
<div className="home-header-left">
|
||||
<Avatar style={{ width: 48, height: 48 }}>
|
||||
<AvatarImage src={user?.avatar_url} />
|
||||
<AvatarFallback
|
||||
style={{
|
||||
fontWeight: 900,
|
||||
fontSize: "1.1rem",
|
||||
color: "white",
|
||||
textTransform: "uppercase",
|
||||
background: "linear-gradient(135deg,#a855f7,#7c3aed)",
|
||||
}}
|
||||
>
|
||||
{user?.name?.slice(0, 1)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="home-user-name">
|
||||
{greeting}, {user?.name?.split(" ")[0] || "Student"} 👋
|
||||
</p>
|
||||
<p className="home-user-role">
|
||||
{user?.role === "STUDENT"
|
||||
? "Student"
|
||||
: user?.role === "ADMIN"
|
||||
? "Admin"
|
||||
: "Teacher"}
|
||||
</p>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="NOT_STARTED" className="pt-6">
|
||||
<div className="gap-6 flex flex-col md:grid md:grid-cols-2">
|
||||
{notStartedSheets.map((sheet) => (
|
||||
<Card key={sheet?.id} className="rounded-4xl">
|
||||
<CardHeader>
|
||||
<CardTitle className="font-satoshi-medium text-xl">
|
||||
{sheet?.title}
|
||||
</CardTitle>
|
||||
<CardDescription className="font-satoshi">
|
||||
{sheet?.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex justify-between">
|
||||
<p className="font-satoshi text-gray-700">Not Started</p>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="bg-indigo-100 text-indigo-500 font-satoshi tracking-wide "
|
||||
>
|
||||
{sheet?.modules_count} modules
|
||||
</Badge>
|
||||
</CardContent>
|
||||
<CardContent>
|
||||
<p className="font-satoshi text-gray-700">
|
||||
{sheet?.time_limit} minutes
|
||||
</p>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="font-satoshi w-full text-lg py-6 bg-linear-to-br from-indigo-500 to-indigo-600 rounded-3xl text-white"
|
||||
>
|
||||
Start
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="home-header-right">
|
||||
{/* Streak chip */}
|
||||
<div className="h-chip streak">
|
||||
<Flame size={18} style={{ fill: "#fca5a5" }} />
|
||||
<span>5</span>
|
||||
</div>
|
||||
|
||||
{/* Score chip */}
|
||||
<Drawer direction="top">
|
||||
<DrawerTrigger asChild>
|
||||
<div className="h-chip score">
|
||||
<Gauge size={18} />
|
||||
</div>
|
||||
</DrawerTrigger>
|
||||
<DrawerContent>
|
||||
<PredictedScoreCard />
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* ── Search ── */}
|
||||
<div className="h-search-wrap h-anim h-anim-1">
|
||||
<span className="h-search-icon">
|
||||
<Search size={18} color="#9ca3af" />
|
||||
</span>
|
||||
<input
|
||||
className="h-search-input"
|
||||
placeholder="Search practice sheets..."
|
||||
readOnly
|
||||
onFocus={() => setIsSearchOpen(true)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* ── In progress ── */}
|
||||
<section className="h-anim h-anim-2">
|
||||
<p className="h-section-title">📌 Pick up where you left off</p>
|
||||
{inProgressSheets.length > 0 ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "0.65rem",
|
||||
}}
|
||||
>
|
||||
{inProgressSheets.map((sheet) => (
|
||||
<div
|
||||
key={sheet.id}
|
||||
className="h-inprogress-card"
|
||||
onClick={() => handleStart(sheet.id)}
|
||||
>
|
||||
<div className="h-inprogress-info">
|
||||
<p className="h-inprogress-title">{sheet.title}</p>
|
||||
<span className="h-inprogress-badge">In Progress</span>
|
||||
</div>
|
||||
<button
|
||||
className="h-play-btn"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleStart(sheet.id);
|
||||
}}
|
||||
>
|
||||
<Play size={18} color="white" fill="white" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="COMPLETED" className="pt-6">
|
||||
<div className="gap-6 flex flex-col md:grid md:grid-cols-2">
|
||||
{completedSheets.length > 0 ? (
|
||||
completedSheets.map((sheet) => (
|
||||
<Card key={sheet?.id} className="rounded-4xl">
|
||||
<CardHeader>
|
||||
<CardTitle className="font-satoshi-medium text-xl">
|
||||
{sheet?.title}
|
||||
</CardTitle>
|
||||
<CardDescription className="font-satoshi">
|
||||
{sheet?.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex justify-between">
|
||||
<p className="font-satoshi text-gray-500">
|
||||
{formatStatus(sheet?.user_status)}
|
||||
</p>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="bg-indigo-100 text-indigo-500 font-satoshi tracking-wide"
|
||||
>
|
||||
{sheet?.modules_count} modules
|
||||
</Badge>
|
||||
</CardContent>
|
||||
<CardContent>
|
||||
<p className="font-satoshi text-gray-700">
|
||||
{sheet?.time_limit} minutes
|
||||
</p>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="font-satoshi w-full text-lg py-6 bg-linear-to-br from-indigo-500 to-indigo-600 rounded-3xl text-white"
|
||||
>
|
||||
Start
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))
|
||||
) : (
|
||||
<div className="flex items-center justify-center py-4 rounded-full">
|
||||
<h2 className="text-center font-satoshi text-lg text-gray-500">
|
||||
You have not completed any practice sheets.
|
||||
</h2>
|
||||
</div>
|
||||
)}
|
||||
) : (
|
||||
<div className="h-empty">
|
||||
<span className="h-empty-emoji">🎯</span>
|
||||
No sheets in progress — start one below!
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</section>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="space-y-4 ">
|
||||
<h1 className="font-satoshi-bold text-2xl tracking-tight">
|
||||
SAT Preparation Tips
|
||||
</h1>
|
||||
<section className="space-y-4 ">
|
||||
<div className="flex gap-2">
|
||||
<CheckCircle size={24} color="oklch(58.5% 0.233 277.117)" />
|
||||
<p className="font-satoshi text-md">
|
||||
Practice regularly with official SAT materials
|
||||
</p>
|
||||
{/* ── All sheets with tabs ── */}
|
||||
<section className="h-anim h-anim-3">
|
||||
<p className="h-section-title">📋 Practice Sheets</p>
|
||||
|
||||
{/* Tab buttons */}
|
||||
<div className="h-tabs-list">
|
||||
{(["all", "NOT_STARTED", "COMPLETED"] as const).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
className={`h-tab-btn${activeTab === tab ? " active" : ""}`}
|
||||
onClick={() => handleTabChange(tab)}
|
||||
>
|
||||
{tab === "all"
|
||||
? "All"
|
||||
: tab === "NOT_STARTED"
|
||||
? "Not Started"
|
||||
: "Completed"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle size={24} color="oklch(58.5% 0.233 277.117)" />
|
||||
<p className="font-satoshi text-md">
|
||||
Review your mistakes and learn from them
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle size={24} color="oklch(58.5% 0.233 277.117)" />
|
||||
<p className="font-satoshi text-md">Focus on your weak areas</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle size={24} color="oklch(58.5% 0.233 277.117)" />
|
||||
<p className="font-satoshi text-md">
|
||||
Take full-length practice tests
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle size={24} color="oklch(58.5% 0.233 277.117)" />
|
||||
<p className="font-satoshi text-md">
|
||||
Get plenty of rest before the test day
|
||||
</p>
|
||||
|
||||
{allTabSheets.length > 0 ? (
|
||||
<>
|
||||
<div className="h-sheet-grid">
|
||||
{tabSheets.map((sheet) => (
|
||||
<SheetCard
|
||||
key={sheet.id}
|
||||
sheet={sheet}
|
||||
onStart={handleStart}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{hasMore ? (
|
||||
<button
|
||||
className="h-load-more-btn"
|
||||
onClick={() => setVisibleCount((c) => c + PAGE_SIZE)}
|
||||
>
|
||||
↓ Show {Math.min(remaining, PAGE_SIZE)} more
|
||||
</button>
|
||||
) : allTabSheets.length > PAGE_SIZE ? (
|
||||
<p className="h-sheet-count">
|
||||
Showing all <span>{allTabSheets.length}</span> sheets
|
||||
</p>
|
||||
) : null}
|
||||
</>
|
||||
) : (
|
||||
<div className="h-empty">
|
||||
<span className="h-empty-emoji">🔍</span>
|
||||
Nothing here yet!
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* ── Tips ── */}
|
||||
<section className="h-anim h-anim-4">
|
||||
<p className="h-section-title">💡 SAT Prep Tips</p>
|
||||
<div className="h-tips-list">
|
||||
{TIPS.map((tip, i) => (
|
||||
<div key={i} className="h-tip-row">
|
||||
<CheckCircle size={18} color="#a855f7" className="h-tip-icon" />
|
||||
<p className="h-tip-text">{tip}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{isSearchOpen && (
|
||||
<SearchOverlay
|
||||
sheets={practiceSheets}
|
||||
@ -402,6 +617,6 @@ export const Home = () => {
|
||||
setSearchQuery={setSearchQuery}
|
||||
/>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,188 +1,294 @@
|
||||
import { useAuthStore } from "../../stores/authStore";
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
} from "../../components/ui/card";
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "../../components/ui/tabs";
|
||||
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, setLessonlLoading] = useState(true);
|
||||
|
||||
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 = (lessonId: string) => {
|
||||
setSelectedLessonId(lessonId);
|
||||
const handleLessonClick = (id: string) => {
|
||||
setSelectedLessonId(id);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchAllLessons = async () => {
|
||||
if (!user) return;
|
||||
|
||||
try {
|
||||
setLessonlLoading(true);
|
||||
setLessonLoading(true);
|
||||
const authStorage = localStorage.getItem("auth-storage");
|
||||
if (!authStorage) return;
|
||||
|
||||
const parsed = JSON.parse(authStorage) as {
|
||||
state?: { token?: string };
|
||||
};
|
||||
|
||||
const token = parsed.state?.token;
|
||||
const {
|
||||
state: { token },
|
||||
} = JSON.parse(authStorage) as { state?: { token?: string } };
|
||||
if (!token) return;
|
||||
|
||||
const response = await api.fetchAllLessons(token);
|
||||
|
||||
setLessonlLoading(false);
|
||||
setLessons(response.data);
|
||||
} catch (error) {
|
||||
setLessonlLoading(false);
|
||||
console.error("Error fetching lessons:", error);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setLessonLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchAllLessons();
|
||||
}, [user]);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen space-y-6 max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8">
|
||||
<header className="space-y-2">
|
||||
<h1 className="font-satoshi-black text-2xl">Lessons</h1>
|
||||
<p className="font-satoshi-medium text-sm text-gray-500">
|
||||
Browse step-by-step lessons from expert Edbridge tutors and pick up
|
||||
tips to tackle similar questions with confidence.
|
||||
</p>
|
||||
</header>
|
||||
<section>
|
||||
<Tabs defaultValue="rw">
|
||||
<TabsList className="bg-transparent space-x-4">
|
||||
<TabsTrigger
|
||||
value="rw"
|
||||
className="font-satoshi-bold px-2 tracking-wide text-md rounded-none border-b-2 data-[state=active]:font-satoshi-medium data-[state=active]:border-b-purple-800 data-[state=active]:bg-transparent data-[state=active]:text-purple-800"
|
||||
>
|
||||
Reading & Writing
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="math"
|
||||
className="font-satoshi-bold px-2 tracking-wide text-md rounded-none border-b-2 data-[state=active]:border-b-purple-800 data-[state=active]:text-purple-800"
|
||||
>
|
||||
Math
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="rw" className="pt-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{lessonLoading && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<LessonSkeleton key={i} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{!lessonLoading && lessons.length === 0 && (
|
||||
<div className="text-center text-muted-foreground py-12">
|
||||
No lessons available
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!lessonLoading && lessons.length > 0 && (
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{lessons.map((lesson) => (
|
||||
<Card
|
||||
key={lesson.id}
|
||||
onClick={() => handleLessonClick(lesson.id)}
|
||||
className="py-0 pb-5 rounded-4xl overflow-hidden"
|
||||
>
|
||||
<CardHeader className="w-full py-0 px-0">
|
||||
<img
|
||||
src={lesson.thumbnail_url}
|
||||
alt={lesson.title}
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-2">
|
||||
<CardTitle>{lesson.title}</CardTitle>
|
||||
<CardDescription>{lesson.topic.name}</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<LessonModal
|
||||
open={isModalOpen}
|
||||
lessonId={selectedLessonId}
|
||||
onOpenChange={(open) => {
|
||||
setIsModalOpen(open);
|
||||
if (!open) setSelectedLessonId(null);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="math" className="pt-4">
|
||||
{lessonLoading && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<LessonSkeleton key={i} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{!lessonLoading && lessons.length === 0 && (
|
||||
<div className="text-center text-muted-foreground py-12">
|
||||
No lessons available
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!lessonLoading && lessons.length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{lessons.map((lesson) => (
|
||||
<Card
|
||||
key={lesson.id}
|
||||
onClick={() => handleLessonClick(lesson.id)}
|
||||
className="py-0 pb-5 rounded-4xl overflow-hidden"
|
||||
>
|
||||
<CardHeader className="w-full py-0 px-0">
|
||||
<img
|
||||
src={lesson.thumbnail_url}
|
||||
alt={lesson.title}
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-2">
|
||||
<CardTitle>{lesson.title}</CardTitle>
|
||||
<CardDescription>{lesson.topic.name}</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<LessonModal
|
||||
open={isModalOpen}
|
||||
lessonId={selectedLessonId}
|
||||
onOpenChange={(open) => {
|
||||
setIsModalOpen(open);
|
||||
if (!open) setSelectedLessonId(null);
|
||||
}}
|
||||
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"
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</section>
|
||||
</main>
|
||||
<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">
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -7,134 +7,325 @@ import {
|
||||
Trophy,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
Card,
|
||||
CardAction,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../../components/ui/card";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useExamConfigStore } from "../../stores/useExamConfigStore";
|
||||
|
||||
const DOTS = [
|
||||
{ size: 10, color: "#f97316", top: "8%", left: "5%", delay: "0s" },
|
||||
{ size: 7, color: "#a855f7", top: "30%", left: "2%", delay: "1.2s" },
|
||||
{ size: 9, color: "#22c55e", top: "62%", left: "4%", delay: "0.6s" },
|
||||
{ size: 12, color: "#3b82f6", top: "12%", right: "4%", delay: "1.8s" },
|
||||
{ size: 7, color: "#f43f5e", top: "48%", right: "3%", delay: "0.9s" },
|
||||
{ size: 9, color: "#eab308", top: "78%", right: "6%", 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');
|
||||
|
||||
.pr-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ── Blobs ── */
|
||||
.pr-blob { position: fixed; pointer-events: none; z-index: 0; filter: blur(48px); opacity: 0.35; }
|
||||
.pr-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:prWobble1 14s ease-in-out infinite; }
|
||||
.pr-blob-2 { width:190px;height:190px;background:#a5f3c0;bottom:-50px;left:6%;border-radius:40% 60% 30% 70%/60% 40% 60% 40%;animation:prWobble2 16s ease-in-out infinite; }
|
||||
.pr-blob-3 { width:210px;height:210px;background:#fbcfe8;top:15%;right:-60px;border-radius:70% 30% 50% 50%/40% 60% 40% 60%;animation:prWobble1 18s ease-in-out infinite reverse; }
|
||||
.pr-blob-4 { width:150px;height:150px;background:#bfdbfe;bottom:12%;right:2%;border-radius:50% 50% 30% 70%/60% 40% 60% 40%;animation:prWobble2 12s ease-in-out infinite; }
|
||||
|
||||
@keyframes prWobble1 {
|
||||
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 prWobble2 {
|
||||
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);}
|
||||
}
|
||||
|
||||
/* ── Floating dots ── */
|
||||
.pr-dot { position:fixed;border-radius:50%;pointer-events:none;z-index:0;opacity:0.3;animation:prFloat 7s ease-in-out infinite; }
|
||||
@keyframes prFloat {
|
||||
0%,100%{transform:translateY(0) rotate(0deg);}
|
||||
50%{transform:translateY(-12px) rotate(180deg);}
|
||||
}
|
||||
|
||||
/* ── Inner container ── */
|
||||
.pr-inner {
|
||||
position: relative; z-index: 1;
|
||||
max-width: 580px; margin: 0 auto;
|
||||
padding: 2rem 1.25rem 4rem;
|
||||
display: flex; flex-direction: column; gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* ── Animations ── */
|
||||
@keyframes prPopIn {
|
||||
from { opacity:0; transform: scale(0.92) translateY(12px); }
|
||||
to { opacity:1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
.pr-anim { animation: prPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
|
||||
.pr-anim-1 { animation-delay: 0.05s; }
|
||||
.pr-anim-2 { animation-delay: 0.1s; }
|
||||
.pr-anim-3 { animation-delay: 0.15s; }
|
||||
.pr-anim-4 { animation-delay: 0.2s; }
|
||||
|
||||
/* ── Header ── */
|
||||
.pr-header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
animation: prPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||
}
|
||||
.pr-logo-btn {
|
||||
width: 44px; height: 44px; border-radius: 14px;
|
||||
background: linear-gradient(135deg, #a855f7, #7c3aed);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 4px 0 #5b21b644;
|
||||
}
|
||||
.pr-xp-chip {
|
||||
display: flex; align-items: center; gap: 0.5rem;
|
||||
background: white; border: 2.5px solid #e9d5ff;
|
||||
border-radius: 100px; padding: 0.45rem 1rem;
|
||||
font-size: 0.85rem; font-weight: 800; color: #7c3aed;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
|
||||
}
|
||||
.pr-xp-dot {
|
||||
width: 8px; height: 8px; border-radius: 50%;
|
||||
background: linear-gradient(135deg, #a855f7, #7c3aed);
|
||||
}
|
||||
|
||||
/* ── Hero banner ── */
|
||||
.pr-hero {
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(135deg, #7c3aed, #a855f7);
|
||||
padding: 1.5rem;
|
||||
position: relative; overflow: hidden;
|
||||
box-shadow: 0 8px 0 #5b21b644, 0 12px 32px rgba(124,58,237,0.25);
|
||||
display: flex; flex-direction: column; gap: 0.75rem;
|
||||
}
|
||||
.pr-hero-icon-bg {
|
||||
position: absolute; right: -40px; top: -30px;
|
||||
opacity: 0.15; transform: rotate(-30deg);
|
||||
pointer-events: none;
|
||||
}
|
||||
.pr-hero-eyebrow {
|
||||
font-size: 0.65rem; font-weight: 800; letter-spacing: 0.16em;
|
||||
text-transform: uppercase; color: #e9d5ff;
|
||||
}
|
||||
.pr-hero-title {
|
||||
font-size: clamp(1.6rem, 5vw, 2rem); font-weight: 900;
|
||||
color: white; letter-spacing: -0.02em; line-height: 1.15;
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
.pr-hero-sub {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.85rem; font-weight: 600; color: #ddd6fe;
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
.pr-hero-btn {
|
||||
display: inline-flex; align-items: center; gap: 0.4rem;
|
||||
background: white; border: none; border-radius: 100px;
|
||||
padding: 0.7rem 1.4rem; cursor: pointer;
|
||||
font-family: 'Nunito', sans-serif; font-size: 0.88rem; font-weight: 800;
|
||||
color: #7c3aed;
|
||||
box-shadow: 0 4px 0 rgba(0,0,0,0.15);
|
||||
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
||||
width: fit-content; position: relative; z-index: 1;
|
||||
}
|
||||
.pr-hero-btn:hover { transform:translateY(-2px); box-shadow:0 6px 0 rgba(0,0,0,0.15); }
|
||||
.pr-hero-btn:active { transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,0.15); }
|
||||
|
||||
/* ── Section title ── */
|
||||
.pr-section-title {
|
||||
font-size: 1.15rem; font-weight: 900; color: #1e1b4b;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* ── Practice mode grid ── */
|
||||
.pr-grid {
|
||||
display: grid; grid-template-columns: 1fr;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
@media(min-width: 480px){ .pr-grid { grid-template-columns: 1fr 1fr; } }
|
||||
|
||||
/* ── Mode card ── */
|
||||
.pr-mode-card {
|
||||
background: white; border: 2.5px solid #f3f4f6; border-radius: 22px;
|
||||
padding: 1.1rem 1.25rem;
|
||||
box-shadow: 0 4px 14px rgba(0,0,0,0.04);
|
||||
cursor: pointer; display: flex; flex-direction: column; gap: 0.85rem;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.pr-mode-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 24px rgba(0,0,0,0.08);
|
||||
}
|
||||
.pr-mode-card:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(0,0,0,0.06); }
|
||||
|
||||
.pr-mode-card.red { border-color: #fecaca; }
|
||||
.pr-mode-card.red:hover { border-color: #fca5a5; }
|
||||
.pr-mode-card.cyan { border-color: #a5f3fc; }
|
||||
.pr-mode-card.cyan:hover { border-color: #67e8f9; }
|
||||
.pr-mode-card.lime { border-color: #d9f99d; }
|
||||
.pr-mode-card.lime:hover { border-color: #bef264; }
|
||||
|
||||
.pr-mode-top {
|
||||
display: flex; align-items: flex-start; justify-content: space-between;
|
||||
}
|
||||
.pr-mode-icon {
|
||||
width: 44px; height: 44px; border-radius: 14px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.pr-mode-icon.red { background: linear-gradient(135deg, #f87171, #ef4444); box-shadow: 0 4px 0 #b91c1c44; }
|
||||
.pr-mode-icon.cyan { background: linear-gradient(135deg, #22d3ee, #06b6d4); box-shadow: 0 4px 0 #0e7490aa; }
|
||||
.pr-mode-icon.lime { background: linear-gradient(135deg, #a3e635, #84cc16); box-shadow: 0 4px 0 #4d7c0f44; }
|
||||
|
||||
.pr-mode-badge {
|
||||
width: 36px; height: 36px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.pr-mode-badge.red { background: #fff5f5; }
|
||||
.pr-mode-badge.cyan { background: #ecfeff; }
|
||||
.pr-mode-badge.lime { background: #f7ffe4; }
|
||||
|
||||
.pr-mode-title {
|
||||
font-size: 1rem; font-weight: 900; color: #1e1b4b;
|
||||
}
|
||||
.pr-mode-desc {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.78rem; font-weight: 600; color: #9ca3af;
|
||||
}
|
||||
.pr-mode-arrow {
|
||||
font-size: 0.75rem; font-weight: 800; margin-top: auto;
|
||||
display: flex; align-items: center; gap: 0.25rem;
|
||||
transition: gap 0.2s ease;
|
||||
}
|
||||
.pr-mode-card:hover .pr-mode-arrow { gap: 0.5rem; }
|
||||
.pr-mode-arrow.red { color: #ef4444; }
|
||||
.pr-mode-arrow.cyan { color: #06b6d4; }
|
||||
.pr-mode-arrow.lime { color: #84cc16; }
|
||||
`;
|
||||
|
||||
const MODE_CARDS = [
|
||||
{
|
||||
color: "red",
|
||||
icon: <Target size={20} color="white" />,
|
||||
badge: <Loader2 size={22} color="#ef4444" />,
|
||||
title: "Targeted Practice",
|
||||
desc: "Focus on your weak spots and improve fast",
|
||||
route: "/student/practice/targeted-practice",
|
||||
arrow: "Practice →",
|
||||
},
|
||||
{
|
||||
color: "cyan",
|
||||
icon: <Zap size={20} color="white" />,
|
||||
badge: <Clock size={22} color="#06b6d4" />,
|
||||
title: "Drills",
|
||||
desc: "Train speed and accuracy under pressure",
|
||||
route: "/student/practice/drills",
|
||||
arrow: "Drill →",
|
||||
},
|
||||
{
|
||||
color: "lime",
|
||||
icon: <Trophy size={20} color="white" />,
|
||||
badge: <BookOpen size={22} color="#84cc16" />,
|
||||
title: "Hard Modules",
|
||||
desc: "Push yourself with the toughest questions",
|
||||
route: "/student/practice/hard-test-modules",
|
||||
arrow: "Challenge →",
|
||||
},
|
||||
] as const;
|
||||
|
||||
export const Practice = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const userXp = useExamConfigStore.getState().userXp;
|
||||
return (
|
||||
<div className="px-8 py-8 space-y-4">
|
||||
<header className="flex justify-between items-center ">
|
||||
<div className="w-fit bg-linear-to-br from-indigo-500 to-indigo-600 p-3 rounded-2xl">
|
||||
<BookOpen size={20} color="white" />
|
||||
</div>
|
||||
<div className="bg-indigo-100 rounded-full w-fit py-2 px-4 flex items-center gap-2">
|
||||
<div className="h-2 w-2 bg-linear-to-br from-indigo-400 to-indigo-500 rounded-full"></div>
|
||||
<span className="font-satoshi-bold text-md">{userXp}</span>
|
||||
</div>
|
||||
</header>
|
||||
<section>
|
||||
<Card
|
||||
className="relative bg-linear-to-br from-indigo-500 to-indigo-600 rounded-4xl
|
||||
flex-row"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<CardHeader className="w-[65%] md:w-full">
|
||||
<CardTitle className="font-satoshi-bold tracking-tight text-3xl text-white">
|
||||
See where you stand
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="w-2/3 md:w-full">
|
||||
<p className="font-satoshi text-white">
|
||||
Test your knowledge with an adaptive practice test.
|
||||
</p>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button className="bg-gray-50 drop-shadow-xl p-6 text-md font-satoshi text-black rounded-full">
|
||||
Take a practice test
|
||||
</Button>
|
||||
</CardFooter>
|
||||
return (
|
||||
<div className="pr-screen">
|
||||
<style>{STYLES}</style>
|
||||
|
||||
{/* Blobs */}
|
||||
<div className="pr-blob pr-blob-1" />
|
||||
<div className="pr-blob pr-blob-2" />
|
||||
<div className="pr-blob pr-blob-3" />
|
||||
<div className="pr-blob pr-blob-4" />
|
||||
|
||||
{/* Dots */}
|
||||
{DOTS.map((d, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="pr-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="pr-inner">
|
||||
{/* ── Header ── */}
|
||||
<header className="pr-header">
|
||||
<div className="pr-logo-btn">
|
||||
<BookOpen size={20} color="white" />
|
||||
</div>
|
||||
<div className="overflow-hidden opacity-30 -rotate-45 absolute -top-10 -right-20">
|
||||
<DraftingCompass size={300} color="white" />
|
||||
<div className="pr-xp-chip">
|
||||
<span>⚡ {userXp} XP</span>
|
||||
</div>
|
||||
</Card>
|
||||
</section>
|
||||
<section className="flex flex-col gap-6">
|
||||
<h1 className="font-satoshi-black text-2xl">Practice your way</h1>
|
||||
<div className="md:grid md:grid-cols-2 md:gap-6 space-y-6 md:space-y-0">
|
||||
<Card
|
||||
onClick={() => navigate("/student/practice/targeted-practice")}
|
||||
className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1"
|
||||
>
|
||||
<CardHeader className="space-y-3">
|
||||
<div className="w-fit bg-linear-to-br from-red-400 to-red-500 p-3 rounded-2xl">
|
||||
<Target size={20} color="white" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<CardTitle className="font-satoshi">
|
||||
Targeted Practice
|
||||
</CardTitle>
|
||||
<CardDescription className="font-satoshi">
|
||||
Focus on what matters
|
||||
</CardDescription>
|
||||
</div>
|
||||
<CardAction>
|
||||
<div className="w-fit bg-red-100 p-2 rounded-full">
|
||||
<Loader2 size={30} color="#fa6969" />
|
||||
</div>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card
|
||||
onClick={() => navigate("/student/practice/drills")}
|
||||
className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1"
|
||||
>
|
||||
<CardHeader className="space-y-3">
|
||||
<div className="w-fit bg-linear-to-br from-cyan-400 to-cyan-500 p-3 rounded-2xl">
|
||||
<Zap size={20} color="white" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<CardTitle className="font-satoshi">Drills</CardTitle>
|
||||
<CardDescription className="font-satoshi">
|
||||
Train speed and accuracy
|
||||
</CardDescription>
|
||||
</div>
|
||||
<CardAction>
|
||||
<div className="w-fit bg-cyan-100 p-3 rounded-full">
|
||||
<Clock size={26} color="oklch(71.5% 0.143 215.221)" />
|
||||
</div>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card
|
||||
onClick={() => navigate("/student/practice/hard-test-modules")}
|
||||
className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1"
|
||||
>
|
||||
<CardHeader className="space-y-3">
|
||||
<div className="w-fit bg-linear-to-br from-lime-400 to-lime-500 p-3 rounded-2xl">
|
||||
<Trophy size={20} color="white" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<CardTitle className="font-satoshi">
|
||||
Hard Test Modules
|
||||
</CardTitle>
|
||||
<CardDescription className="font-satoshi">
|
||||
Focus on what matters
|
||||
</CardDescription>
|
||||
</div>
|
||||
<CardAction>
|
||||
<div className="w-fit bg-lime-100 p-3 rounded-full">
|
||||
<BookOpen size={26} color="oklch(76.8% 0.233 130.85)" />
|
||||
</div>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</header>
|
||||
|
||||
{/* ── Hero banner ── */}
|
||||
<div className="pr-hero pr-anim pr-anim-1">
|
||||
<div className="pr-hero-icon-bg">
|
||||
<DraftingCompass size={240} color="white" />
|
||||
</div>
|
||||
<p className="pr-hero-eyebrow">🎯 Full Practice Test</p>
|
||||
<h2 className="pr-hero-title">See where you stand</h2>
|
||||
<p className="pr-hero-sub">
|
||||
Take a full adaptive test and benchmark your SAT readiness.
|
||||
</p>
|
||||
<button className="pr-hero-btn">Take a practice test →</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Practice modes ── */}
|
||||
<section className="pr-anim pr-anim-2">
|
||||
<p className="pr-section-title" style={{ marginBottom: "0.85rem" }}>
|
||||
Practice your way
|
||||
</p>
|
||||
<div className="pr-grid">
|
||||
{MODE_CARDS.map((card) => (
|
||||
<div
|
||||
key={card.route}
|
||||
className={`pr-mode-card ${card.color}`}
|
||||
onClick={() => navigate(card.route)}
|
||||
>
|
||||
<div className="pr-mode-top">
|
||||
<div className={`pr-mode-icon ${card.color}`}>
|
||||
{card.icon}
|
||||
</div>
|
||||
<div className={`pr-mode-badge ${card.color}`}>
|
||||
{card.badge}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="pr-mode-title">{card.title}</p>
|
||||
<p className="pr-mode-desc">{card.desc}</p>
|
||||
</div>
|
||||
<p className={`pr-mode-arrow ${card.color}`}>{card.arrow}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +1,185 @@
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { ChevronRight, LogOut, User } from "lucide-react";
|
||||
import { useAuthStore } from "../../stores/authStore";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
AvatarImage,
|
||||
} from "../../components/ui/avatar";
|
||||
|
||||
const DOTS = [
|
||||
{ size: 10, color: "#f97316", top: "6%", left: "4%", delay: "0s" },
|
||||
{ size: 7, color: "#a855f7", top: "28%", left: "2%", delay: "1.2s" },
|
||||
{ size: 9, color: "#22c55e", top: "62%", left: "3%", delay: "0.6s" },
|
||||
{ size: 12, color: "#3b82f6", top: "10%", right: "4%", delay: "1.8s" },
|
||||
{ size: 7, color: "#f43f5e", top: "48%", right: "2%", delay: "0.9s" },
|
||||
{ size: 9, color: "#eab308", top: "76%", 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');
|
||||
|
||||
.pf-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.pf-blob { position: fixed; pointer-events: none; z-index: 0; filter: blur(48px); opacity: 0.35; }
|
||||
.pf-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:pfWobble1 14s ease-in-out infinite; }
|
||||
.pf-blob-2 { width:190px;height:190px;background:#a5f3c0;bottom:-50px;left:6%;border-radius:40% 60% 30% 70%/60% 40% 60% 40%;animation:pfWobble2 16s ease-in-out infinite; }
|
||||
.pf-blob-3 { width:210px;height:210px;background:#fbcfe8;top:15%;right:-60px;border-radius:70% 30% 50% 50%/40% 60% 40% 60%;animation:pfWobble1 18s ease-in-out infinite reverse; }
|
||||
.pf-blob-4 { width:150px;height:150px;background:#bfdbfe;bottom:12%;right:2%;border-radius:50% 50% 30% 70%/60% 40% 60% 40%;animation:pfWobble2 12s ease-in-out infinite; }
|
||||
|
||||
@keyframes pfWobble1 {
|
||||
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 pfWobble2 {
|
||||
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);}
|
||||
}
|
||||
|
||||
.pf-dot { position:fixed;border-radius:50%;pointer-events:none;z-index:0;opacity:0.3;animation:pfFloat 7s ease-in-out infinite; }
|
||||
@keyframes pfFloat {
|
||||
0%,100%{transform:translateY(0) rotate(0deg);}
|
||||
50%{transform:translateY(-12px) rotate(180deg);}
|
||||
}
|
||||
|
||||
.pf-inner {
|
||||
position: relative; z-index: 1;
|
||||
max-width: 520px; margin: 0 auto;
|
||||
padding: 2rem 1.25rem 4rem;
|
||||
display: flex; flex-direction: column; gap: 1.5rem;
|
||||
}
|
||||
|
||||
@keyframes pfPopIn {
|
||||
from { opacity:0; transform: scale(0.92) translateY(12px); }
|
||||
to { opacity:1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
.pf-anim { animation: pfPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
|
||||
.pf-anim-1 { animation-delay: 0.05s; }
|
||||
.pf-anim-2 { animation-delay: 0.1s; }
|
||||
.pf-anim-3 { animation-delay: 0.15s; }
|
||||
.pf-anim-4 { animation-delay: 0.2s; }
|
||||
.pf-anim-5 { animation-delay: 0.25s; }
|
||||
|
||||
/* Page title */
|
||||
.pf-page-title {
|
||||
font-size: 1.8rem; font-weight: 900; color: #1e1b4b;
|
||||
letter-spacing: -0.02em; text-align: center;
|
||||
animation: pfPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||
}
|
||||
|
||||
/* Avatar hero card */
|
||||
.pf-hero {
|
||||
background: white; border: 2.5px solid #f3f4f6; border-radius: 24px;
|
||||
padding: 1.5rem; box-shadow: 0 6px 20px rgba(0,0,0,0.05);
|
||||
display: flex; align-items: center; gap: 1rem;
|
||||
}
|
||||
.pf-avatar-wrap {
|
||||
width: 64px; height: 64px; flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #a855f7, #7c3aed);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 4px 0 #5b21b655;
|
||||
}
|
||||
.pf-user-name {
|
||||
font-size: 1.15rem; font-weight: 900; color: #1e1b4b; line-height: 1.2;
|
||||
}
|
||||
.pf-user-email {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.8rem; font-weight: 600; color: #9ca3af; margin-top: 0.2rem;
|
||||
}
|
||||
.pf-user-badge {
|
||||
display: inline-flex; align-items: center; gap: 0.3rem;
|
||||
background: #f3e8ff; border: 2px solid #e9d5ff; border-radius: 100px;
|
||||
padding: 0.2rem 0.6rem; margin-top: 0.35rem;
|
||||
font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em;
|
||||
text-transform: uppercase; color: #9333ea;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
/* Section */
|
||||
.pf-section { display: flex; flex-direction: column; gap: 0.5rem; }
|
||||
.pf-section-label {
|
||||
font-size: 0.62rem; font-weight: 800; letter-spacing: 0.18em;
|
||||
text-transform: uppercase; color: #9ca3af; padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
/* Settings group card */
|
||||
.pf-group {
|
||||
background: white; border: 2.5px solid #f3f4f6; border-radius: 20px;
|
||||
overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,0.04);
|
||||
}
|
||||
.pf-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0.9rem 1.1rem; gap: 0.75rem; cursor: pointer;
|
||||
background: white; border: none; width: 100%; text-align: left;
|
||||
transition: background 0.15s ease;
|
||||
border-bottom: 2px solid #f9fafb;
|
||||
}
|
||||
.pf-row:last-child { border-bottom: none; }
|
||||
.pf-row:hover { background: #fafaf9; }
|
||||
.pf-row:active { background: #f5f3ef; }
|
||||
|
||||
.pf-row-left { display: flex; align-items: center; gap: 0.75rem; }
|
||||
.pf-row-icon {
|
||||
width: 34px; height: 34px; border-radius: 10px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.pf-row-label {
|
||||
font-size: 0.9rem; font-weight: 800; color: #1e1b4b;
|
||||
}
|
||||
.pf-row-sub {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.72rem; font-weight: 600; color: #9ca3af;
|
||||
}
|
||||
.pf-chevron { color: #d1d5db; flex-shrink: 0; }
|
||||
|
||||
/* Sign out button */
|
||||
.pf-signout-btn {
|
||||
width: 100%;
|
||||
background: #f97316; color: white; border: none;
|
||||
border-radius: 100px; padding: 1rem;
|
||||
font-family: 'Nunito', sans-serif; font-size: 0.95rem; font-weight: 800;
|
||||
cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
|
||||
box-shadow: 0 6px 0 #c2560e, 0 8px 20px rgba(249,115,22,0.25);
|
||||
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
.pf-signout-btn:hover { transform:translateY(-2px); box-shadow:0 8px 0 #c2560e,0 12px 24px rgba(249,115,22,0.3); }
|
||||
.pf-signout-btn:active { transform:translateY(3px); box-shadow:0 3px 0 #c2560e; }
|
||||
`;
|
||||
|
||||
type RowDef = {
|
||||
icon: string;
|
||||
iconBg: string;
|
||||
label: string;
|
||||
sub?: string;
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
const SettingsGroup = ({ rows }: { rows: RowDef[] }) => (
|
||||
<div className="pf-group">
|
||||
{rows.map((row, i) => (
|
||||
<button key={i} className="pf-row" onClick={row.onClick}>
|
||||
<div className="pf-row-left">
|
||||
<div className="pf-row-icon" style={{ background: row.iconBg }}>
|
||||
<span style={{ fontSize: "1rem" }}>{row.icon}</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="pf-row-label">{row.label}</p>
|
||||
{row.sub && <p className="pf-row-sub">{row.sub}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight size={17} className="pf-chevron" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Profile = () => {
|
||||
const user = useAuthStore((state) => state.user);
|
||||
@ -11,62 +190,142 @@ export const Profile = () => {
|
||||
navigate("/login");
|
||||
};
|
||||
|
||||
const ACCOUNT_ROWS: RowDef[] = [
|
||||
{
|
||||
icon: "👤",
|
||||
iconBg: "#f3e8ff",
|
||||
label: "Account details",
|
||||
sub: "Name, email, password",
|
||||
},
|
||||
{
|
||||
icon: "🎟️",
|
||||
iconBg: "#fff7ed",
|
||||
label: "Redeem a code",
|
||||
sub: "Enter your access code",
|
||||
},
|
||||
{
|
||||
icon: "💳",
|
||||
iconBg: "#f0fdf4",
|
||||
label: "Manage subscription",
|
||||
sub: "Plans & billing",
|
||||
},
|
||||
{
|
||||
icon: "⚙️",
|
||||
iconBg: "#f8fafc",
|
||||
label: "Preferences",
|
||||
sub: "Notifications & display",
|
||||
},
|
||||
];
|
||||
|
||||
const LEGAL_ROWS: RowDef[] = [
|
||||
{ icon: "📄", iconBg: "#eff6ff", label: "Terms of Use" },
|
||||
{ icon: "🔒", iconBg: "#fff1f2", label: "Privacy Policy" },
|
||||
];
|
||||
|
||||
const SUPPORT_ROWS: RowDef[] = [
|
||||
{
|
||||
icon: "💬",
|
||||
iconBg: "#f0fdf4",
|
||||
label: "Contact Us",
|
||||
sub: "We usually respond within 24h",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<main className="min-h-screen space-y-6 mx-auto p-8">
|
||||
<h1 className="text-lg font-satoshi-bold text-center">Profile</h1>
|
||||
<section>
|
||||
<h3 className="text-2xl font-satoshi-bold">{user?.name}</h3>
|
||||
<p className="text-lg font-satoshi">{user?.email}</p>
|
||||
</section>
|
||||
<section className="space-y-4">
|
||||
<h5 className="text-[12px] font-satoshi-bold text-gray-400">ACCOUNT</h5>
|
||||
<div className="border rounded-4xl">
|
||||
<button className="w-full rounded-t-4xl border-b bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
|
||||
<span className="font-satoshi text-black">Account details</span>
|
||||
<ChevronRight color="gray" size={20} />
|
||||
</button>
|
||||
<button className="w-full border-b bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
|
||||
<span className="font-satoshi text-black">Redeem a code</span>
|
||||
<ChevronRight color="gray" size={20} />
|
||||
</button>
|
||||
<button className="w-full border-b bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
|
||||
<span className="font-satoshi text-black">Manage subscription</span>
|
||||
<ChevronRight color="gray" size={20} />
|
||||
</button>
|
||||
<button className="w-full rounded-b-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
|
||||
<span className="font-satoshi text-black">Preferences</span>
|
||||
<ChevronRight color="gray" size={20} />
|
||||
</button>
|
||||
<div className="pf-screen">
|
||||
<style>{STYLES}</style>
|
||||
|
||||
{/* Blobs */}
|
||||
<div className="pf-blob pf-blob-1" />
|
||||
<div className="pf-blob pf-blob-2" />
|
||||
<div className="pf-blob pf-blob-3" />
|
||||
<div className="pf-blob pf-blob-4" />
|
||||
|
||||
{/* Dots */}
|
||||
{DOTS.map((d, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="pf-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="pf-inner">
|
||||
<h1 className="pf-page-title">Profile</h1>
|
||||
|
||||
{/* Hero card */}
|
||||
<div className="pf-hero pf-anim pf-anim-1">
|
||||
<Avatar style={{ width: 64, height: 64, flexShrink: 0 }}>
|
||||
<AvatarImage src={user?.avatar_url} />
|
||||
<AvatarFallback
|
||||
style={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: "50%",
|
||||
background: "linear-gradient(135deg,#a855f7,#7c3aed)",
|
||||
color: "white",
|
||||
fontWeight: 900,
|
||||
fontSize: "1.5rem",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
boxShadow: "0 4px 0 #5b21b655",
|
||||
}}
|
||||
>
|
||||
{user?.name?.slice(0, 1).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="pf-user-name">{user?.name}</p>
|
||||
<p className="pf-user-email">{user?.email}</p>
|
||||
<div className="pf-user-badge">
|
||||
<User size={9} />
|
||||
{user?.role === "STUDENT"
|
||||
? "Student"
|
||||
: user?.role === "ADMIN"
|
||||
? "Admin"
|
||||
: "Teacher"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="space-y-4">
|
||||
<h5 className="text-[12px] font-satoshi-bold text-gray-400">LEGAL</h5>
|
||||
<div className="border rounded-4xl">
|
||||
<button className="w-full border-b rounded-t-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
|
||||
<span className="font-satoshi text-black">Terms of Use</span>
|
||||
<ChevronRight color="gray" size={20} />
|
||||
</button>
|
||||
<button className="w-full border-b rounded-b-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
|
||||
<span className="font-satoshi text-black">Privacy Policy</span>
|
||||
<ChevronRight color="gray" size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<section className="space-y-4">
|
||||
<h5 className="text-[12px] font-satoshi-bold text-gray-400">SUPPORT</h5>
|
||||
<div className="border rounded-4xl">
|
||||
<button className="w-full rounded-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
|
||||
<span className="font-satoshi text-black">Contact Us</span>
|
||||
<ChevronRight color="gray" size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-full border rounded-4xl bg-linear-to-br from-indigo-400 to-indigo-600 py-4 px-4 flex justify-center items-center active:bg-purple-600 font-satoshi-medium text-white"
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
</main>
|
||||
|
||||
{/* Account */}
|
||||
<section className="pf-section pf-anim pf-anim-2">
|
||||
<p className="pf-section-label">Account</p>
|
||||
<SettingsGroup rows={ACCOUNT_ROWS} />
|
||||
</section>
|
||||
|
||||
{/* Legal */}
|
||||
<section className="pf-section pf-anim pf-anim-3">
|
||||
<p className="pf-section-label">Legal</p>
|
||||
<SettingsGroup rows={LEGAL_ROWS} />
|
||||
</section>
|
||||
|
||||
{/* Support */}
|
||||
<section className="pf-section pf-anim pf-anim-4">
|
||||
<p className="pf-section-label">Support</p>
|
||||
<SettingsGroup rows={SUPPORT_ROWS} />
|
||||
</section>
|
||||
|
||||
{/* Sign out */}
|
||||
<button
|
||||
className="pf-signout-btn pf-anim pf-anim-5"
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<LogOut size={18} /> Sign Out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -2,23 +2,18 @@ import { useAuthStore } from "../../stores/authStore";
|
||||
import firstTrophy from "../../assets/icons/first_trophy.png";
|
||||
import secondTrophy from "../../assets/icons/second_trophy.png";
|
||||
import thirdTrophy from "../../assets/icons/third_trophy.png";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
// import {
|
||||
// Card,
|
||||
// CardHeader,
|
||||
// CardContent,
|
||||
// CardTitle,
|
||||
// CardDescription,
|
||||
// } from "../../components/ui/card";
|
||||
import { formatTimeFilter, getRandomColor } from "../../lib/utils";
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "../../components/ui/tabs";
|
||||
|
||||
import { Button } from "../../components/ui//button";
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
AvatarImage,
|
||||
} from "../../components/ui/avatar";
|
||||
import { Flame, LucideBadgeQuestionMark, Zap, ChevronDown } from "lucide-react";
|
||||
import type { Leaderboard } from "../../types/leaderboard";
|
||||
import { api } from "../../utils/api";
|
||||
import { LeaderboardRowSkeleton } from "../../components/LeaderboardSkeleton";
|
||||
import { useExamConfigStore } from "../../stores/useExamConfigStore";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@ -26,118 +21,456 @@ import {
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "../../components/ui/dropdown-menu";
|
||||
import { formatTimeFilter, getRandomColor } from "../../lib/utils";
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
AvatarImage,
|
||||
} from "../../components/ui/avatar";
|
||||
import { Flame, LucideBadgeQuestionMark, Zap } from "lucide-react";
|
||||
import type { Leaderboard } from "../../types/leaderboard";
|
||||
import { api } from "../../utils/api";
|
||||
import { Card, CardContent } from "../../components/ui/card";
|
||||
import { LeaderboardRowSkeleton } from "../../components/LeaderboardSkeleton";
|
||||
import { useExamConfigStore } from "../../stores/useExamConfigStore";
|
||||
|
||||
const DOTS = [
|
||||
{ size: 10, color: "#f97316", top: "6%", left: "4%", delay: "0s" },
|
||||
{ size: 7, color: "#a855f7", top: "28%", left: "2%", delay: "1.2s" },
|
||||
{ size: 9, color: "#22c55e", top: "58%", left: "3%", delay: "0.6s" },
|
||||
{ size: 12, color: "#3b82f6", top: "10%", right: "4%", delay: "1.8s" },
|
||||
{ size: 7, color: "#f43f5e", top: "42%", right: "2%", delay: "0.9s" },
|
||||
{ size: 9, color: "#eab308", top: "72%", 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');
|
||||
|
||||
.rw-screen {
|
||||
height: 100vh;
|
||||
background: #fffbf4;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.rw-blob { position: fixed; pointer-events: none; z-index: 0; filter: blur(48px); opacity: 0.35; }
|
||||
.rw-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:rwWobble1 14s ease-in-out infinite; }
|
||||
.rw-blob-2 { width:190px;height:190px;background:#a5f3c0;bottom:-50px;left:6%;border-radius:40% 60% 30% 70%/60% 40% 60% 40%;animation:rwWobble2 16s ease-in-out infinite; }
|
||||
.rw-blob-3 { width:210px;height:210px;background:#fbcfe8;top:15%;right:-60px;border-radius:70% 30% 50% 50%/40% 60% 40% 60%;animation:rwWobble1 18s ease-in-out infinite reverse; }
|
||||
.rw-blob-4 { width:150px;height:150px;background:#bfdbfe;bottom:12%;right:2%;border-radius:50% 50% 30% 70%/60% 40% 60% 40%;animation:rwWobble2 12s ease-in-out infinite; }
|
||||
|
||||
@keyframes rwWobble1 {
|
||||
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 rwWobble2 {
|
||||
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);}
|
||||
}
|
||||
|
||||
.rw-dot { position:fixed;border-radius:50%;pointer-events:none;z-index:0;opacity:0.3;animation:rwFloat 7s ease-in-out infinite; }
|
||||
@keyframes rwFloat {
|
||||
0%,100%{transform:translateY(0) rotate(0deg);}
|
||||
50%{transform:translateY(-12px) rotate(180deg);}
|
||||
}
|
||||
|
||||
/* Sticky top wrapper */
|
||||
.rw-sticky-top {
|
||||
position: relative; z-index: 2;
|
||||
background: #fffbf4;
|
||||
flex-shrink: 0;
|
||||
padding: 2rem 1.25rem 0;
|
||||
}
|
||||
.rw-sticky-top-inner {
|
||||
max-width: 580px; margin: 0 auto;
|
||||
display: flex; flex-direction: column; gap: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 2px solid #f3f4f6;
|
||||
}
|
||||
|
||||
/* Scrollable list area */
|
||||
.rw-scroll-area {
|
||||
position: relative; z-index: 1;
|
||||
flex: 1; overflow-y: auto;
|
||||
padding: 1rem 1.25rem 10rem;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.rw-scroll-inner {
|
||||
max-width: 580px; margin: 0 auto;
|
||||
}
|
||||
|
||||
@keyframes rwPopIn {
|
||||
from { opacity:0; transform: scale(0.92) translateY(12px); }
|
||||
to { opacity:1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
.rw-anim { animation: rwPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
|
||||
.rw-anim-1 { animation-delay: 0.05s; }
|
||||
.rw-anim-2 { animation-delay: 0.1s; }
|
||||
|
||||
/* Header */
|
||||
.rw-header { display:flex;flex-direction:column;align-items:center;gap:0.4rem;text-align:center; }
|
||||
.rw-title { font-size:1.9rem;font-weight:900;color:#1e1b4b;letter-spacing:-0.02em; }
|
||||
.rw-rank-text { font-family:'Nunito Sans',sans-serif;font-size:0.9rem;font-weight:600;color:#9ca3af; }
|
||||
.rw-rank-text span { color:#a855f7;font-weight:800; }
|
||||
|
||||
/* Controls row */
|
||||
.rw-controls {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Tab pills */
|
||||
.rw-tabs { display:flex;gap:0.4rem; }
|
||||
.rw-tab-btn {
|
||||
padding: 0.45rem 0.9rem; border-radius: 100px; border: none; cursor: pointer;
|
||||
font-family: 'Nunito', sans-serif; font-size: 0.78rem; font-weight: 800;
|
||||
display: flex; align-items: center; gap: 0.35rem;
|
||||
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);
|
||||
}
|
||||
.rw-tab-btn.active { background:#1e1b4b; border-color:#1e1b4b; color:white; box-shadow:0 4px 0 #1e1b4b55; }
|
||||
|
||||
/* Time filter button */
|
||||
.rw-filter-btn {
|
||||
display: flex; align-items: center; gap: 0.35rem;
|
||||
padding: 0.45rem 0.9rem; border-radius: 100px; cursor: pointer;
|
||||
font-family: 'Nunito', sans-serif; font-size: 0.78rem; font-weight: 800;
|
||||
background: white; border: 2.5px solid #f3f4f6; color: #6b7280;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.rw-filter-btn:hover { border-color: #c4b5fd; color: #7c3aed; }
|
||||
|
||||
/* Leaderboard list */
|
||||
.rw-list { display:flex;flex-direction:column;gap:0.6rem; }
|
||||
|
||||
/* Each row */
|
||||
.rw-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
background: white; border: 2.5px solid #f3f4f6; border-radius: 18px;
|
||||
padding: 0.7rem 1rem;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.04);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.rw-row:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,0.07); }
|
||||
.rw-row.top-1 { border-color:#fde68a; background:linear-gradient(135deg,#fffbeb,white); }
|
||||
.rw-row.top-2 { border-color:#e2e8f0; background:linear-gradient(135deg,#f8fafc,white); }
|
||||
.rw-row.top-3 { border-color:#fecba8; background:linear-gradient(135deg,#fff7ed,white); }
|
||||
|
||||
.rw-row-left { display:flex;align-items:center;gap:0.75rem; }
|
||||
.rw-rank-cell { width:36px;display:flex;align-items:center;justify-content:center; }
|
||||
.rw-rank-num { font-size:0.9rem;font-weight:900;color:#9ca3af; }
|
||||
.rw-user-name { font-size:0.88rem;font-weight:800;color:#1e1b4b; }
|
||||
.rw-row-right { display:flex;align-items:center;gap:0.35rem; }
|
||||
.rw-score { font-size:0.9rem;font-weight:900;color:#1e1b4b; }
|
||||
|
||||
/* XP chip color variants */
|
||||
.rw-xp-chip { color:#84cc16; }
|
||||
.rw-q-chip { color:#0891b2; }
|
||||
.rw-fire-chip { color:#ef4444; }
|
||||
|
||||
/* Skeleton */
|
||||
.rw-skeleton { display:flex;flex-direction:column;gap:0.6rem; }
|
||||
|
||||
/* ── Floating island you-pill ── */
|
||||
.rw-island-wrap {
|
||||
position: fixed;
|
||||
bottom: calc(1.25rem + 80px + env(safe-area-inset-bottom));
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
max-width: 480px
|
||||
}
|
||||
|
||||
/* Expanded info card — slides up */
|
||||
.rw-island-card {
|
||||
background: rgba(255,251,244,0.92);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1.5px solid rgba(255,255,255,0.8);
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
|
||||
padding: 1rem 1.25rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 0.5rem;
|
||||
min-width: 350px;
|
||||
|
||||
/* Hidden by default */
|
||||
opacity: 0;
|
||||
transform: translateY(12px) scale(0.95);
|
||||
pointer-events: none;
|
||||
transition:
|
||||
opacity 0.3s cubic-bezier(0.34,1.56,0.64,1),
|
||||
transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
|
||||
}
|
||||
.rw-island-card.open {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.rw-island-stat {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
|
||||
padding: 0.5rem 0.4rem;
|
||||
background: white; border: 2px solid #f3f4f6; border-radius: 14px;
|
||||
}
|
||||
.rw-island-stat-val {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 1rem; font-weight: 900; color: #1e1b4b; line-height: 1;
|
||||
}
|
||||
.rw-island-stat-label {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em;
|
||||
text-transform: uppercase; color: #9ca3af;
|
||||
}
|
||||
.rw-island-stat.xp { border-color: #d9f99d; }
|
||||
.rw-island-stat.xp .rw-island-stat-val { color: #16a34a; }
|
||||
.rw-island-stat.rank { border-color: #e9d5ff; }
|
||||
.rw-island-stat.rank .rw-island-stat-val { color: #9333ea; }
|
||||
.rw-island-stat.lvl { border-color: #bfdbfe; }
|
||||
.rw-island-stat.lvl .rw-island-stat-val { color: #2563eb; }
|
||||
|
||||
/* The pill button itself */
|
||||
.rw-island-pill {
|
||||
|
||||
display: flex; align-items: center; gap: 0.65rem;
|
||||
background: linear-gradient(135deg, #7c3aed, #a855f7);
|
||||
border: 1.5px solid rgba(255,255,255,0.25);
|
||||
border-radius: 100px;
|
||||
padding: 0.45rem 1rem 0.45rem 0.45rem;
|
||||
box-shadow:
|
||||
0 6px 20px rgba(124,58,237,0.35),
|
||||
0 2px 6px rgba(124,58,237,0.2),
|
||||
inset 0 1px 0 rgba(255,255,255,0.2);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease;
|
||||
}
|
||||
.rw-island-pill:active { transform: scale(0.93); }
|
||||
.rw-island-pill.open {
|
||||
box-shadow:
|
||||
0 10px 28px rgba(124,58,237,0.4),
|
||||
0 4px 10px rgba(124,58,237,0.25),
|
||||
inset 0 1px 0 rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.rw-island-avatar {
|
||||
width: 38px; height: 38px; border-radius: 50%;
|
||||
background: rgba(255,255,255,0.25);
|
||||
border: 2px solid rgba(255,255,255,0.4);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 0.9rem; font-weight: 900; color: white;
|
||||
overflow: hidden; flex-shrink: 0;
|
||||
}
|
||||
.rw-island-avatar img { width:100%;height:100%;object-fit:cover; }
|
||||
|
||||
.rw-island-info { display:flex;flex-direction:column;gap:1px; }
|
||||
.rw-island-you {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 0.58rem; font-weight: 800; letter-spacing:0.12em;
|
||||
text-transform: uppercase; color: rgba(255,255,255,0.6);
|
||||
line-height: 1;
|
||||
}
|
||||
.rw-island-name {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 0.88rem; font-weight: 900; color: white;
|
||||
line-height: 1.1; white-space: nowrap;
|
||||
}
|
||||
|
||||
.rw-island-metric {
|
||||
display: flex; align-items: center; gap: 0.25rem;
|
||||
padding-left: 0.5rem;
|
||||
border-left: 1.5px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
.rw-island-metric-val {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 0.95rem; font-weight: 900; color: white;
|
||||
}
|
||||
|
||||
.rw-island-chevron {
|
||||
width: 22px; height: 22px; border-radius: 50%;
|
||||
background: rgba(255,255,255,0.15);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
|
||||
}
|
||||
.rw-island-pill.open .rw-island-chevron { transform: rotate(180deg); }
|
||||
|
||||
/* Shimmer skeleton line */
|
||||
.rw-skel-row {
|
||||
display:flex;align-items:center;justify-content:space-between;
|
||||
background:white;border:2.5px solid #f3f4f6;border-radius:18px;
|
||||
padding:0.7rem 1rem;
|
||||
}
|
||||
.rw-skel-left { display:flex;align-items:center;gap:0.75rem; }
|
||||
.rw-skel-circle { border-radius:50%;background:#f3f4f6;animation:rwShimmer 1.5s ease-in-out infinite; }
|
||||
.rw-skel-line { border-radius:6px;background:#f3f4f6;animation:rwShimmer 1.5s ease-in-out infinite; }
|
||||
@keyframes rwShimmer {
|
||||
0%,100%{opacity:1;} 50%{opacity:0.4;}
|
||||
}
|
||||
`;
|
||||
|
||||
const TABS = [
|
||||
{ id: "xp", label: "XP", icon: <Zap size={13} /> },
|
||||
{
|
||||
id: "questions",
|
||||
label: "Questions",
|
||||
icon: <LucideBadgeQuestionMark size={13} />,
|
||||
},
|
||||
{ id: "streak", label: "Streak", icon: <Flame size={13} /> },
|
||||
] as const;
|
||||
|
||||
type TabId = (typeof TABS)[number]["id"];
|
||||
|
||||
const trophies = [firstTrophy, secondTrophy, thirdTrophy];
|
||||
|
||||
const SkeletonRows = () => (
|
||||
<div className="rw-skeleton">
|
||||
{Array.from({ length: 7 }).map((_, i) => (
|
||||
<div key={i} className="rw-skel-row">
|
||||
<div className="rw-skel-left">
|
||||
<div className="rw-skel-circle" style={{ width: 36, height: 36 }} />
|
||||
<div className="rw-skel-circle" style={{ width: 40, height: 40 }} />
|
||||
<div
|
||||
className="rw-skel-line"
|
||||
style={{ width: 100 + i * 10, height: 12 }}
|
||||
/>
|
||||
</div>
|
||||
<div className="rw-skel-line" style={{ width: 40, height: 12 }} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Rewards = () => {
|
||||
const user = useAuthStore((state) => state.user);
|
||||
const [time, setTime] = useState("bottom");
|
||||
const [activeTab, setActiveTab] = useState("xp");
|
||||
|
||||
const [activeTab, setActiveTab] = useState<TabId>("xp");
|
||||
const [leaderboard, setLeaderboard] = useState<Leaderboard>();
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [islandOpen, setIslandOpen] = useState(false);
|
||||
const { setUserXp } = useExamConfigStore();
|
||||
|
||||
useEffect(() => {
|
||||
const fetchLeaderboard = async () => {
|
||||
const fetch = async () => {
|
||||
if (!user) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const authStorage = localStorage.getItem("auth-storage");
|
||||
if (!authStorage) return;
|
||||
|
||||
const parsed = JSON.parse(authStorage) as {
|
||||
state?: { token?: string };
|
||||
};
|
||||
|
||||
const token = parsed.state?.token;
|
||||
const {
|
||||
state: { token },
|
||||
} = JSON.parse(authStorage) as { state?: { token?: string } };
|
||||
if (!token) return;
|
||||
|
||||
const response = await api.fetchLeaderboard(token);
|
||||
|
||||
setLeaderboard(response);
|
||||
|
||||
setUserXp(response.user_rank.total_xp);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
setLoading(false);
|
||||
console.error("Error fetching leaderboard: " + error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchLeaderboard();
|
||||
fetch();
|
||||
}, [user]);
|
||||
|
||||
const trophies = [firstTrophy, secondTrophy, thirdTrophy];
|
||||
const isTopThree = (leaderboard?.user_rank?.rank ?? Infinity) <= 3;
|
||||
|
||||
const isTopThree = (leaderboard?.user_rank?.rank ?? Infinity) < 3;
|
||||
const metricValue = (u: (typeof leaderboard.top_users)[0]) =>
|
||||
activeTab === "xp" ? u.total_xp : activeTab === "questions" ? "—" : "—";
|
||||
|
||||
const metricIcon = () =>
|
||||
activeTab === "xp" ? (
|
||||
<Zap size={17} className="rw-xp-chip" />
|
||||
) : activeTab === "questions" ? (
|
||||
<LucideBadgeQuestionMark size={17} className="rw-q-chip" />
|
||||
) : (
|
||||
<Flame size={17} className="rw-fire-chip" />
|
||||
);
|
||||
|
||||
const userMetric =
|
||||
activeTab === "xp"
|
||||
? leaderboard?.user_rank.total_xp
|
||||
: activeTab === "questions"
|
||||
? "23"
|
||||
: "5";
|
||||
|
||||
return (
|
||||
<div className="relative flex flex-col gap-8 items-start mx-auto sm:px-6 lg:px-8 py-8">
|
||||
<header className="flex flex-col items-center h-fit w-full gap-3">
|
||||
<h1 className="font-satoshi-black text-3xl">Leaderboards</h1>
|
||||
{loading ? (
|
||||
<div className="animate-pulse">
|
||||
<div className="h-4 w-60 bg-gray-200 rounded" />
|
||||
</div>
|
||||
) : (
|
||||
<p className="font-satoshi-medium text-md text-gray-500">
|
||||
Don't stop now! You're{" "}
|
||||
<span className="text-indigo-400">
|
||||
#{leaderboard?.user_rank.rank}
|
||||
</span>{" "}
|
||||
in XP.
|
||||
</p>
|
||||
)}
|
||||
</header>
|
||||
<section className="w-full px-7">
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={setActiveTab}
|
||||
defaultValue="xp"
|
||||
className="space-y-6 h-[calc(100vh-250px)] flex flex-col"
|
||||
>
|
||||
<TabsList className="bg-transparent p-0 w-full justify-between shrink-0">
|
||||
<TabsTrigger
|
||||
value="xp"
|
||||
className="font-satoshi-bold px-4 tracking-wide text-md rounded-none border-b-2 data-[state=active]:font-satoshi-medium data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
|
||||
>
|
||||
XP
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="questions"
|
||||
className="font-satoshi-bold px-4 tracking-wide text-md rounded-none border-b-2 data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
|
||||
>
|
||||
Questions
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="streak"
|
||||
className="font-satoshi-bold px-4 tracking-wide text-md rounded-none border-b-2 data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
|
||||
>
|
||||
Streak
|
||||
</TabsTrigger>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild className="rounded-full px-6">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="font-satoshi-bold text-sm text-black"
|
||||
<div className="rw-screen">
|
||||
<style>{STYLES}</style>
|
||||
|
||||
{/* Blobs */}
|
||||
<div className="rw-blob rw-blob-1" />
|
||||
<div className="rw-blob rw-blob-2" />
|
||||
<div className="rw-blob rw-blob-3" />
|
||||
<div className="rw-blob rw-blob-4" />
|
||||
|
||||
{/* Dots */}
|
||||
{DOTS.map((d, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="rw-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
|
||||
}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Sticky top: header + controls */}
|
||||
<div className="rw-sticky-top">
|
||||
<div className="rw-sticky-top-inner">
|
||||
{/* Header */}
|
||||
<header className="rw-header rw-anim">
|
||||
<h1 className="rw-title">🏆 Leaderboard</h1>
|
||||
{loading ? (
|
||||
<div
|
||||
style={{
|
||||
height: 16,
|
||||
width: 180,
|
||||
background: "#f3f4f6",
|
||||
borderRadius: 8,
|
||||
animation: "rwShimmer 1.5s ease-in-out infinite",
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<p className="rw-rank-text">
|
||||
You're <span>#{leaderboard?.user_rank.rank}</span> — keep
|
||||
grinding!
|
||||
</p>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="rw-controls rw-anim rw-anim-1">
|
||||
<div className="rw-tabs">
|
||||
{TABS.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
className={`rw-tab-btn${activeTab === tab.id ? " active" : ""}`}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
>
|
||||
{formatTimeFilter(time)}
|
||||
</Button>
|
||||
{tab.icon} {tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="rw-filter-btn">
|
||||
{formatTimeFilter(time)} <ChevronDown size={13} />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="font-satoshi">
|
||||
<DropdownMenuContent
|
||||
style={{ fontFamily: "'Nunito',sans-serif", fontWeight: 700 }}
|
||||
>
|
||||
<DropdownMenuRadioGroup value={time} onValueChange={setTime}>
|
||||
<DropdownMenuRadioItem value="today">
|
||||
Today
|
||||
@ -154,219 +487,141 @@ export const Rewards = () => {
|
||||
</DropdownMenuRadioGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TabsList>
|
||||
<TabsContent
|
||||
value="xp"
|
||||
className="flex-1 overflow-y-auto space-y-6 pb-8"
|
||||
</div>
|
||||
</div>
|
||||
{/* end rw-sticky-top-inner */}
|
||||
</div>
|
||||
{/* end rw-sticky-top */}
|
||||
|
||||
{/* Scrollable list */}
|
||||
<div className="rw-scroll-area">
|
||||
<div className="rw-scroll-inner">
|
||||
<div
|
||||
className="rw-list rw-anim rw-anim-2"
|
||||
style={{ paddingTop: "1rem" }}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="space-y-6">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<LeaderboardRowSkeleton key={i} />
|
||||
))}
|
||||
</div>
|
||||
<SkeletonRows />
|
||||
) : (
|
||||
leaderboard?.top_users.map((user, index) => {
|
||||
const isTopThree = index < 3;
|
||||
|
||||
leaderboard?.top_users.map((u, index) => {
|
||||
const top = index < 3;
|
||||
const rowClass = `rw-row${index === 0 ? " top-1" : index === 1 ? " top-2" : index === 2 ? " top-3" : ""}`;
|
||||
return (
|
||||
<div
|
||||
key={user.user_id}
|
||||
className="flex justify-between items-center"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{isTopThree ? (
|
||||
<img
|
||||
src={trophies[index]}
|
||||
alt={`trophy_${index + 1}`}
|
||||
className="w-12 h-12"
|
||||
/>
|
||||
) : (
|
||||
<span className="w-12 text-center font-satoshi-bold text-gray-400">
|
||||
{index + 1}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<Avatar className={`p-6 ${getRandomColor()}`}>
|
||||
<AvatarImage src={user.avatar_url} />
|
||||
<AvatarFallback className="text-white font-satoshi-bold">
|
||||
{user.name.slice(0, 1).toUpperCase()}
|
||||
<div key={u.user_id} className={rowClass}>
|
||||
<div className="rw-row-left">
|
||||
<div className="rw-rank-cell">
|
||||
{top ? (
|
||||
<img
|
||||
src={trophies[index]}
|
||||
alt={`#${index + 1}`}
|
||||
style={{ width: 32, height: 32 }}
|
||||
/>
|
||||
) : (
|
||||
<span className="rw-rank-num">{index + 1}</span>
|
||||
)}
|
||||
</div>
|
||||
<Avatar
|
||||
className={`${getRandomColor()}`}
|
||||
style={{ width: 38, height: 38 }}
|
||||
>
|
||||
<AvatarImage src={u.avatar_url} />
|
||||
<AvatarFallback
|
||||
style={{
|
||||
color: "black",
|
||||
fontWeight: 900,
|
||||
fontSize: "0.9rem",
|
||||
}}
|
||||
>
|
||||
{u.name.slice(0, 1).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<p className="font-satoshi-medium text-gray-600">
|
||||
{user.name}
|
||||
</p>
|
||||
<span className="rw-user-name">{u.name}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<p className="font-satoshi-medium">{user.total_xp}</p>
|
||||
<Zap size={20} className="text-lime-500 fill-lime-200" />
|
||||
<div className="rw-row-right">
|
||||
<span className="rw-score">{metricValue(u)}</span>
|
||||
{metricIcon()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</TabsContent>
|
||||
<TabsContent
|
||||
value="questions"
|
||||
className="flex-1 overflow-y-auto space-y-6"
|
||||
>
|
||||
{/* {leaderboard.map((user, index) => {
|
||||
const isTopThree = index < 3;
|
||||
</div>
|
||||
</div>
|
||||
{/* end rw-scroll-inner */}
|
||||
</div>
|
||||
{/* end rw-scroll-area */}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={user.id}
|
||||
className="flex justify-between items-center"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{isTopThree ? (
|
||||
<img
|
||||
src={trophies[index]}
|
||||
alt={`trophy_${index + 1}`}
|
||||
className="w-12 h-12"
|
||||
/>
|
||||
) : (
|
||||
<span className="w-12 text-center font-satoshi-bold text-gray-400">
|
||||
{index + 1}
|
||||
</span>
|
||||
)}
|
||||
{/* ── Floating island pill ── */}
|
||||
<div className="rw-island-wrap">
|
||||
{/* Expanded info card */}
|
||||
<div className={`rw-island-card${islandOpen ? " open" : ""}`}>
|
||||
<div className="rw-island-stat rank">
|
||||
<span className="rw-island-stat-val">
|
||||
#{leaderboard?.user_rank?.rank ?? "—"}
|
||||
</span>
|
||||
<span className="rw-island-stat-label">Rank</span>
|
||||
</div>
|
||||
<div className="rw-island-stat xp">
|
||||
<span className="rw-island-stat-val">
|
||||
{leaderboard?.user_rank?.total_xp ?? "—"}
|
||||
</span>
|
||||
<span className="rw-island-stat-label">Total XP</span>
|
||||
</div>
|
||||
<div className="rw-island-stat lvl">
|
||||
<span className="rw-island-stat-val">
|
||||
{leaderboard?.user_rank?.current_level ?? "—"}
|
||||
</span>
|
||||
<span className="rw-island-stat-label">Level</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Avatar className={`p-6 ${getRandomColor()}`}>
|
||||
<AvatarFallback className="text-white font-satoshi-bold">
|
||||
{user.name.slice(0, 1).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
{/* Pill button */}
|
||||
<div
|
||||
className={`rw-island-pill${islandOpen ? " open" : ""}`}
|
||||
onClick={() => !loading && setIslandOpen((o) => !o)}
|
||||
>
|
||||
{/* Avatar */}
|
||||
<div className="rw-island-avatar">
|
||||
{leaderboard?.user_rank?.avatar_url ? (
|
||||
<span>
|
||||
{leaderboard?.user_rank?.name?.slice(0, 1).toUpperCase() ?? "?"}
|
||||
</span>
|
||||
) : (
|
||||
<span>
|
||||
{leaderboard?.user_rank?.name?.slice(0, 1).toUpperCase() ?? "?"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="rw-island-info">
|
||||
<span className="rw-island-you">You</span>
|
||||
<span className="rw-island-name">
|
||||
{loading ? "Loading..." : (leaderboard?.user_rank?.name ?? "—")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="font-satoshi-medium text-gray-600">
|
||||
{user.name}
|
||||
</p>
|
||||
</div>
|
||||
{/* Name */}
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<p className="font-satoshi-medium">{user.xp}</p>
|
||||
<Zap size={20} color="darkgreen" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})} */}
|
||||
</TabsContent>
|
||||
<TabsContent
|
||||
value="streak"
|
||||
className="flex-1 overflow-y-auto space-y-6"
|
||||
>
|
||||
{/* {leaderboard.map((user, index) => {
|
||||
const isTopThree = index < 3;
|
||||
{/* Live metric */}
|
||||
<div className="rw-island-metric">
|
||||
<span className="rw-island-metric-val">{userMetric}</span>
|
||||
{activeTab === "xp" ? (
|
||||
<Zap size={15} color="rgba(255,255,255,0.8)" />
|
||||
) : activeTab === "questions" ? (
|
||||
<LucideBadgeQuestionMark
|
||||
size={15}
|
||||
color="rgba(255,255,255,0.8)"
|
||||
/>
|
||||
) : (
|
||||
<Flame size={15} color="rgba(255,255,255,0.8)" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
return (
|
||||
<div
|
||||
key={user.id}
|
||||
className="flex justify-between items-center"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{isTopThree ? (
|
||||
<img
|
||||
src={trophies[index]}
|
||||
alt={`trophy_${index + 1}`}
|
||||
className="w-12 h-12"
|
||||
/>
|
||||
) : (
|
||||
<span className="w-12 text-center font-satoshi-bold text-gray-400">
|
||||
{index + 1}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<Avatar className={`p-6 ${getRandomColor()}`}>
|
||||
<AvatarFallback className="text-white font-satoshi-bold">
|
||||
{user.name.slice(0, 1).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<p className="font-satoshi-medium text-gray-600">
|
||||
{user.name}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<p className="font-satoshi-medium">{user.xp}</p>
|
||||
<Zap size={20} color="darkgreen" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})} */}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</section>
|
||||
<Card className="absolute mx-auto w-full left-0 md:-bottom-12 bottom-0 bg-linear-to-br from-indigo-500 to-indigo-600 rounded-full py-4">
|
||||
<CardContent className="flex justify-between items-center">
|
||||
{loading ? (
|
||||
<div className="flex justify-between items-center animate-pulse w-full">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Rank / Trophy */}
|
||||
<div className="w-12 h-12 rounded-full bg-gray-200" />
|
||||
|
||||
{/* Avatar */}
|
||||
<div className="w-12 h-12 rounded-full bg-gray-300" />
|
||||
|
||||
{/* Name */}
|
||||
<div className="h-4 w-32 bg-gray-200 rounded" />
|
||||
</div>
|
||||
|
||||
{/* XP */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-4 w-10 bg-gray-200 rounded" />
|
||||
<div className="w-5 h-5 rounded bg-gray-200" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-3">
|
||||
{isTopThree ? (
|
||||
<img
|
||||
src={
|
||||
trophies[(leaderboard?.user_rank?.rank ?? Infinity) - 1]
|
||||
}
|
||||
alt={`trophy_${leaderboard?.user_rank?.rank ?? Infinity}`}
|
||||
className="w-12 h-12"
|
||||
/>
|
||||
) : (
|
||||
<span className="w-12 text-center font-satoshi-bold text-white">
|
||||
{(leaderboard?.user_rank?.rank ?? Infinity) - 1}
|
||||
</span>
|
||||
)}
|
||||
<Avatar className={`p-6 bg-white`}>
|
||||
<AvatarImage src={leaderboard?.user_rank.avatar_url} />
|
||||
<AvatarFallback className=" font-satoshi-bold">
|
||||
{leaderboard?.user_rank.name.slice(0, 1).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<p className="font-satoshi-bold text-white">
|
||||
{leaderboard?.user_rank.name}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<p className="font-satoshi-medium text-white">
|
||||
{activeTab === "xp"
|
||||
? leaderboard?.user_rank.total_xp
|
||||
: activeTab === "questions"
|
||||
? "23"
|
||||
: "5"}
|
||||
</p>
|
||||
|
||||
{activeTab === "xp" ? (
|
||||
<Zap size={20} color="white" />
|
||||
) : activeTab === "questions" ? (
|
||||
<LucideBadgeQuestionMark size={20} color="white" />
|
||||
) : (
|
||||
<Flame size={20} color="white" />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Chevron */}
|
||||
<div className="rw-island-chevron">
|
||||
<ChevronDown size={13} color="white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -3,66 +3,174 @@ import { Home, BookOpen, Award, User, Video } from "lucide-react";
|
||||
import { SidebarProvider, SidebarTrigger } from "../../components/ui/sidebar";
|
||||
import { AppSidebar } from "../../components/AppSidebar";
|
||||
|
||||
export function StudentLayout() {
|
||||
const navItems = [
|
||||
{ to: "/student/home", icon: Home, label: "Home" },
|
||||
{ to: "/student/practice", icon: BookOpen, label: "Practice" },
|
||||
{ to: "/student/lessons", icon: Video, label: "Lessons" },
|
||||
{ to: "/student/rewards", icon: Award, label: "Rewards" },
|
||||
{ to: "/student/profile", icon: User, label: "Profile" },
|
||||
];
|
||||
const NAV_ITEMS = [
|
||||
{
|
||||
to: "/student/home",
|
||||
icon: Home,
|
||||
label: "Home",
|
||||
color: "#f97316",
|
||||
bg: "rgba(249,115,22,0.12)",
|
||||
},
|
||||
{
|
||||
to: "/student/practice",
|
||||
icon: BookOpen,
|
||||
label: "Practice",
|
||||
color: "#a855f7",
|
||||
bg: "rgba(168,85,247,0.12)",
|
||||
},
|
||||
{
|
||||
to: "/student/lessons",
|
||||
icon: Video,
|
||||
label: "Lessons",
|
||||
color: "#0891b2",
|
||||
bg: "rgba(8,145,178,0.12)",
|
||||
},
|
||||
{
|
||||
to: "/student/rewards",
|
||||
icon: Award,
|
||||
label: "Rewards",
|
||||
color: "#16a34a",
|
||||
bg: "rgba(22,163,74,0.12)",
|
||||
},
|
||||
{
|
||||
to: "/student/profile",
|
||||
icon: User,
|
||||
label: "Profile",
|
||||
color: "#e11d48",
|
||||
bg: "rgba(225,29,72,0.12)",
|
||||
},
|
||||
];
|
||||
|
||||
const STYLES = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&display=swap');
|
||||
|
||||
/* ── The floating island dock ── */
|
||||
.sl-dock-wrap {
|
||||
position: fixed;
|
||||
bottom: calc(1.25rem + env(safe-area-inset-bottom));
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 20;
|
||||
|
||||
/* Frosted pill */
|
||||
background: rgba(255, 251, 244, 0.72);
|
||||
backdrop-filter: blur(24px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
||||
border: 1.5px solid rgba(255,255,255,0.7);
|
||||
border-radius: 100px;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0,0,0,0.12),
|
||||
0 2px 8px rgba(0,0,0,0.06),
|
||||
inset 0 1px 0 rgba(255,255,255,0.8);
|
||||
|
||||
padding: 0.45rem 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
/* ── Each nav item ── */
|
||||
.sl-dock-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
border-radius: 100px;
|
||||
padding: 0.5rem 0.6rem;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition:
|
||||
padding 0.35s cubic-bezier(0.34,1.56,0.64,1),
|
||||
gap 0.35s cubic-bezier(0.34,1.56,0.64,1),
|
||||
background 0.25s ease;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sl-dock-item:active { transform: scale(0.91); }
|
||||
.sl-dock-item.active {
|
||||
padding: 0.5rem 1rem 0.5rem 0.75rem;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
/* ── Icon circle ── */
|
||||
.sl-dock-icon {
|
||||
width: 32px; height: 32px; flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: transparent;
|
||||
transition: background 0.25s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
|
||||
}
|
||||
.sl-dock-item.active .sl-dock-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* ── Label (only visible when active) ── */
|
||||
.sl-dock-label {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.01em;
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
max-width 0.35s cubic-bezier(0.34,1.56,0.64,1),
|
||||
opacity 0.25s ease 0.05s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.sl-dock-item.active .sl-dock-label {
|
||||
max-width: 80px;
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
export function StudentLayout() {
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<style>{STYLES}</style>
|
||||
<div className="flex min-h-screen w-full overflow-x-hidden">
|
||||
{/* Desktop Sidebar */}
|
||||
<AppSidebar />
|
||||
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
<SidebarTrigger className="hidden md:block" />
|
||||
<main className="flex-1 pb-24 md:pb-0">
|
||||
{/* Extra bottom padding so content clears the floating dock */}
|
||||
<main className="flex-1 pb-32 md:pb-0">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* Mobile bottom nav */}
|
||||
<nav className="fixed bottom-0 left-0 right-0 rounded-t-4xl pt-2 bg-white border-t border-gray-200 shadow-4xl z-20 md:hidden">
|
||||
<div className="max-w-7xl mx-auto px-2">
|
||||
<div className="flex justify-around items-center">
|
||||
{navItems.map((item) => (
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
className={({ isActive }) =>
|
||||
`flex flex-col items-center justify-center py-3 px-4 flex-1 transition-all duration-200 font-satoshi tracking-wide ${
|
||||
isActive
|
||||
? "text-indigo-600"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<item.icon
|
||||
size={24}
|
||||
className={`mb-1 transition-transform ${
|
||||
isActive ? "scale-110" : ""
|
||||
}`}
|
||||
strokeWidth={isActive ? 2.5 : 2}
|
||||
/>
|
||||
<span
|
||||
className={`text-xs font-medium ${
|
||||
isActive ? "font-semibold" : ""
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* ── Floating island dock (mobile only) ── */}
|
||||
<nav className="sl-dock-wrap md:hidden">
|
||||
{NAV_ITEMS.map((item) => (
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
className={({ isActive }) =>
|
||||
`sl-dock-item${isActive ? " active" : ""}`
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<div
|
||||
className="sl-dock-icon"
|
||||
style={{ background: isActive ? item.bg : "transparent" }}
|
||||
>
|
||||
<item.icon
|
||||
size={18}
|
||||
strokeWidth={isActive ? 2.5 : 1.75}
|
||||
color={isActive ? item.color : "#94a3b8"}
|
||||
/>
|
||||
</div>
|
||||
<span className="sl-dock-label" style={{ color: item.color }}>
|
||||
{item.label}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</SidebarProvider>
|
||||
|
||||
@ -5,119 +5,436 @@ import { api } from "../../../utils/api";
|
||||
import { ChoiceCard } from "../../../components/ChoiceCard";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { slideVariants } from "../../../lib/utils";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { ArrowLeft, Loader2, Search, Zap } from "lucide-react";
|
||||
import { useExamConfigStore } from "../../../stores/useExamConfigStore";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
type Step = "topic" | "review";
|
||||
const STEPS: Step[] = ["topic", "review"];
|
||||
|
||||
const DOTS = [
|
||||
{ size: 10, color: "#f97316", top: "6%", left: "4%", delay: "0s" },
|
||||
{ size: 7, color: "#a855f7", top: "28%", left: "2%", delay: "1.2s" },
|
||||
{ size: 9, color: "#22c55e", top: "62%", left: "3%", delay: "0.6s" },
|
||||
{ size: 12, color: "#3b82f6", top: "10%", right: "4%", delay: "1.8s" },
|
||||
{ size: 7, color: "#f43f5e", top: "48%", right: "2%", delay: "0.9s" },
|
||||
{ size: 9, color: "#eab308", top: "76%", 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');
|
||||
|
||||
.dr-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.dr-blob { position:fixed;pointer-events:none;z-index:0;filter:blur(48px);opacity:0.35; }
|
||||
.dr-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:drWobble1 14s ease-in-out infinite; }
|
||||
.dr-blob-2 { width:190px;height:190px;background:#a5f3fc;bottom:-50px;left:6%;border-radius:40% 60% 30% 70%/60% 40% 60% 40%;animation:drWobble2 16s ease-in-out infinite; }
|
||||
.dr-blob-3 { width:210px;height:210px;background:#fbcfe8;top:15%;right:-60px;border-radius:70% 30% 50% 50%/40% 60% 40% 60%;animation:drWobble1 18s ease-in-out infinite reverse; }
|
||||
.dr-blob-4 { width:150px;height:150px;background:#bfdbfe;bottom:12%;right:2%;border-radius:50% 50% 30% 70%/60% 40% 60% 40%;animation:drWobble2 12s ease-in-out infinite; }
|
||||
|
||||
@keyframes drWobble1 {
|
||||
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 drWobble2 {
|
||||
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);}
|
||||
}
|
||||
|
||||
.dr-dot { position:fixed;border-radius:50%;pointer-events:none;z-index:0;opacity:0.3;animation:drFloat 7s ease-in-out infinite; }
|
||||
@keyframes drFloat {
|
||||
0%,100%{transform:translateY(0) rotate(0deg);}
|
||||
50%{transform:translateY(-12px) rotate(180deg);}
|
||||
}
|
||||
|
||||
.dr-inner {
|
||||
position: relative; z-index: 1;
|
||||
max-width: 560px; margin: 0 auto;
|
||||
padding: 2rem 1.25rem 8rem;
|
||||
display: flex; flex-direction: column; gap: 1.5rem;
|
||||
}
|
||||
|
||||
@keyframes drPopIn {
|
||||
from { opacity:0; transform:scale(0.92) translateY(12px); }
|
||||
to { opacity:1; transform:scale(1) translateY(0); }
|
||||
}
|
||||
.dr-anim { animation: drPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
|
||||
.dr-anim-1 { animation-delay:0.05s; }
|
||||
.dr-anim-2 { animation-delay:0.1s; }
|
||||
|
||||
/* Header */
|
||||
.dr-header-row { display:flex;align-items:center;gap:0.75rem; }
|
||||
.dr-back-btn {
|
||||
width:40px;height:40px;border-radius:50%;
|
||||
background:white;border:2.5px solid #f3f4f6;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,0.05);
|
||||
transition:all 0.15s ease;flex-shrink:0;
|
||||
}
|
||||
.dr-back-btn:hover { border-color:#a5f3fc;background:#ecfeff; }
|
||||
.dr-back-btn:active { transform:scale(0.9); }
|
||||
.dr-back-btn.hidden { opacity:0;pointer-events:none; }
|
||||
|
||||
.dr-eyebrow {
|
||||
font-size:0.62rem;font-weight:800;letter-spacing:0.16em;
|
||||
text-transform:uppercase;color:#0891b2;
|
||||
display:flex;align-items:center;gap:0.35rem;
|
||||
}
|
||||
.dr-title {
|
||||
font-size:1.75rem;font-weight:900;color:#1e1b4b;
|
||||
letter-spacing:-0.02em;line-height:1.15;
|
||||
}
|
||||
.dr-sub {
|
||||
font-family:'Nunito Sans',sans-serif;
|
||||
font-size:0.82rem;font-weight:600;color:#9ca3af;
|
||||
margin-top:0.2rem;line-height:1.5;
|
||||
}
|
||||
|
||||
/* Progress */
|
||||
.dr-progress-wrap {
|
||||
background:white;border:2.5px solid #f3f4f6;
|
||||
border-radius:100px;overflow:hidden;height:8px;
|
||||
box-shadow:0 2px 8px rgba(0,0,0,0.04);
|
||||
}
|
||||
.dr-progress-fill {
|
||||
height:100%;
|
||||
background:linear-gradient(90deg,#22d3ee,#0891b2);
|
||||
border-radius:100px;
|
||||
transition:width 0.5s cubic-bezier(0.34,1.56,0.64,1);
|
||||
}
|
||||
.dr-progress-labels {
|
||||
display:flex;justify-content:space-between;
|
||||
font-size:0.6rem;font-weight:800;letter-spacing:0.1em;
|
||||
text-transform:uppercase;color:#d1d5db;
|
||||
margin-top:0.35rem;padding:0 0.1rem;
|
||||
}
|
||||
.dr-progress-labels span.done { color:#0891b2; }
|
||||
|
||||
/* Step card */
|
||||
.dr-step-card {
|
||||
background:white;border:2.5px solid #f3f4f6;
|
||||
border-radius:24px;padding:1.25rem;
|
||||
box-shadow:0 4px 20px rgba(0,0,0,0.05);
|
||||
display:flex;flex-direction:column;gap:1rem;
|
||||
}
|
||||
.dr-step-title {
|
||||
font-size:1rem;font-weight:900;color:#1e1b4b;
|
||||
display:flex;align-items:center;gap:0.5rem;
|
||||
}
|
||||
.dr-step-badge {
|
||||
font-size:0.58rem;font-weight:800;letter-spacing:0.1em;
|
||||
text-transform:uppercase;padding:0.2rem 0.55rem;
|
||||
border-radius:100px;background:#ecfeff;
|
||||
border:2px solid #a5f3fc;color:#0891b2;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
.dr-search-wrap { position:relative; }
|
||||
.dr-search-icon {
|
||||
position:absolute;left:0.85rem;top:50%;
|
||||
transform:translateY(-50%);pointer-events:none;color:#9ca3af;
|
||||
}
|
||||
.dr-search-input {
|
||||
width:100%;padding:0.7rem 1rem 0.7rem 2.5rem;
|
||||
background:#f9fafb;border:2.5px solid #f3f4f6;
|
||||
border-radius:14px;
|
||||
font-family:'Nunito Sans',sans-serif;
|
||||
font-size:0.85rem;font-weight:600;color:#1e1b4b;
|
||||
outline:none;transition:all 0.2s ease;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
.dr-search-input:focus {
|
||||
border-color:#67e8f9;background:white;
|
||||
box-shadow:0 0 0 3px rgba(8,145,178,0.1);
|
||||
}
|
||||
.dr-search-input::placeholder { color:#9ca3af; }
|
||||
|
||||
/* Topic grid */
|
||||
.dr-topic-grid {
|
||||
display:grid;grid-template-columns:1fr;
|
||||
gap:0.6rem;max-height:380px;overflow-y:auto;
|
||||
padding-right:0.25rem;
|
||||
}
|
||||
@media(min-width:480px){ .dr-topic-grid { grid-template-columns:1fr 1fr; } }
|
||||
|
||||
/* Loading / empty */
|
||||
.dr-loading {
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
gap:0.6rem;padding:2rem;
|
||||
font-size:0.85rem;font-weight:700;color:#9ca3af;
|
||||
}
|
||||
.dr-spinner { animation:drSpin 0.8s linear infinite; }
|
||||
@keyframes drSpin { to { transform:rotate(360deg); } }
|
||||
.dr-empty { text-align:center;padding:2rem;color:#9ca3af;font-size:0.85rem;font-weight:700; }
|
||||
|
||||
/* Review rows */
|
||||
.dr-review-row {
|
||||
display:flex;align-items:flex-start;gap:0.75rem;
|
||||
padding:0.85rem 0;border-bottom:2px solid #f9fafb;
|
||||
}
|
||||
.dr-review-row:last-child { border-bottom:none;padding-bottom:0; }
|
||||
.dr-review-icon {
|
||||
width:34px;height:34px;border-radius:10px;flex-shrink:0;
|
||||
display:flex;align-items:center;justify-content:center;font-size:0.95rem;
|
||||
}
|
||||
.dr-review-label {
|
||||
font-size:0.62rem;font-weight:800;letter-spacing:0.12em;
|
||||
text-transform:uppercase;color:#9ca3af;
|
||||
}
|
||||
.dr-review-value {
|
||||
font-size:0.9rem;font-weight:800;color:#1e1b4b;
|
||||
margin-top:0.1rem;line-height:1.4;
|
||||
}
|
||||
.dr-chip-wrap { display:flex;flex-wrap:wrap;gap:0.35rem;margin-top:0.35rem; }
|
||||
.dr-chip {
|
||||
background:#ecfeff;border:2px solid #a5f3fc;
|
||||
border-radius:100px;padding:0.2rem 0.65rem;
|
||||
font-size:0.72rem;font-weight:800;color:#0891b2;
|
||||
}
|
||||
|
||||
/* Stat chips in review */
|
||||
.dr-stat-row { display:flex;gap:0.6rem;margin-top:0.25rem; }
|
||||
.dr-stat {
|
||||
display:flex;flex-direction:column;align-items:center;
|
||||
background:#f0fdff;border:2px solid #a5f3fc;
|
||||
border-radius:14px;padding:0.5rem 0.85rem;flex:1;
|
||||
}
|
||||
.dr-stat-val { font-size:1rem;font-weight:900;color:#0891b2; }
|
||||
.dr-stat-label {
|
||||
font-size:0.58rem;font-weight:800;letter-spacing:0.1em;
|
||||
text-transform:uppercase;color:#67e8f9;margin-top:0.1rem;
|
||||
}
|
||||
|
||||
/* CTA bar */
|
||||
.dr-cta-bar {
|
||||
position:fixed;bottom:96px;left:0;right:0;z-index:10;
|
||||
padding:0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom));
|
||||
|
||||
|
||||
}
|
||||
.dr-cta-inner {
|
||||
max-width:560px;margin:0 auto;
|
||||
display:flex;gap:0.75rem;align-items:center;
|
||||
}
|
||||
|
||||
.dr-next-btn {
|
||||
flex:1;padding:0.9rem 1.5rem;
|
||||
background:#0891b2;color:white;border:none;
|
||||
border-radius:100px;cursor:pointer;
|
||||
font-family:'Nunito',sans-serif;font-size:0.92rem;font-weight:900;
|
||||
display:flex;align-items:center;justify-content:center;gap:0.4rem;
|
||||
box-shadow:0 6px 0 #0e7490,0 8px 20px rgba(8,145,178,0.28);
|
||||
transition:transform 0.1s ease,box-shadow 0.1s ease;
|
||||
}
|
||||
.dr-next-btn:hover { transform:translateY(-2px);box-shadow:0 8px 0 #0e7490,0 12px 24px rgba(8,145,178,0.32); }
|
||||
.dr-next-btn:active { transform:translateY(3px); box-shadow:0 3px 0 #0e7490; }
|
||||
.dr-next-btn:disabled {
|
||||
background:#e5e7eb;color:#9ca3af;cursor:not-allowed;
|
||||
box-shadow:0 4px 0 #d1d5db;
|
||||
}
|
||||
.dr-next-btn:disabled:hover { transform:none;box-shadow:0 4px 0 #d1d5db; }
|
||||
|
||||
.dr-start-btn {
|
||||
flex:1;padding:0.9rem 1.5rem;
|
||||
background:linear-gradient(135deg,#22d3ee,#0891b2);color:white;border:none;
|
||||
border-radius:100px;cursor:pointer;
|
||||
font-family:'Nunito',sans-serif;font-size:0.92rem;font-weight:900;
|
||||
display:flex;align-items:center;justify-content:center;gap:0.4rem;
|
||||
box-shadow:0 6px 0 #0e7490,0 8px 20px rgba(8,145,178,0.3);
|
||||
transition:transform 0.1s ease,box-shadow 0.1s ease;
|
||||
}
|
||||
.dr-start-btn:hover { transform:translateY(-2px);box-shadow:0 8px 0 #0e7490,0 12px 24px rgba(8,145,178,0.35); }
|
||||
.dr-start-btn:active { transform:translateY(3px); box-shadow:0 3px 0 #0e7490; }
|
||||
`;
|
||||
|
||||
export const Drills = () => {
|
||||
const user = useAuthStore((state) => state.user);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [direction, setDirection] = useState<1 | -1>(1);
|
||||
|
||||
const [topics, setTopics] = useState<Topic[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [selectedTopics, setSelectedTopics] = useState<Topic[]>([]);
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const [step, setStep] = useState<Step>("topic");
|
||||
const [topics, setTopics] = useState<Topic[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedTopics, setSelectedTopics] = useState<Topic[]>([]);
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
const { storeTopics, setMode, setQuestionCount } = useExamConfigStore();
|
||||
|
||||
const stepIndex = STEPS.indexOf(step);
|
||||
const progressPct = ((stepIndex + 1) / STEPS.length) * 100;
|
||||
|
||||
const toggleTopic = (topic: Topic) => {
|
||||
setSelectedTopics((prev) => {
|
||||
const exists = prev.some((t) => t.id === topic.id);
|
||||
setSelectedTopics((prev) =>
|
||||
prev.some((t) => t.id === topic.id)
|
||||
? prev.filter((t) => t.id !== topic.id)
|
||||
: [...prev, topic],
|
||||
);
|
||||
};
|
||||
|
||||
if (exists) {
|
||||
return prev.filter((t) => t.id !== topic.id);
|
||||
}
|
||||
|
||||
return [...prev, topic];
|
||||
});
|
||||
const goNext = () => {
|
||||
setDirection(1);
|
||||
setStep("review");
|
||||
};
|
||||
const goBack = () => {
|
||||
setDirection(-1);
|
||||
setStep("topic");
|
||||
};
|
||||
|
||||
function handleStartDrill() {
|
||||
if (!user || !topics) return;
|
||||
|
||||
navigate(`/student/practice/${topics[0].id}/test`, { replace: true });
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const fetchAllTopics = async () => {
|
||||
if (!user) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const authStorage = localStorage.getItem("auth-storage");
|
||||
if (!authStorage) return;
|
||||
|
||||
const parsed = JSON.parse(authStorage) as {
|
||||
state?: { token?: string };
|
||||
};
|
||||
|
||||
const token = parsed.state?.token;
|
||||
const {
|
||||
state: { token },
|
||||
} = JSON.parse(authStorage) as { state?: { token?: string } };
|
||||
if (!token) return;
|
||||
|
||||
const response = await api.fetchAllTopics(token);
|
||||
setTopics(response);
|
||||
} catch (e) {
|
||||
console.error("Failed to load topics:", e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error("Failed to load topics. Reason: " + error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchAllTopics();
|
||||
}, [user]);
|
||||
|
||||
const filteredTopics = topics.filter((t) =>
|
||||
t.name.toLowerCase().includes(search.toLowerCase()),
|
||||
);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
|
||||
<header className="space-y-2">
|
||||
<h1 className="font-satoshi-bold text-3xl">Drills</h1>
|
||||
<p className="font-satoshi text-md text-gray-500">
|
||||
Train your speed and accuracy with our drill-based testing system.
|
||||
</p>
|
||||
</header>
|
||||
<section>
|
||||
<div className="relative overflow-hidden">
|
||||
<AnimatePresence mode="wait">
|
||||
<div className="dr-screen">
|
||||
<style>{STYLES}</style>
|
||||
|
||||
{/* Blobs */}
|
||||
<div className="dr-blob dr-blob-1" />
|
||||
<div className="dr-blob dr-blob-2" />
|
||||
<div className="dr-blob dr-blob-3" />
|
||||
<div className="dr-blob dr-blob-4" />
|
||||
|
||||
{/* Dots */}
|
||||
{DOTS.map((d, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="dr-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="dr-inner">
|
||||
{/* Header */}
|
||||
<div className="dr-header-row dr-anim">
|
||||
<button
|
||||
className={`dr-back-btn${step === "topic" ? " hidden" : ""}`}
|
||||
onClick={goBack}
|
||||
>
|
||||
<ArrowLeft size={17} color="#6b7280" />
|
||||
</button>
|
||||
<div style={{ flex: 1 }}>
|
||||
<p className="dr-eyebrow">
|
||||
<Zap size={11} /> Drills
|
||||
</p>
|
||||
<h1 className="dr-title">
|
||||
{step === "topic" ? "Pick your topics" : "Review & launch"}
|
||||
</h1>
|
||||
<p className="dr-sub">
|
||||
{step === "topic"
|
||||
? "Choose what you want to drill. Speed and accuracy await."
|
||||
: "Everything look good? Time to drill."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress */}
|
||||
<div className="dr-anim dr-anim-1">
|
||||
<div className="dr-progress-wrap">
|
||||
<div
|
||||
className="dr-progress-fill"
|
||||
style={{ width: `${progressPct}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="dr-progress-labels">
|
||||
{STEPS.map((s, i) => (
|
||||
<span key={s} className={i <= stepIndex ? "done" : ""}>
|
||||
{s === "topic" ? "Topics" : "Review"}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step content */}
|
||||
<div style={{ position: "relative", overflow: "hidden" }}>
|
||||
<AnimatePresence mode="wait" custom={direction}>
|
||||
{/* Step 1 — Topic */}
|
||||
{step === "topic" && (
|
||||
<motion.div
|
||||
custom={direction}
|
||||
key="topic"
|
||||
custom={direction}
|
||||
variants={slideVariants}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
className="space-y-4"
|
||||
>
|
||||
<h2 className="text-xl font-satoshi-bold">Choose a topic</h2>
|
||||
<div className="dr-step-card">
|
||||
<div className="dr-step-title">
|
||||
Choose topics
|
||||
{selectedTopics.length > 0 && (
|
||||
<span className="dr-step-badge">
|
||||
{selectedTopics.length} selected
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<input
|
||||
placeholder="Search topics..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="w-full rounded-xl border px-4 py-2"
|
||||
/>
|
||||
<div className="dr-search-wrap">
|
||||
<Search size={15} className="dr-search-icon" />
|
||||
<input
|
||||
className="dr-search-input"
|
||||
placeholder="Search topics..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{loading ? (
|
||||
<>
|
||||
<div>
|
||||
<Loader2
|
||||
size={30}
|
||||
color="purple"
|
||||
className="animate-spin"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
<div className="dr-loading">
|
||||
<Loader2
|
||||
size={22}
|
||||
color="#0891b2"
|
||||
className="dr-spinner"
|
||||
/>
|
||||
Loading topics...
|
||||
</div>
|
||||
) : filteredTopics.length === 0 ? (
|
||||
<p className="dr-empty">No topics match "{search}"</p>
|
||||
) : (
|
||||
topics
|
||||
.filter((t) =>
|
||||
t.name.toLowerCase().includes(search.toLowerCase()),
|
||||
)
|
||||
.map((t) => (
|
||||
<div className="dr-topic-grid">
|
||||
{filteredTopics.map((t) => (
|
||||
<ChoiceCard
|
||||
key={t.id}
|
||||
label={t.name}
|
||||
@ -126,87 +443,109 @@ export const Drills = () => {
|
||||
selected={selectedTopics.some((st) => st.id === t.id)}
|
||||
onClick={() => toggleTopic(t)}
|
||||
/>
|
||||
))
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
disabled={selectedTopics.length === 0}
|
||||
onClick={() => {
|
||||
// ✅ STORE
|
||||
storeTopics(selectedTopics.map((t) => t.id)); // ✅ STORE
|
||||
setMode("DRILL"); // ✅ STORE
|
||||
setQuestionCount(7); // ✅ STORE
|
||||
setDirection(1);
|
||||
setStep("review");
|
||||
}}
|
||||
className={`rounded-2xl py-3 px-6 font-satoshi-bold transition
|
||||
${
|
||||
selectedTopics.length === 0
|
||||
? "bg-gray-300 text-gray-500 cursor-not-allowed"
|
||||
: "bg-linear-to-br from-purple-500 to-purple-600 text-white"
|
||||
}`}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Step 2 — Review */}
|
||||
{step === "review" && (
|
||||
<motion.div
|
||||
custom={direction}
|
||||
key="review"
|
||||
custom={direction}
|
||||
variants={slideVariants}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
className="space-y-6"
|
||||
>
|
||||
<h2 className="text-xl font-satoshi-bold">
|
||||
Review your choices
|
||||
</h2>
|
||||
<div className="dr-step-card">
|
||||
<p className="dr-step-title">Your drill setup</p>
|
||||
|
||||
<div className="rounded-2xl border p-4 space-y-2 font-satoshi">
|
||||
<p>
|
||||
<strong>Topics:</strong>{" "}
|
||||
{selectedTopics.map((t) => t.name).join(", ")}
|
||||
</p>
|
||||
{/* Topics */}
|
||||
<div className="dr-review-row">
|
||||
<div
|
||||
className="dr-review-icon"
|
||||
style={{
|
||||
background: "#ecfeff",
|
||||
border: "2px solid #a5f3fc",
|
||||
}}
|
||||
>
|
||||
📚
|
||||
</div>
|
||||
<div>
|
||||
<p className="dr-review-label">Topics</p>
|
||||
<div className="dr-chip-wrap">
|
||||
{selectedTopics.map((t) => (
|
||||
<span key={t.id} className="dr-chip">
|
||||
{t.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="dr-review-row">
|
||||
<div
|
||||
className="dr-review-icon"
|
||||
style={{
|
||||
background: "#ecfeff",
|
||||
border: "2px solid #a5f3fc",
|
||||
}}
|
||||
>
|
||||
⚡
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<p className="dr-review-label">Session</p>
|
||||
<div className="dr-stat-row">
|
||||
<div className="dr-stat">
|
||||
<span className="dr-stat-val">7</span>
|
||||
<span className="dr-stat-label">Questions</span>
|
||||
</div>
|
||||
<div className="dr-stat">
|
||||
<span className="dr-stat-val">~5</span>
|
||||
<span className="dr-stat-label">Minutes</span>
|
||||
</div>
|
||||
<div className="dr-stat">
|
||||
<span className="dr-stat-val">⏱️</span>
|
||||
<span className="dr-stat-label">Timed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<button
|
||||
disabled={step === "topic"}
|
||||
onClick={() => {
|
||||
const order: Step[] = ["topic", "review"];
|
||||
setDirection(-1);
|
||||
setStep(order[order.indexOf(step) - 1]);
|
||||
}}
|
||||
className={`absolute bottom-24 left-10 rounded-2xl py-3 px-6 font-satoshi-bold transition
|
||||
${
|
||||
step === "topic"
|
||||
? "opacity-0 pointer-events-none"
|
||||
: "bg-linear-to-br from-slate-500 to-slate-600 text-white"
|
||||
}`}
|
||||
>
|
||||
← Back
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
disabled={step !== "review"}
|
||||
className={`absolute bottom-24 right-10 rounded-2xl py-3 px-6 font-satoshi-bold transition
|
||||
${
|
||||
step !== "review"
|
||||
? "opacity-0 pointer-events-none"
|
||||
: "bg-linear-to-br from-purple-500 to-purple-600 text-white"
|
||||
}`}
|
||||
onClick={() => {
|
||||
handleStartDrill();
|
||||
}}
|
||||
>
|
||||
Start Test
|
||||
</button>
|
||||
</section>
|
||||
</main>
|
||||
{/* CTA bar */}
|
||||
<div className="dr-cta-bar">
|
||||
<div className="dr-cta-inner">
|
||||
{step === "topic" && (
|
||||
<button
|
||||
className="dr-next-btn"
|
||||
disabled={selectedTopics.length === 0}
|
||||
onClick={() => {
|
||||
storeTopics(selectedTopics.map((t) => t.id));
|
||||
setMode("DRILL");
|
||||
setQuestionCount(7);
|
||||
goNext();
|
||||
}}
|
||||
>
|
||||
Next — Review ⚡
|
||||
</button>
|
||||
)}
|
||||
{step === "review" && (
|
||||
<button className="dr-start-btn" onClick={handleStartDrill}>
|
||||
⚡ Start Drill
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -5,8 +5,8 @@ import {
|
||||
Pilcrow,
|
||||
Superscript,
|
||||
WholeWord,
|
||||
Trophy,
|
||||
} from "lucide-react";
|
||||
import { Card, CardContent } from "../../../components/ui/card";
|
||||
import { useState } from "react";
|
||||
import { useAuthStore } from "../../../stores/authStore";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
@ -14,106 +14,425 @@ import { useExamConfigStore } from "../../../stores/useExamConfigStore";
|
||||
|
||||
type Module = "EBRW" | "MATH" | null;
|
||||
|
||||
const DOTS = [
|
||||
{ size: 10, color: "#f97316", top: "6%", left: "4%", delay: "0s" },
|
||||
{ size: 7, color: "#a855f7", top: "28%", left: "2%", delay: "1.2s" },
|
||||
{ size: 9, color: "#22c55e", top: "62%", left: "3%", delay: "0.6s" },
|
||||
{ size: 12, color: "#3b82f6", top: "10%", right: "4%", delay: "1.8s" },
|
||||
{ size: 7, color: "#f43f5e", top: "48%", right: "2%", delay: "0.9s" },
|
||||
{ size: 9, color: "#eab308", top: "76%", 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');
|
||||
|
||||
.htm-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.htm-blob { position:fixed;pointer-events:none;z-index:0;filter:blur(48px);opacity:0.35; }
|
||||
.htm-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:htmWobble1 14s ease-in-out infinite; }
|
||||
.htm-blob-2 { width:190px;height:190px;background:#a5f3c0;bottom:-50px;left:6%;border-radius:40% 60% 30% 70%/60% 40% 60% 40%;animation:htmWobble2 16s ease-in-out infinite; }
|
||||
.htm-blob-3 { width:210px;height:210px;background:#fbcfe8;top:15%;right:-60px;border-radius:70% 30% 50% 50%/40% 60% 40% 60%;animation:htmWobble1 18s ease-in-out infinite reverse; }
|
||||
.htm-blob-4 { width:150px;height:150px;background:#bfdbfe;bottom:12%;right:2%;border-radius:50% 50% 30% 70%/60% 40% 60% 40%;animation:htmWobble2 12s ease-in-out infinite; }
|
||||
|
||||
@keyframes htmWobble1 {
|
||||
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 htmWobble2 {
|
||||
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);}
|
||||
}
|
||||
|
||||
.htm-dot { position:fixed;border-radius:50%;pointer-events:none;z-index:0;opacity:0.3;animation:htmFloat 7s ease-in-out infinite; }
|
||||
@keyframes htmFloat {
|
||||
0%,100%{transform:translateY(0) rotate(0deg);}
|
||||
50%{transform:translateY(-12px) rotate(180deg);}
|
||||
}
|
||||
|
||||
.htm-inner {
|
||||
position: relative; z-index: 1;
|
||||
max-width: 560px; margin: 0 auto;
|
||||
padding: 2rem 1.25rem 8rem;
|
||||
display: flex; flex-direction: column; gap: 1.5rem;
|
||||
}
|
||||
|
||||
@keyframes htmPopIn {
|
||||
from { opacity:0; transform:scale(0.92) translateY(12px); }
|
||||
to { opacity:1; transform:scale(1) translateY(0); }
|
||||
}
|
||||
.htm-anim { animation: htmPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
|
||||
.htm-anim-1 { animation-delay: 0.05s; }
|
||||
.htm-anim-2 { animation-delay: 0.12s; }
|
||||
.htm-anim-3 { animation-delay: 0.19s; }
|
||||
|
||||
/* Header */
|
||||
.htm-eyebrow {
|
||||
font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em;
|
||||
text-transform: uppercase; color: #84cc16;
|
||||
display: flex; align-items: center; gap: 0.35rem;
|
||||
}
|
||||
.htm-title {
|
||||
font-size: 1.75rem; font-weight: 900; color: #1e1b4b;
|
||||
letter-spacing: -0.02em; line-height: 1.15;
|
||||
}
|
||||
.htm-sub {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.82rem; font-weight: 600; color: #9ca3af; line-height: 1.5;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
/* Module cards */
|
||||
.htm-card {
|
||||
border-radius: 28px;
|
||||
position: relative; overflow: hidden;
|
||||
cursor: pointer;
|
||||
border: 3px solid transparent;
|
||||
transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
|
||||
box-shadow 0.2s ease,
|
||||
border-color 0.2s ease;
|
||||
min-height: 200px;
|
||||
display: flex; flex-direction: column; justify-content: flex-end;
|
||||
}
|
||||
.htm-card:hover { transform: translateY(-4px); }
|
||||
.htm-card:active { transform: translateY(2px) scale(0.98); }
|
||||
|
||||
.htm-card.ebrw {
|
||||
background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 60%, #1e40af 100%);
|
||||
box-shadow: 0 10px 0 #1e3a8a66, 0 14px 32px rgba(29,78,216,0.3);
|
||||
}
|
||||
.htm-card.ebrw.selected {
|
||||
border-color: #93c5fd;
|
||||
box-shadow: 0 10px 0 #1e3a8a88, 0 16px 40px rgba(29,78,216,0.45);
|
||||
transform: translateY(-4px) scale(1.01);
|
||||
}
|
||||
|
||||
.htm-card.math {
|
||||
background: linear-gradient(145deg, #f43f5e 0%, #e11d48 60%, #be123c 100%);
|
||||
box-shadow: 0 10px 0 #9f123666, 0 14px 32px rgba(225,29,72,0.3);
|
||||
}
|
||||
.htm-card.math.selected {
|
||||
border-color: #fda4af;
|
||||
box-shadow: 0 10px 0 #9f123688, 0 16px 40px rgba(225,29,72,0.45);
|
||||
transform: translateY(-4px) scale(1.01);
|
||||
}
|
||||
|
||||
/* Decorative icons */
|
||||
.htm-card-icons {
|
||||
position: absolute; inset: 0; pointer-events: none;
|
||||
}
|
||||
|
||||
/* Card body (text + chips) */
|
||||
.htm-card-body {
|
||||
position: relative; z-index: 2;
|
||||
padding: 1.5rem 1.5rem 1.75rem;
|
||||
display: flex; flex-direction: column; gap: 0.5rem;
|
||||
}
|
||||
|
||||
.htm-card-tag {
|
||||
font-size: 0.6rem; font-weight: 800; letter-spacing: 0.18em;
|
||||
text-transform: uppercase; color: rgba(255,255,255,0.6);
|
||||
}
|
||||
.htm-card-name {
|
||||
font-size: 1.6rem; font-weight: 900; color: white;
|
||||
letter-spacing: -0.02em; line-height: 1.1;
|
||||
}
|
||||
.htm-card-desc {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.7);
|
||||
line-height: 1.4; margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
/* Stat pills row */
|
||||
.htm-stat-row {
|
||||
display: flex; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap;
|
||||
}
|
||||
.htm-stat-pill {
|
||||
background: rgba(255,255,255,0.15);
|
||||
border: 1.5px solid rgba(255,255,255,0.25);
|
||||
border-radius: 100px; padding: 0.25rem 0.65rem;
|
||||
font-size: 0.65rem; font-weight: 800; color: white;
|
||||
display: flex; align-items: center; gap: 0.3rem;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
/* Selected check badge */
|
||||
.htm-check-badge {
|
||||
position: absolute; top: 1rem; right: 1rem; z-index: 3;
|
||||
width: 32px; height: 32px; border-radius: 50%;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border: 2px solid rgba(255,255,255,0.4);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
|
||||
opacity: 0; transform: scale(0.7);
|
||||
}
|
||||
.htm-card.selected .htm-check-badge {
|
||||
opacity: 1; transform: scale(1);
|
||||
background: rgba(255,255,255,0.3);
|
||||
border-color: rgba(255,255,255,0.7);
|
||||
}
|
||||
|
||||
/* CTA bar */
|
||||
.htm-cta-bar {
|
||||
position: fixed; bottom: 96px; left: 0; right: 0; z-index: 10;
|
||||
padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom));
|
||||
|
||||
transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
|
||||
}
|
||||
.htm-cta-bar.hidden {
|
||||
transform: translateY(100%); opacity: 0; pointer-events: none;
|
||||
}
|
||||
.htm-cta-inner {
|
||||
max-width: 560px; margin: 0 auto;
|
||||
}
|
||||
|
||||
.htm-start-btn {
|
||||
width: 100%; padding: 0.95rem;
|
||||
background: linear-gradient(135deg, #84cc16, #65a30d);
|
||||
color: white; border: none; border-radius: 100px; cursor: pointer;
|
||||
font-family: 'Nunito', sans-serif; font-size: 0.95rem; font-weight: 900;
|
||||
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
|
||||
box-shadow: 0 6px 0 #3f6212, 0 8px 20px rgba(101,163,13,0.3);
|
||||
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
.htm-start-btn:hover { transform:translateY(-2px); box-shadow:0 8px 0 #3f6212,0 12px 24px rgba(101,163,13,0.35); }
|
||||
.htm-start-btn:active { transform:translateY(3px); box-shadow:0 3px 0 #3f6212; }
|
||||
|
||||
.htm-start-label {
|
||||
font-size: 0.7rem; font-weight: 700; color: #9ca3af;
|
||||
text-align: center; margin-top: 0.5rem;
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
}
|
||||
.htm-start-label span { font-weight: 800; color: #6b7280; }
|
||||
`;
|
||||
|
||||
export const HardTestModules = () => {
|
||||
const user = useAuthStore((state) => state.user);
|
||||
const navigate = useNavigate();
|
||||
const [selected, setSelected] = useState<Module>(null);
|
||||
|
||||
const { setMode, storeDuration, setSection } = useExamConfigStore();
|
||||
|
||||
function handleStartModule() {
|
||||
if (!user) return;
|
||||
|
||||
(setMode("MODULE"), storeDuration(7), setSection(selected));
|
||||
|
||||
if (!user || !selected) return;
|
||||
setMode("MODULE");
|
||||
storeDuration(7);
|
||||
setSection(selected);
|
||||
navigate(`/student/practice/${selected}/test`, { replace: true });
|
||||
}
|
||||
|
||||
const toggle = (mod: "EBRW" | "MATH") =>
|
||||
setSelected((prev) => (prev === mod ? null : mod));
|
||||
|
||||
return (
|
||||
<main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
|
||||
<header className="space-y-2">
|
||||
<h1 className="font-satoshi-bold text-3xl">Hard Test Modules</h1>
|
||||
<p className="font-satoshi text-md text-gray-500">
|
||||
Tackle hard practice test modules by selecting a section.
|
||||
</p>
|
||||
</header>
|
||||
<section className="space-y-6">
|
||||
<Card
|
||||
onClick={() =>
|
||||
setSelected((prev) => (prev === "EBRW" ? null : "EBRW"))
|
||||
<div className="htm-screen">
|
||||
<style>{STYLES}</style>
|
||||
|
||||
{/* Blobs */}
|
||||
<div className="htm-blob htm-blob-1" />
|
||||
<div className="htm-blob htm-blob-2" />
|
||||
<div className="htm-blob htm-blob-3" />
|
||||
<div className="htm-blob htm-blob-4" />
|
||||
|
||||
{/* Dots */}
|
||||
{DOTS.map((d, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="htm-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
|
||||
}
|
||||
className={`relative cursor-pointer overflow-hidden transition
|
||||
${
|
||||
selected === "EBRW"
|
||||
? "ring-2 ring-blue-500 scale-[1.02]"
|
||||
: "hover:scale-[1.01]"
|
||||
}
|
||||
bg-linear-to-br from-blue-400 to-blue-600
|
||||
`}
|
||||
/>
|
||||
))}
|
||||
|
||||
<div className="htm-inner">
|
||||
{/* Header */}
|
||||
<header className="htm-anim">
|
||||
<p className="htm-eyebrow">
|
||||
<Trophy size={11} /> Hard Modules
|
||||
</p>
|
||||
<h1 className="htm-title">Pick your challenge</h1>
|
||||
<p className="htm-sub">
|
||||
Tackle the hardest SAT questions. Select a section to begin.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* EBRW Card */}
|
||||
<div
|
||||
className={`htm-card ebrw htm-anim htm-anim-1${selected === "EBRW" ? " selected" : ""}`}
|
||||
onClick={() => toggle("EBRW")}
|
||||
>
|
||||
<CardContent className="z-10 flex items-center justify-center py-16 ">
|
||||
<h1 className="font-satoshi-bold text-2xl text-blue-50">
|
||||
Reading & Writing
|
||||
</h1>
|
||||
</CardContent>
|
||||
<Languages
|
||||
size={250}
|
||||
className="absolute -top-5 -right-10 -rotate-23 text-white opacity-30"
|
||||
/>
|
||||
<WholeWord
|
||||
size={150}
|
||||
className="absolute -top-10 -left-3 rotate-23 text-white opacity-30"
|
||||
/>
|
||||
<Pilcrow
|
||||
size={150}
|
||||
className="absolute -bottom-12 left-8 -rotate-23 text-white opacity-30"
|
||||
/>
|
||||
</Card>
|
||||
<Card
|
||||
onClick={() =>
|
||||
setSelected((prev) => (prev === "MATH" ? null : "MATH"))
|
||||
}
|
||||
className={`relative cursor-pointer overflow-hidden transition
|
||||
${
|
||||
selected === "MATH"
|
||||
? "ring-2 ring-rose-500 scale-[1.02]"
|
||||
: "hover:scale-[1.01]"
|
||||
}
|
||||
bg-linear-to-br from-rose-400 to-rose-600
|
||||
`}
|
||||
>
|
||||
<CardContent className="z-10 flex items-center justify-center py-16 ">
|
||||
<h1 className="font-satoshi-bold text-2xl text-blue-50">
|
||||
Mathematics
|
||||
</h1>
|
||||
</CardContent>
|
||||
<DecimalsArrowRight
|
||||
size={250}
|
||||
className="absolute -top-5 -right-10 -rotate-23 text-white opacity-30"
|
||||
/>
|
||||
<Superscript
|
||||
size={150}
|
||||
className="absolute -top-10 -left-3 rotate-23 text-white opacity-30"
|
||||
/>
|
||||
<Percent
|
||||
size={120}
|
||||
className="absolute -bottom-5 left-8 -rotate-10 text-white opacity-30"
|
||||
/>
|
||||
</Card>
|
||||
</section>
|
||||
{selected && (
|
||||
<div className=" bottom-6 left-0 right-0 flex justify-center z-50">
|
||||
<button
|
||||
onClick={() => {
|
||||
handleStartModule();
|
||||
}}
|
||||
className="rounded-2xl px-10 py-4 font-satoshi-bold text-lg
|
||||
bg-linear-to-br from-purple-500 to-purple-600 text-white
|
||||
shadow-xl animate-in slide-in-from-bottom-4"
|
||||
>
|
||||
Start Test
|
||||
</button>
|
||||
{/* Background icons */}
|
||||
<div className="htm-card-icons">
|
||||
<Languages
|
||||
size={220}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: -20,
|
||||
right: -30,
|
||||
transform: "rotate(-20deg)",
|
||||
color: "white",
|
||||
opacity: 0.12,
|
||||
}}
|
||||
/>
|
||||
<WholeWord
|
||||
size={130}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: -15,
|
||||
left: -10,
|
||||
transform: "rotate(15deg)",
|
||||
color: "white",
|
||||
opacity: 0.1,
|
||||
}}
|
||||
/>
|
||||
<Pilcrow
|
||||
size={110}
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: -20,
|
||||
left: 20,
|
||||
transform: "rotate(-18deg)",
|
||||
color: "white",
|
||||
opacity: 0.1,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Check */}
|
||||
<div className="htm-check-badge">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path
|
||||
d="M2.5 7L5.5 10L11.5 4"
|
||||
stroke="white"
|
||||
strokeWidth="2.2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="htm-card-body">
|
||||
<span className="htm-card-tag">Section 1</span>
|
||||
<h2 className="htm-card-name">
|
||||
Reading &
|
||||
<br />
|
||||
Writing
|
||||
</h2>
|
||||
<p className="htm-card-desc">
|
||||
Grammar, vocabulary, comprehension & evidence-based analysis
|
||||
</p>
|
||||
<div className="htm-stat-row">
|
||||
<span className="htm-stat-pill">📖 27 Questions</span>
|
||||
<span className="htm-stat-pill">⏱️ 32 min</span>
|
||||
<span className="htm-stat-pill">🔥 Hard tier</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
{/* MATH Card */}
|
||||
<div
|
||||
className={`htm-card math htm-anim htm-anim-2${selected === "MATH" ? " selected" : ""}`}
|
||||
onClick={() => toggle("MATH")}
|
||||
>
|
||||
{/* Background icons */}
|
||||
<div className="htm-card-icons">
|
||||
<DecimalsArrowRight
|
||||
size={220}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: -20,
|
||||
right: -30,
|
||||
transform: "rotate(-20deg)",
|
||||
color: "white",
|
||||
opacity: 0.12,
|
||||
}}
|
||||
/>
|
||||
<Superscript
|
||||
size={130}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: -15,
|
||||
left: -10,
|
||||
transform: "rotate(15deg)",
|
||||
color: "white",
|
||||
opacity: 0.1,
|
||||
}}
|
||||
/>
|
||||
<Percent
|
||||
size={110}
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: -15,
|
||||
left: 20,
|
||||
transform: "rotate(-10deg)",
|
||||
color: "white",
|
||||
opacity: 0.1,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Check */}
|
||||
<div className="htm-check-badge">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path
|
||||
d="M2.5 7L5.5 10L11.5 4"
|
||||
stroke="white"
|
||||
strokeWidth="2.2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="htm-card-body">
|
||||
<span className="htm-card-tag">Section 2</span>
|
||||
<h2 className="htm-card-name">Mathematics</h2>
|
||||
<p className="htm-card-desc">
|
||||
Algebra, advanced math, geometry & data analysis under
|
||||
pressure
|
||||
</p>
|
||||
<div className="htm-stat-row">
|
||||
<span className="htm-stat-pill">🔢 22 Questions</span>
|
||||
<span className="htm-stat-pill">⏱️ 35 min</span>
|
||||
<span className="htm-stat-pill">🔥 Hard tier</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA bar */}
|
||||
<div className={`htm-cta-bar${!selected ? " hidden" : ""}`}>
|
||||
<div className="htm-cta-inner">
|
||||
<button className="htm-start-btn" onClick={handleStartModule}>
|
||||
🏆 Start{" "}
|
||||
{selected === "EBRW"
|
||||
? "Reading & Writing"
|
||||
: selected === "MATH"
|
||||
? "Mathematics"
|
||||
: ""}{" "}
|
||||
Module
|
||||
</button>
|
||||
<p className="htm-start-label">
|
||||
Tap again to <span>deselect</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { api } from "../../../utils/api";
|
||||
import { useAuthStore } from "../../../stores/authStore";
|
||||
import type { PracticeSheet } from "../../../types/sheet";
|
||||
@ -10,223 +10,456 @@ import {
|
||||
CarouselItem,
|
||||
type CarouselApi,
|
||||
} from "../../../components/ui/carousel";
|
||||
import { Button } from "../../../components/ui/button";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useExamConfigStore } from "../../../stores/useExamConfigStore";
|
||||
|
||||
// ─── Shared background dots (same subtle config as rest of app) ───────────────
|
||||
const DOTS = [
|
||||
{ size: 10, color: "#f97316", top: "8%", left: "5%", delay: "0s" },
|
||||
{ size: 7, color: "#a855f7", top: "28%", left: "2%", delay: "1.2s" },
|
||||
{ size: 9, color: "#22c55e", top: "60%", left: "4%", delay: "0.6s" },
|
||||
{ size: 12, color: "#3b82f6", top: "12%", right: "4%", delay: "1.8s" },
|
||||
{ size: 7, color: "#f43f5e", top: "45%", right: "3%", delay: "0.9s" },
|
||||
{ size: 9, color: "#eab308", top: "75%", right: "6%", 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');
|
||||
|
||||
.pt-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ── Blobs ── */
|
||||
.pt-blob { position: fixed; pointer-events: none; z-index: 0; filter: blur(48px); opacity: 0.35; }
|
||||
.pt-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:ptWobble1 14s ease-in-out infinite; }
|
||||
.pt-blob-2 { width:190px;height:190px;background:#a5f3c0;bottom:-50px;left:6%;border-radius:40% 60% 30% 70%/60% 40% 60% 40%;animation:ptWobble2 16s ease-in-out infinite; }
|
||||
.pt-blob-3 { width:210px;height:210px;background:#fbcfe8;top:15%;right:-60px;border-radius:70% 30% 50% 50%/40% 60% 40% 60%;animation:ptWobble1 18s ease-in-out infinite reverse; }
|
||||
.pt-blob-4 { width:150px;height:150px;background:#bfdbfe;bottom:12%;right:2%;border-radius:50% 50% 30% 70%/60% 40% 60% 40%;animation:ptWobble2 12s ease-in-out infinite; }
|
||||
|
||||
@keyframes ptWobble1 {
|
||||
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 ptWobble2 {
|
||||
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);}
|
||||
}
|
||||
|
||||
/* ── Floating dots ── */
|
||||
.pt-dot { position:fixed;border-radius:50%;pointer-events:none;z-index:0;opacity:0.3;animation:ptFloat 7s ease-in-out infinite; }
|
||||
@keyframes ptFloat {
|
||||
0%,100%{transform:translateY(0) rotate(0deg);}
|
||||
50%{transform:translateY(-12px) rotate(180deg);}
|
||||
}
|
||||
|
||||
/* ── Inner scroll container ── */
|
||||
.pt-inner {
|
||||
position: relative; z-index: 1;
|
||||
max-width: 580px; margin: 0 auto;
|
||||
padding: 2rem 1.25rem 4rem;
|
||||
display: flex; flex-direction: column; gap: 1.25rem;
|
||||
}
|
||||
|
||||
/* ── Pop-in animation ── */
|
||||
@keyframes ptPopIn {
|
||||
from { opacity:0; transform: scale(0.92) translateY(12px); }
|
||||
to { opacity:1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
.pt-anim { animation: ptPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
|
||||
.pt-anim-1 { animation-delay: 0.05s; }
|
||||
.pt-anim-2 { animation-delay: 0.1s; }
|
||||
.pt-anim-3 { animation-delay: 0.15s; }
|
||||
.pt-anim-4 { animation-delay: 0.2s; }
|
||||
.pt-anim-5 { animation-delay: 0.25s; }
|
||||
|
||||
/* ── Header ── */
|
||||
.pt-header { animation: ptPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
|
||||
.pt-eyebrow {
|
||||
font-size: 0.65rem; font-weight: 800; letter-spacing: 0.16em;
|
||||
text-transform: uppercase; color: #a855f7; margin-bottom: 0.3rem;
|
||||
}
|
||||
.pt-title {
|
||||
font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 900;
|
||||
color: #1e1b4b; letter-spacing: -0.02em; line-height: 1.15;
|
||||
}
|
||||
.pt-desc {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.9rem; font-weight: 600; color: #9ca3af; margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
/* ── White card base ── */
|
||||
.pt-card {
|
||||
background: white; border: 2.5px solid #f3f4f6; border-radius: 24px;
|
||||
padding: 1.25rem 1.5rem;
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.04);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ── Stats row ── */
|
||||
.pt-stats-row {
|
||||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
|
||||
}
|
||||
.pt-stat {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
gap: 0.5rem; padding: 0.85rem 0.5rem;
|
||||
background: white; border: 2.5px solid #f3f4f6; border-radius: 20px;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.04);
|
||||
}
|
||||
.pt-stat-icon {
|
||||
width: 44px; height: 44px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.pt-stat-icon.cyan { background: #cffafe; }
|
||||
.pt-stat-icon.purple { background: #f3e8ff; }
|
||||
.pt-stat-icon.amber { background: #fef3c7; }
|
||||
.pt-stat-value { font-size: 1.4rem; font-weight: 900; color: #1e1b4b; line-height: 1; }
|
||||
.pt-stat-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9ca3af; }
|
||||
|
||||
/* ── Loading skeleton ── */
|
||||
.pt-loading {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
gap: 0.75rem; padding: 2rem;
|
||||
background: white; border: 2.5px solid #f3f4f6; border-radius: 24px;
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.04);
|
||||
}
|
||||
.pt-spinner { animation: ptSpin 0.8s linear infinite; }
|
||||
@keyframes ptSpin { to { transform: rotate(360deg); } }
|
||||
.pt-loading-text {
|
||||
font-size: 0.85rem; font-weight: 700; color: #9ca3af;
|
||||
}
|
||||
|
||||
/* ── Module carousel card ── */
|
||||
.pt-module-card {
|
||||
background: white; border: 2.5px solid #f3f4f6; border-radius: 24px;
|
||||
padding: 1.25rem 1.5rem;
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.04);
|
||||
display: flex; flex-direction: column; gap: 1rem;
|
||||
}
|
||||
.pt-module-header {
|
||||
display: flex; align-items: center; gap: 0.6rem;
|
||||
}
|
||||
.pt-section-badge {
|
||||
font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em;
|
||||
text-transform: uppercase; color: #a855f7;
|
||||
background: #f3e8ff; border-radius: 100px; padding: 0.25rem 0.7rem;
|
||||
}
|
||||
.pt-module-title {
|
||||
font-size: 0.95rem; font-weight: 900; color: #1e1b4b; line-height: 1.3;
|
||||
}
|
||||
.pt-module-stats {
|
||||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem;
|
||||
}
|
||||
.pt-module-stat {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
|
||||
padding: 0.7rem 0.4rem;
|
||||
border: 2px solid #f3f4f6; border-radius: 16px;
|
||||
background: #fafafa;
|
||||
}
|
||||
.pt-module-stat-icon {
|
||||
width: 36px; height: 36px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.pt-module-stat-icon.cyan { background: #cffafe; }
|
||||
.pt-module-stat-icon.lime { background: #d9f99d; }
|
||||
.pt-module-stat-icon.amber { background: #fef3c7; }
|
||||
.pt-module-stat-value { font-size: 1rem; font-weight: 900; color: #1e1b4b; line-height: 1; }
|
||||
.pt-module-stat-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9ca3af; }
|
||||
|
||||
/* ── Dot indicator ── */
|
||||
.pt-dots {
|
||||
display: flex; align-items: center; justify-content: center; gap: 0.4rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.pt-dot-ind {
|
||||
border-radius: 100px; height: 7px;
|
||||
transition: width 0.3s ease, background 0.3s ease;
|
||||
}
|
||||
.pt-dot-ind.active { width: 20px; background: #a855f7; }
|
||||
.pt-dot-ind.inactive { width: 7px; background: #e5e7eb; }
|
||||
|
||||
/* ── Tip card ── */
|
||||
.pt-tip {
|
||||
display: flex; align-items: flex-start; gap: 0.75rem;
|
||||
}
|
||||
.pt-tip-emoji { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
|
||||
.pt-tip-text { font-size: 0.88rem; font-weight: 700; color: #374151; line-height: 1.5; }
|
||||
|
||||
/* ── Start button ── */
|
||||
.pt-start-btn {
|
||||
width: 100%;
|
||||
background: #f97316; color: white; border: none; border-radius: 100px;
|
||||
padding: 1.1rem; font-family: 'Nunito', sans-serif;
|
||||
font-size: 1rem; font-weight: 800; cursor: pointer;
|
||||
box-shadow: 0 6px 0 #c2560e, 0 8px 20px rgba(249,115,22,0.25);
|
||||
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
||||
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
|
||||
}
|
||||
.pt-start-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 0 #c2560e,0 12px 24px rgba(249,115,22,0.3); }
|
||||
.pt-start-btn:active:not(:disabled) { transform:translateY(3px); box-shadow:0 3px 0 #c2560e,0 4px 12px rgba(249,115,22,0.2); }
|
||||
.pt-start-btn:disabled { opacity:0.6; cursor:not-allowed; box-shadow:none; }
|
||||
|
||||
/* ── Error card ── */
|
||||
.pt-error {
|
||||
background: #fff5f5; border: 2.5px solid #fecaca; border-radius: 24px;
|
||||
padding: 1.5rem; text-align: center;
|
||||
font-size: 0.9rem; font-weight: 700; color: #ef4444;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Pretest = () => {
|
||||
const { setSheetId, setMode, storeDuration, setQuestionCount } =
|
||||
useExamConfigStore();
|
||||
const user = useAuthStore((state) => state.user);
|
||||
const { sheetId } = useParams<{ sheetId: string }>();
|
||||
const [carouselApi, setCarouselApi] = useState<CarouselApi>();
|
||||
const [current, setCurrent] = useState(0);
|
||||
const [count, setCount] = useState(0);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [carouselApi, setCarouselApi] = useState<CarouselApi>();
|
||||
const [current, setCurrent] = useState(0);
|
||||
const [practiceSheet, setPracticeSheet] = useState<PracticeSheet | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
function handleStartTest(sheetId: string) {
|
||||
if (!sheetId) {
|
||||
console.error("Sheet ID is required to start the test.");
|
||||
return;
|
||||
}
|
||||
|
||||
setSheetId(sheetId);
|
||||
function handleStartTest(id: string) {
|
||||
if (!id) return;
|
||||
setSheetId(id);
|
||||
setMode("SIMULATION");
|
||||
storeDuration(practiceSheet?.time_limit ?? 0);
|
||||
setQuestionCount(2);
|
||||
|
||||
navigate(`/student/practice/${sheetId}/test`, { replace: true });
|
||||
navigate(`/student/practice/${id}/test`, { replace: true });
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!user) return;
|
||||
async function fetchPracticeSheet(sheetId: string) {
|
||||
async function fetchSheet(id: string) {
|
||||
const authStorage = localStorage.getItem("auth-storage");
|
||||
if (!authStorage) {
|
||||
console.error("authStorage not found in local storage");
|
||||
return;
|
||||
}
|
||||
if (!authStorage) return;
|
||||
const {
|
||||
state: { token },
|
||||
} = JSON.parse(authStorage);
|
||||
if (!token) {
|
||||
console.error("Token not found in authStorage");
|
||||
return;
|
||||
}
|
||||
const data = await api.getPracticeSheetById(token, sheetId);
|
||||
if (!token) return;
|
||||
const data = await api.getPracticeSheetById(token, id);
|
||||
setPracticeSheet(data);
|
||||
}
|
||||
fetchPracticeSheet(sheetId!);
|
||||
}, [sheetId]);
|
||||
fetchSheet(sheetId!);
|
||||
}, [sheetId, user]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!carouselApi) {
|
||||
return;
|
||||
}
|
||||
setCount(carouselApi.scrollSnapList().length);
|
||||
if (!carouselApi) return;
|
||||
setCurrent(carouselApi.selectedScrollSnap() + 1);
|
||||
carouselApi.on("select", () => {
|
||||
setCurrent(carouselApi.selectedScrollSnap() + 1);
|
||||
});
|
||||
carouselApi.on("select", () =>
|
||||
setCurrent(carouselApi.selectedScrollSnap() + 1),
|
||||
);
|
||||
}, [carouselApi]);
|
||||
|
||||
return (
|
||||
<div className="p-8 space-y-6">
|
||||
<header className="space-y-2">
|
||||
<h1 className="text-4xl font-satoshi-bold">{practiceSheet?.title}</h1>
|
||||
<p className="text-lg font-satoshi text-gray-700">
|
||||
{practiceSheet?.description}
|
||||
</p>
|
||||
</header>
|
||||
{practiceSheet ? (
|
||||
<section className="flex flex-col gap-6 rounded-4xl bg-white border p-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<Clock size={65} color="black" />
|
||||
<div>
|
||||
<h3 className="text-3xl font-satoshi-bold ">
|
||||
{practiceSheet?.time_limit}
|
||||
</h3>
|
||||
<p className="text-xl font-satoshi ">Minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Layers size={65} color="black" />
|
||||
<div>
|
||||
<h3 className="text-3xl font-satoshi-bold ">
|
||||
{practiceSheet?.modules.length}
|
||||
</h3>
|
||||
<p className="text-xl font-satoshi">Modules</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<CircleQuestionMark size={65} color="black" />
|
||||
<div>
|
||||
<h3 className="text-3xl font-satoshi-bold ">
|
||||
{practiceSheet?.questions_count}
|
||||
</h3>
|
||||
<p className="text-xl font-satoshi ">Questions</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
) : (
|
||||
<section className="flex flex-col items-center gap-6 rounded-4xl bg-white border p-8">
|
||||
<div>
|
||||
<Loader size={30} className="transition animate-spin" />
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
<Carousel className="" setApi={setCarouselApi}>
|
||||
<CarouselContent>
|
||||
{practiceSheet ? (
|
||||
practiceSheet.modules.length > 0 ? (
|
||||
practiceSheet.modules.map((module, index) => (
|
||||
<CarouselItem key={index} className="">
|
||||
<section className="flex flex-col gap-6 rounded-4xl p-8 bg-white border">
|
||||
<h1 className="text-2xl font-satoshi-bold">
|
||||
Section {Math.floor(index / 2) + 1}
|
||||
</h1>
|
||||
<p className="text-lg font-satoshi text-gray-700">
|
||||
{module.title}
|
||||
</p>
|
||||
<section className="grid grid-cols-3 gap-6 sm:grid-cols-3">
|
||||
<div className="flex flex-col justify-center items-center gap-4">
|
||||
<div className="w-fit bg-cyan-100 p-2 rounded-full">
|
||||
<Clock size={30} color="oklch(60.9% 0.126 221.723)" />
|
||||
</div>
|
||||
<div className="flex flex-col justify-center items-center">
|
||||
<h3 className="text-xl font-satoshi-bold ">
|
||||
{module.duration}
|
||||
</h3>
|
||||
<p className="text-md font-satoshi ">Minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center items-center gap-4">
|
||||
<div className="w-fit bg-lime-100 p-2 rounded-full">
|
||||
<CircleQuestionMark
|
||||
size={30}
|
||||
color="oklch(64.8% 0.2 131.684)"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center items-center">
|
||||
<h3 className="text-xl font-satoshi-bold ">
|
||||
{module.questions.length}
|
||||
</h3>
|
||||
<p className="text-md font-satoshi">Questions</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center items-center gap-4">
|
||||
<div className="w-fit bg-amber-100 p-2 rounded-full">
|
||||
<Tag size={30} color="oklch(66.6% 0.179 58.318)" />
|
||||
</div>
|
||||
<div className="flex flex-col justify-center items-center">
|
||||
<h3 className="text-xl font-satoshi-bold ">
|
||||
{module.section}
|
||||
</h3>
|
||||
<p className="text-md font-satoshi">Type</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</CarouselItem>
|
||||
))
|
||||
) : (
|
||||
<CarouselItem>
|
||||
<section className="w-full rounded-4xl p-8 bg-red-100 border border-red-300">
|
||||
<h1 className="text-lg text-center font-satoshi-bold text-red-500">
|
||||
No modules available.
|
||||
</h1>
|
||||
</section>
|
||||
</CarouselItem>
|
||||
)
|
||||
) : (
|
||||
<CarouselItem>
|
||||
<section className="flex flex-col w-full rounded-4xl p-8 bg-yellow-100 border items-center justify-between gap-4">
|
||||
<div>
|
||||
<Loader size={30} className="transition animate-spin" />
|
||||
</div>
|
||||
<h1 className="text-center text-xl font-satoshi-bold text-yellow-500">
|
||||
Loading...
|
||||
</h1>
|
||||
</section>
|
||||
</CarouselItem>
|
||||
)}
|
||||
</CarouselContent>
|
||||
<div className="pt-screen">
|
||||
<style>{STYLES}</style>
|
||||
|
||||
<div className="flex justify-center mt-4">
|
||||
{practiceSheet?.modules.map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`w-2 h-2 mx-1 rounded-full ${
|
||||
index + 1 === current ? "bg-indigo-500" : "bg-gray-300"
|
||||
}`}
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
</Carousel>
|
||||
<section className="w-full rounded-4xl p-8 bg-white border flex flex-col justify-between gap-4">
|
||||
<h1 className="text-lg font-satoshi-bold ">
|
||||
This practice sheet will help you prepare for the SAT. Take your time
|
||||
and do your best!
|
||||
</h1>
|
||||
</section>
|
||||
<Button
|
||||
onClick={() => handleStartTest(practiceSheet?.id!)}
|
||||
variant="outline"
|
||||
className="font-satoshi rounded-3xl w-full text-lg py-8 bg-linear-to-br from-indigo-500 to-indigo-600 text-white active:bg-linear-to-br active:from-indigo-600 active:to-indigo-700 active:translate-y-1"
|
||||
disabled={!practiceSheet}
|
||||
>
|
||||
{/* Blobs */}
|
||||
<div className="pt-blob pt-blob-1" />
|
||||
<div className="pt-blob pt-blob-2" />
|
||||
<div className="pt-blob pt-blob-3" />
|
||||
<div className="pt-blob pt-blob-4" />
|
||||
|
||||
{/* Floating dots */}
|
||||
{DOTS.map((d, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="pt-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="pt-inner">
|
||||
{/* ── Header ── */}
|
||||
<header className="pt-header">
|
||||
<p className="pt-eyebrow">📋 Practice Sheet</p>
|
||||
{practiceSheet ? (
|
||||
<>
|
||||
<h1 className="pt-title">{practiceSheet.title}</h1>
|
||||
<p className="pt-desc">{practiceSheet.description}</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
height: "2rem",
|
||||
width: "70%",
|
||||
background: "#f3f4f6",
|
||||
borderRadius: 8,
|
||||
marginBottom: "0.5rem",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
height: "1rem",
|
||||
width: "50%",
|
||||
background: "#f3f4f6",
|
||||
borderRadius: 8,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{/* ── At-a-glance stats ── */}
|
||||
{practiceSheet ? (
|
||||
"Start Test"
|
||||
<div className="pt-stats-row pt-anim pt-anim-1">
|
||||
<div className="pt-stat">
|
||||
<div className="pt-stat-icon cyan">
|
||||
<Clock size={22} color="#0891b2" />
|
||||
</div>
|
||||
<span className="pt-stat-value">{practiceSheet.time_limit}</span>
|
||||
<span className="pt-stat-label">Minutes</span>
|
||||
</div>
|
||||
<div className="pt-stat">
|
||||
<div className="pt-stat-icon purple">
|
||||
<Layers size={22} color="#9333ea" />
|
||||
</div>
|
||||
<span className="pt-stat-value">
|
||||
{practiceSheet.modules.length}
|
||||
</span>
|
||||
<span className="pt-stat-label">Modules</span>
|
||||
</div>
|
||||
<div className="pt-stat">
|
||||
<div className="pt-stat-icon amber">
|
||||
<CircleQuestionMark size={22} color="#d97706" />
|
||||
</div>
|
||||
<span className="pt-stat-value">
|
||||
{practiceSheet.questions_count}
|
||||
</span>
|
||||
<span className="pt-stat-label">Questions</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<Loader size={60} className="transition animate-spin" />
|
||||
<div className="pt-loading pt-anim pt-anim-1">
|
||||
<Loader size={26} className="pt-spinner" color="#a855f7" />
|
||||
<p className="pt-loading-text">Loading sheet details...</p>
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* ── Module carousel ── */}
|
||||
<div className="pt-anim pt-anim-2">
|
||||
<Carousel setApi={setCarouselApi}>
|
||||
<CarouselContent>
|
||||
{practiceSheet ? (
|
||||
practiceSheet.modules.length > 0 ? (
|
||||
practiceSheet.modules.map((module, index) => (
|
||||
<CarouselItem key={index}>
|
||||
<div className="pt-module-card">
|
||||
<div className="pt-module-header">
|
||||
<span className="pt-section-badge">
|
||||
Section {Math.floor(index / 2) + 1}
|
||||
</span>
|
||||
</div>
|
||||
<p className="pt-module-title">{module.title}</p>
|
||||
<div className="pt-module-stats">
|
||||
<div className="pt-module-stat">
|
||||
<div className="pt-module-stat-icon cyan">
|
||||
<Clock size={18} color="#0891b2" />
|
||||
</div>
|
||||
<span className="pt-module-stat-value">
|
||||
{module.duration}
|
||||
</span>
|
||||
<span className="pt-module-stat-label">Min</span>
|
||||
</div>
|
||||
<div className="pt-module-stat">
|
||||
<div className="pt-module-stat-icon lime">
|
||||
<CircleQuestionMark size={18} color="#65a30d" />
|
||||
</div>
|
||||
<span className="pt-module-stat-value">
|
||||
{module.questions.length}
|
||||
</span>
|
||||
<span className="pt-module-stat-label">
|
||||
Questions
|
||||
</span>
|
||||
</div>
|
||||
<div className="pt-module-stat">
|
||||
<div className="pt-module-stat-icon amber">
|
||||
<Tag size={18} color="#d97706" />
|
||||
</div>
|
||||
<span
|
||||
className="pt-module-stat-value"
|
||||
style={{ fontSize: "0.85rem" }}
|
||||
>
|
||||
{module.section}
|
||||
</span>
|
||||
<span className="pt-module-stat-label">Type</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))
|
||||
) : (
|
||||
<CarouselItem>
|
||||
<div className="pt-error">
|
||||
😕 No modules available for this sheet.
|
||||
</div>
|
||||
</CarouselItem>
|
||||
)
|
||||
) : (
|
||||
<CarouselItem>
|
||||
<div className="pt-loading">
|
||||
<Loader size={26} className="pt-spinner" color="#a855f7" />
|
||||
<p className="pt-loading-text">Loading modules...</p>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
)}
|
||||
</CarouselContent>
|
||||
|
||||
{/* Dot indicator */}
|
||||
{practiceSheet && practiceSheet.modules.length > 1 && (
|
||||
<div className="pt-dots">
|
||||
{practiceSheet.modules.map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`pt-dot-ind ${i + 1 === current ? "active" : "inactive"}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Carousel>
|
||||
</div>
|
||||
|
||||
{/* ── Encouragement tip ── */}
|
||||
<div className="pt-card pt-anim pt-anim-3">
|
||||
<div className="pt-tip">
|
||||
<span className="pt-tip-emoji">💪</span>
|
||||
<p className="pt-tip-text">
|
||||
Take your time, read each question carefully, and do your best.
|
||||
Every practice run brings you closer to your goal!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Start button ── */}
|
||||
<button
|
||||
className="pt-start-btn pt-anim pt-anim-4"
|
||||
onClick={() => handleStartTest(practiceSheet?.id!)}
|
||||
disabled={!practiceSheet}
|
||||
>
|
||||
{practiceSheet ? (
|
||||
<>Start Test →</>
|
||||
) : (
|
||||
<Loader size={20} className="pt-spinner" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,165 +1,390 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useResults } from "../../../stores/useResults";
|
||||
import { LucideArrowLeft } from "lucide-react";
|
||||
import {
|
||||
Card,
|
||||
CardAction,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../../../components/ui/card";
|
||||
import { CircularLevelProgress } from "../../../components/CircularLevelProgress";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useExamConfigStore } from "../../../stores/useExamConfigStore";
|
||||
|
||||
const XPGainedCard = ({
|
||||
results,
|
||||
}: {
|
||||
results?: {
|
||||
xp_gained: number;
|
||||
total_xp: number;
|
||||
current_level_start: number;
|
||||
next_level_threshold: number;
|
||||
current_level: number;
|
||||
};
|
||||
}) => {
|
||||
const [displayXP, setDisplayXP] = useState(0);
|
||||
// ─── Shared styles injected once ─────────────────────────────────────────────
|
||||
const STYLES = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600&display=swap');
|
||||
|
||||
.results-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
padding: 0 0 3rem 0;
|
||||
}
|
||||
|
||||
/* ── Blobs ── */
|
||||
.r-blob { position: fixed; pointer-events: none; z-index: 0; }
|
||||
.r-blob-1 {
|
||||
width: 260px; height: 260px; background: #fde68a;
|
||||
top: -80px; left: -80px;
|
||||
border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
|
||||
animation: rWobble1 6s ease-in-out infinite;
|
||||
}
|
||||
.r-blob-2 {
|
||||
width: 200px; height: 200px; background: #a5f3c0;
|
||||
bottom: -60px; left: 8%;
|
||||
border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%;
|
||||
animation: rWobble2 7s ease-in-out infinite;
|
||||
}
|
||||
.r-blob-3 {
|
||||
width: 220px; height: 220px; background: #fbcfe8;
|
||||
top: 12%; right: -60px;
|
||||
border-radius: 70% 30% 50% 50% / 40% 60% 40% 60%;
|
||||
animation: rWobble1 8s ease-in-out infinite reverse;
|
||||
}
|
||||
.r-blob-4 {
|
||||
width: 160px; height: 160px; background: #bfdbfe;
|
||||
bottom: 15%; right: 3%;
|
||||
border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%;
|
||||
animation: rWobble2 5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes rWobble1 {
|
||||
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 rWobble2 {
|
||||
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); }
|
||||
}
|
||||
|
||||
/* ── Floating dots ── */
|
||||
.r-dot {
|
||||
position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
|
||||
animation: rFloat 4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes rFloat {
|
||||
0%,100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-14px) rotate(180deg); }
|
||||
}
|
||||
|
||||
/* ── Content wrapper ── */
|
||||
.results-inner {
|
||||
position: relative; z-index: 1;
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
padding: 2.5rem 1.5rem 2rem;
|
||||
display: flex; flex-direction: column; gap: 1rem;
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
.results-header {
|
||||
display: flex; align-items: center; gap: 1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
animation: rPopIn 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||
}
|
||||
.results-back-btn {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 40px; height: 40px; border-radius: 50%;
|
||||
border: 2px solid #c084fc;
|
||||
background: linear-gradient(135deg, #c084fc, #a855f7);
|
||||
cursor: pointer; flex-shrink: 0;
|
||||
box-shadow: 0 4px 0 #7e22ce55;
|
||||
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
.results-back-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #7e22ce55; }
|
||||
.results-back-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #7e22ce55; }
|
||||
.results-title {
|
||||
font-size: 2rem; font-weight: 900; color: #1e1b4b;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
/* ── Mode badge ── */
|
||||
.mode-badge {
|
||||
display: flex; align-items: center; gap: 0.6rem;
|
||||
background: white; border: 2.5px solid #e9d5ff;
|
||||
border-radius: 16px; padding: 0.75rem 1.1rem;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
animation: rPopIn 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.05s both;
|
||||
}
|
||||
.mode-badge-text { font-size: 0.85rem; font-weight: 700; color: #7e22ce; }
|
||||
.mode-badge-sub { font-size: 0.78rem; font-weight: 600; color: #a78bfa; }
|
||||
|
||||
/* ── Hero congratulations banner ── */
|
||||
.congrats-banner {
|
||||
background: white;
|
||||
border: 2.5px solid #f3f4f6;
|
||||
border-radius: 24px;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.05);
|
||||
animation: rPopIn 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.1s both;
|
||||
display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
|
||||
}
|
||||
.congrats-emoji {
|
||||
font-size: 3rem;
|
||||
animation: rBounce 2s ease-in-out infinite;
|
||||
display: block; margin-bottom: 0.25rem;
|
||||
}
|
||||
@keyframes rBounce {
|
||||
0%,100% { transform: translateY(0) rotate(-4deg); }
|
||||
50% { transform: translateY(-10px) rotate(4deg); }
|
||||
}
|
||||
.congrats-title {
|
||||
font-size: 1.4rem; font-weight: 900; color: #1e1b4b;
|
||||
}
|
||||
.congrats-title span { color: #f97316; }
|
||||
.congrats-sub {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.85rem; font-weight: 600; color: #9ca3af;
|
||||
}
|
||||
|
||||
/* ── XP ring section ── */
|
||||
.xp-section {
|
||||
display: flex; justify-content: center;
|
||||
animation: rPopIn 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.15s both;
|
||||
}
|
||||
|
||||
/* ── Stat cards grid ── */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
animation: rPopIn 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
|
||||
}
|
||||
.stat-card {
|
||||
background: white;
|
||||
border: 2.5px solid #f3f4f6;
|
||||
border-radius: 20px;
|
||||
padding: 1.1rem 1rem;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
|
||||
display: flex; flex-direction: column; gap: 0.2rem;
|
||||
}
|
||||
.stat-card-label {
|
||||
font-size: 0.65rem; font-weight: 700;
|
||||
letter-spacing: 0.12em; text-transform: uppercase;
|
||||
color: #9ca3af;
|
||||
display: flex; align-items: center; gap: 0.35rem;
|
||||
}
|
||||
.stat-card-value {
|
||||
font-size: 1.9rem; font-weight: 900; color: #1e1b4b;
|
||||
line-height: 1;
|
||||
}
|
||||
.stat-card-sub {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.75rem; font-weight: 600; color: #d1d5db;
|
||||
}
|
||||
/* Accent colours per card */
|
||||
.stat-card.orange { border-color: #fed7aa; }
|
||||
.stat-card.orange .stat-card-value { color: #f97316; }
|
||||
.stat-card.green { border-color: #bbf7d0; }
|
||||
.stat-card.green .stat-card-value { color: #16a34a; }
|
||||
.stat-card.purple { border-color: #e9d5ff; }
|
||||
.stat-card.purple .stat-card-value { color: #9333ea; }
|
||||
.stat-card.blue { border-color: #bfdbfe; }
|
||||
.stat-card.blue .stat-card-value { color: #2563eb; }
|
||||
|
||||
/* ── Improvement tip card ── */
|
||||
.tip-card {
|
||||
background: white;
|
||||
border: 2.5px solid #f3f4f6;
|
||||
border-radius: 20px;
|
||||
padding: 1.1rem 1.25rem;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
|
||||
animation: rPopIn 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.25s both;
|
||||
}
|
||||
.tip-card-header {
|
||||
display: flex; align-items: center; gap: 0.5rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
.tip-card-title {
|
||||
font-size: 0.95rem; font-weight: 900; color: #1e1b4b;
|
||||
}
|
||||
.tip-chips {
|
||||
display: flex; flex-wrap: wrap; gap: 0.5rem;
|
||||
}
|
||||
.tip-chip {
|
||||
background: #fafafa; border: 2px solid #f3f4f6;
|
||||
border-radius: 100px; padding: 0.35rem 0.85rem;
|
||||
font-size: 0.75rem; font-weight: 700; color: #374151;
|
||||
display: flex; align-items: center; gap: 0.3rem;
|
||||
}
|
||||
|
||||
/* ── Done button ── */
|
||||
.done-btn {
|
||||
width: 100%;
|
||||
background: #f97316;
|
||||
color: white; border: none;
|
||||
border-radius: 100px;
|
||||
padding: 1rem 2.5rem;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 1rem; font-weight: 800;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 6px 0 #c2560e, 0 8px 20px rgba(249,115,22,0.25);
|
||||
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
||||
animation: rPopIn 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.35s both;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
.done-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #c2560e, 0 12px 24px rgba(249,115,22,0.3); }
|
||||
.done-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #c2560e, 0 4px 12px rgba(249,115,22,0.2); }
|
||||
|
||||
@keyframes rPopIn {
|
||||
from { opacity:0; transform: scale(0.88) translateY(12px); }
|
||||
to { opacity:1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
`;
|
||||
|
||||
// ─── Animated counter ─────────────────────────────────────────────────────────
|
||||
function useCountUp(target: number, duration = 900) {
|
||||
const [val, setVal] = useState(0);
|
||||
useEffect(() => {
|
||||
if (!results?.xp_gained) return;
|
||||
|
||||
let startTime: number | null = null;
|
||||
const duration = 800;
|
||||
|
||||
const animate = (time: number) => {
|
||||
if (!startTime) startTime = time;
|
||||
const t = Math.min((time - startTime) / duration, 1);
|
||||
setDisplayXP(Math.floor(t * results.xp_gained));
|
||||
if (t < 1) requestAnimationFrame(animate);
|
||||
if (!target) return;
|
||||
let start: number | null = null;
|
||||
const tick = (t: number) => {
|
||||
if (!start) start = t;
|
||||
const p = Math.min((t - start) / duration, 1);
|
||||
setVal(Math.floor(p * target));
|
||||
if (p < 1) requestAnimationFrame(tick);
|
||||
};
|
||||
requestAnimationFrame(tick);
|
||||
}, [target]);
|
||||
return val;
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}, [results?.xp_gained]);
|
||||
// ─── Floating dots config (shared) ───────────────────────────────────────────
|
||||
const DOTS = [
|
||||
{ size: 12, color: "#f97316", top: "18%", left: "12%", delay: "0s" },
|
||||
{ size: 8, color: "#a855f7", top: "33%", left: "5%", delay: "1s" },
|
||||
{ size: 10, color: "#22c55e", top: "62%", left: "15%", delay: "0.5s" },
|
||||
{ size: 14, color: "#3b82f6", top: "22%", right: "10%", delay: "1.5s" },
|
||||
{ size: 8, color: "#f43f5e", top: "52%", right: "6%", delay: "0.8s" },
|
||||
{ size: 10, color: "#eab308", top: "72%", right: "18%", delay: "0.3s" },
|
||||
];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>XP</CardTitle>
|
||||
<CardDescription>How much did you improve?</CardDescription>
|
||||
<CardAction>
|
||||
<p className="font-satoshi-medium">+{displayXP} XP</p>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── Targeted static results ──────────────────────────────────────────────────
|
||||
// ─── Targeted results ─────────────────────────────────────────────────────────
|
||||
const TARGETED_XP = 15;
|
||||
const TARGETED_SCORE = 15;
|
||||
|
||||
const TargetedResults = ({ onFinish }: { onFinish: () => void }) => {
|
||||
const { userXp, setUserXp } = useExamConfigStore();
|
||||
|
||||
// previousXP is whatever the user had before; we add 15 on top
|
||||
const previousXP = userXp ?? 0;
|
||||
const gainedXP = TARGETED_XP;
|
||||
const totalXP = previousXP;
|
||||
|
||||
// Sync updated XP back into the store
|
||||
useEffect(() => {
|
||||
setUserXp(totalXP);
|
||||
}, []);
|
||||
|
||||
// Simple level bounds — 0–100 per level so progress is visible
|
||||
// Adjust these to match your real level thresholds if needed
|
||||
const levelMinXP = Math.floor(previousXP / 100) * 100;
|
||||
const levelMaxXP = levelMinXP + 100;
|
||||
const currentLevel = Math.floor(previousXP / 100) + 1;
|
||||
|
||||
const [displayXP, setDisplayXP] = useState(0);
|
||||
const displayXP = useCountUp(gainedXP);
|
||||
|
||||
useEffect(() => {
|
||||
let startTime: number | null = null;
|
||||
const duration = 800;
|
||||
const animate = (time: number) => {
|
||||
if (!startTime) startTime = time;
|
||||
const t = Math.min((time - startTime) / duration, 1);
|
||||
setDisplayXP(Math.floor(t * gainedXP));
|
||||
if (t < 1) requestAnimationFrame(animate);
|
||||
};
|
||||
requestAnimationFrame(animate);
|
||||
setUserXp(previousXP);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-gray-50 space-y-6 mx-auto px-8 sm:px-6 lg:px-90 py-10">
|
||||
<header className="flex gap-4">
|
||||
<button
|
||||
onClick={onFinish}
|
||||
className="p-2 rounded-full border border-purple-400 bg-linear-to-br from-purple-400 to-purple-500"
|
||||
>
|
||||
<LucideArrowLeft size={20} color="white" />
|
||||
</button>
|
||||
<h1 className="text-3xl font-satoshi-bold">Results</h1>
|
||||
</header>
|
||||
<div className="results-screen">
|
||||
<style>{STYLES}</style>
|
||||
|
||||
{/* Targeted mode badge */}
|
||||
<div className="flex items-center gap-2 bg-purple-50 border border-purple-200 rounded-2xl px-4 py-3">
|
||||
<span className="text-xl">🎯</span>
|
||||
<p className="font-satoshi text-purple-700 text-sm">
|
||||
<strong>Targeted Mode Complete!</strong> You answered all questions
|
||||
correctly.
|
||||
</p>
|
||||
</div>
|
||||
{/* Blobs */}
|
||||
<div className="r-blob r-blob-1" />
|
||||
<div className="r-blob r-blob-2" />
|
||||
<div className="r-blob r-blob-3" />
|
||||
<div className="r-blob r-blob-4" />
|
||||
|
||||
<section className="w-full flex items-center justify-center">
|
||||
<CircularLevelProgress
|
||||
previousXP={previousXP}
|
||||
gainedXP={gainedXP}
|
||||
levelMinXP={levelMinXP}
|
||||
levelMaxXP={levelMaxXP}
|
||||
level={currentLevel}
|
||||
{/* Dots */}
|
||||
{DOTS.map((d, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="r-dot"
|
||||
style={
|
||||
{
|
||||
width: d.size,
|
||||
height: d.size,
|
||||
background: d.color,
|
||||
top: d.top,
|
||||
left: d.left,
|
||||
right: d.right,
|
||||
animationDelay: d.delay,
|
||||
animationDuration: `${3.5 + i * 0.4}s`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
</section>
|
||||
))}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>XP</CardTitle>
|
||||
<CardDescription>How much did you improve?</CardDescription>
|
||||
<CardAction>
|
||||
<p className="font-satoshi-medium">+{displayXP} XP</p>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<div className="results-inner">
|
||||
{/* Header */}
|
||||
<header className="results-header">
|
||||
<button className="results-back-btn" onClick={onFinish}>
|
||||
<LucideArrowLeft size={18} color="white" />
|
||||
</button>
|
||||
<h1 className="results-title">Results</h1>
|
||||
</header>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Score</CardTitle>
|
||||
<CardDescription>Total score you achieved.</CardDescription>
|
||||
<CardAction>
|
||||
<p className="font-satoshi-medium">{TARGETED_SCORE}</p>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
{/* Mode badge */}
|
||||
<div className="mode-badge">
|
||||
<span style={{ fontSize: "1.4rem" }}>🎯</span>
|
||||
<div>
|
||||
<p className="mode-badge-text">Targeted Mode Complete!</p>
|
||||
<p className="mode-badge-sub">
|
||||
You answered all questions correctly.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Keep it up! 🚀</CardTitle>
|
||||
<CardDescription>
|
||||
Great work getting every question right. Keep practicing to level up
|
||||
faster!
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
{/* Congrats banner */}
|
||||
<div className="congrats-banner">
|
||||
<span className="congrats-emoji">🏆</span>
|
||||
<p className="congrats-title">
|
||||
Nailed it, <span>champ!</span>
|
||||
</p>
|
||||
<p className="congrats-sub">Perfect run — every question down.</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onFinish}
|
||||
className="w-full font-satoshi rounded-3xl text-lg py-4 bg-linear-to-br from-purple-500 to-purple-600 text-white"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</main>
|
||||
{/* XP ring */}
|
||||
<div className="xp-section">
|
||||
<CircularLevelProgress
|
||||
previousXP={previousXP}
|
||||
gainedXP={gainedXP}
|
||||
levelMinXP={levelMinXP}
|
||||
levelMaxXP={levelMaxXP}
|
||||
level={currentLevel}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Stats grid */}
|
||||
<div className="stats-grid">
|
||||
<div className="stat-card orange">
|
||||
<span className="stat-card-label">⚡ XP Gained</span>
|
||||
<span className="stat-card-value">+{displayXP}</span>
|
||||
<span className="stat-card-sub">experience points</span>
|
||||
</div>
|
||||
<div className="stat-card green">
|
||||
<span className="stat-card-label">🎯 Score</span>
|
||||
<span className="stat-card-value">{TARGETED_SCORE}</span>
|
||||
<span className="stat-card-sub">total points</span>
|
||||
</div>
|
||||
<div className="stat-card purple">
|
||||
<span className="stat-card-label">✅ Accuracy</span>
|
||||
<span className="stat-card-value">100%</span>
|
||||
<span className="stat-card-sub">all correct</span>
|
||||
</div>
|
||||
<div className="stat-card blue">
|
||||
<span className="stat-card-label">🔥 Streak</span>
|
||||
<span className="stat-card-value">Perfect</span>
|
||||
<span className="stat-card-sub">no mistakes</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tip card */}
|
||||
<div className="tip-card">
|
||||
<div className="tip-card-header">
|
||||
<span style={{ fontSize: "1.2rem" }}>🚀</span>
|
||||
<span className="tip-card-title">Keep the momentum going!</span>
|
||||
</div>
|
||||
<div className="tip-chips">
|
||||
<div className="tip-chip">📖 Review mistakes</div>
|
||||
<div className="tip-chip">⏱️ Try timed mode</div>
|
||||
<div className="tip-chip">🎯 Next topic</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="done-btn" onClick={onFinish}>
|
||||
Done ✓
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -168,84 +393,149 @@ export const Results = () => {
|
||||
const navigate = useNavigate();
|
||||
const results = useResults((s) => s.results);
|
||||
const clearResults = useResults((s) => s.clearResults);
|
||||
|
||||
const { setUserXp, payload } = useExamConfigStore();
|
||||
const isTargeted = payload?.mode === "TARGETED";
|
||||
|
||||
useEffect(() => {
|
||||
if (results) setUserXp(results?.total_xp);
|
||||
if (results) setUserXp(results.total_xp);
|
||||
}, [results]);
|
||||
|
||||
function handleFinishExam() {
|
||||
useExamConfigStore.getState().clearPayload();
|
||||
clearResults();
|
||||
navigate(`/student/home`);
|
||||
navigate("/student/home");
|
||||
}
|
||||
|
||||
// ── Targeted mode: show static screen ──────────────────────────────────────
|
||||
if (isTargeted) {
|
||||
return <TargetedResults onFinish={handleFinishExam} />;
|
||||
}
|
||||
if (isTargeted) return <TargetedResults onFinish={handleFinishExam} />;
|
||||
|
||||
// ── Standard mode ──────────────────────────────────────────────────────────
|
||||
// ── Standard mode values ───────────────────────────────────────────────────
|
||||
const previousXP = results ? results.total_xp - results.xp_gained : 0;
|
||||
const accuracy =
|
||||
results && results.total_questions > 0
|
||||
? Math.round((results.correct_count / results.total_questions) * 100)
|
||||
: 0;
|
||||
const displayXP = useCountUp(results?.xp_gained ?? 0);
|
||||
const displayScore = useCountUp(results?.score ?? 0);
|
||||
|
||||
// Motivational headline based on accuracy
|
||||
const headline =
|
||||
accuracy >= 90
|
||||
? { emoji: "🏆", text: "Absolutely crushing it!" }
|
||||
: accuracy >= 70
|
||||
? { emoji: "🎉", text: "Solid work, keep going!" }
|
||||
: accuracy >= 50
|
||||
? { emoji: "💪", text: "Good effort, room to grow!" }
|
||||
: { emoji: "📚", text: "Every attempt makes you better!" };
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-gray-50 space-y-6 mx-auto px-8 sm:px-6 lg:px-90 py-10">
|
||||
<header className="flex gap-4">
|
||||
<button
|
||||
onClick={() => handleFinishExam()}
|
||||
className="p-2 rounded-full border border-purple-400 bg-linear-to-br from-purple-400 to-purple-500"
|
||||
>
|
||||
<LucideArrowLeft size={20} color="white" />
|
||||
</button>
|
||||
<h1 className="text-3xl font-satoshi-bold">Results</h1>
|
||||
</header>
|
||||
<section className="w-full flex items-center justify-center">
|
||||
{results && (
|
||||
<CircularLevelProgress
|
||||
previousXP={previousXP}
|
||||
gainedXP={results.xp_gained}
|
||||
levelMinXP={results.current_level_start}
|
||||
levelMaxXP={results.next_level_threshold}
|
||||
level={results.current_level}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
<div className="results-screen">
|
||||
<style>{STYLES}</style>
|
||||
|
||||
<XPGainedCard results={results} />
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Score</CardTitle>
|
||||
<CardDescription>Total score you achieved.</CardDescription>
|
||||
<CardAction>
|
||||
<p className="font-satoshi-medium">{results?.score}</p>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Accuracy</CardTitle>
|
||||
<CardDescription>How many did you answer correct?</CardDescription>
|
||||
<CardAction>
|
||||
<p className="font-satoshi-medium">
|
||||
{results && results.total_questions > 0
|
||||
? `${Math.round(
|
||||
(results.correct_count / results.total_questions) * 100,
|
||||
)}%`
|
||||
: "—"}
|
||||
</p>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>How do you improve?</CardTitle>
|
||||
<CardDescription>
|
||||
Your score is good, but you can do better!
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</main>
|
||||
{/* Blobs */}
|
||||
<div className="r-blob r-blob-1" />
|
||||
<div className="r-blob r-blob-2" />
|
||||
<div className="r-blob r-blob-3" />
|
||||
<div className="r-blob r-blob-4" />
|
||||
|
||||
{/* Dots */}
|
||||
{DOTS.map((d, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="r-dot"
|
||||
style={
|
||||
{
|
||||
width: d.size,
|
||||
height: d.size,
|
||||
background: d.color,
|
||||
top: d.top,
|
||||
left: d.left,
|
||||
right: d.right,
|
||||
animationDelay: d.delay,
|
||||
animationDuration: `${3.5 + i * 0.4}s`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
))}
|
||||
|
||||
<div className="results-inner">
|
||||
{/* Header */}
|
||||
<header className="results-header">
|
||||
<button className="results-back-btn" onClick={handleFinishExam}>
|
||||
<LucideArrowLeft size={18} color="white" />
|
||||
</button>
|
||||
<h1 className="results-title">Results</h1>
|
||||
</header>
|
||||
|
||||
{/* Congrats banner — dynamic */}
|
||||
<div className="congrats-banner">
|
||||
<span className="congrats-emoji">{headline.emoji}</span>
|
||||
<p className="congrats-title">
|
||||
{headline.text.split(" ").slice(0, -1).join(" ")}{" "}
|
||||
<span>{headline.text.split(" ").slice(-1)}</span>
|
||||
</p>
|
||||
<p className="congrats-sub">Here's how you performed today</p>
|
||||
</div>
|
||||
|
||||
{/* XP ring */}
|
||||
<div className="xp-section">
|
||||
{results && (
|
||||
<CircularLevelProgress
|
||||
previousXP={previousXP}
|
||||
gainedXP={results.xp_gained}
|
||||
levelMinXP={results.current_level_start}
|
||||
levelMaxXP={results.next_level_threshold}
|
||||
level={results.current_level}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stats grid */}
|
||||
<div className="stats-grid">
|
||||
<div className="stat-card orange">
|
||||
<span className="stat-card-label">⚡ XP Gained</span>
|
||||
<span className="stat-card-value">+{displayXP}</span>
|
||||
<span className="stat-card-sub">experience points</span>
|
||||
</div>
|
||||
<div className="stat-card green">
|
||||
<span className="stat-card-label">🎯 Score</span>
|
||||
<span className="stat-card-value">{displayScore}</span>
|
||||
<span className="stat-card-sub">total points</span>
|
||||
</div>
|
||||
<div className={`stat-card ${accuracy >= 70 ? "purple" : "blue"}`}>
|
||||
<span className="stat-card-label">✅ Accuracy</span>
|
||||
<span className="stat-card-value">{accuracy}%</span>
|
||||
<span className="stat-card-sub">
|
||||
{results?.correct_count ?? 0} of {results?.total_questions ?? 0}{" "}
|
||||
correct
|
||||
</span>
|
||||
</div>
|
||||
<div className="stat-card blue">
|
||||
<span className="stat-card-label">❌ Missed</span>
|
||||
<span className="stat-card-value">
|
||||
{results ? results.total_questions - results.correct_count : 0}
|
||||
</span>
|
||||
<span className="stat-card-sub">questions to review</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tip card */}
|
||||
<div className="tip-card">
|
||||
<div className="tip-card-header">
|
||||
<span style={{ fontSize: "1.2rem" }}>💡</span>
|
||||
<span className="tip-card-title">How to improve faster</span>
|
||||
</div>
|
||||
<div className="tip-chips">
|
||||
<div className="tip-chip">📖 Review wrong answers</div>
|
||||
<div className="tip-chip">🔁 Retry missed questions</div>
|
||||
<div className="tip-chip">⏱️ Work on pacing</div>
|
||||
<div className="tip-chip">📈 Track your trends</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="done-btn" onClick={handleFinishExam}>
|
||||
Done ✓
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -28,7 +28,7 @@ interface SatExamState {
|
||||
getRemainingTime: () => number;
|
||||
}
|
||||
|
||||
const BREAK_DURATION = 30; // seconds
|
||||
const BREAK_DURATION = 600; // seconds
|
||||
|
||||
export const useSatExam = create<SatExamState>()(
|
||||
persist(
|
||||
|
||||
Reference in New Issue
Block a user