feat(ui): add new ui
This commit is contained in:
shafin-r
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user