course
This commit is contained in:
parent
1480eefbe6
commit
d4d61bfed2
|
|
@ -22,6 +22,13 @@ import { CourseDetailPage } from "../pages/content-management/CourseDetailPage";
|
|||
import { ModuleDetailPage } from "../pages/content-management/ModuleDetailPage";
|
||||
import { AddVideoFlow } from "../pages/content-management/AddVideoFlow";
|
||||
import { AddPracticeFlow } from "../pages/content-management/AddPracticeFlow";
|
||||
import { CourseModuleDetailPage } from "../pages/content-management/CourseModuleDetailPage";
|
||||
import { AttachPracticeFlow } from "../pages/content-management/AttachPracticeFlow";
|
||||
import { AttachProgramPracticeFlow } from "../pages/content-management/AttachProgramPracticeFlow";
|
||||
import { ProgramTypeSelectionPage } from "../pages/content-management/ProgramTypeSelectionPage";
|
||||
import { ProgramDetailPage } from "../pages/content-management/ProgramDetailPage";
|
||||
import { CourseManagementPage } from "../pages/content-management/CourseManagementPage";
|
||||
import { UnitManagementPage } from "../pages/content-management/UnitManagementPage";
|
||||
import { NotFoundPage } from "../pages/NotFoundPage";
|
||||
import { NotificationsPage } from "../pages/notifications/NotificationsPage";
|
||||
import { CreateNotificationPage } from "../pages/notifications/CreateNotificationPage";
|
||||
|
|
@ -154,6 +161,34 @@ export function AppRoutes() {
|
|||
</Route>
|
||||
|
||||
<Route path="/new-content" element={<NewContentPage />} />
|
||||
<Route
|
||||
path="/new-content/courses"
|
||||
element={<ProgramTypeSelectionPage />}
|
||||
/>
|
||||
<Route
|
||||
path="/new-content/courses/:programType"
|
||||
element={<ProgramDetailPage />}
|
||||
/>
|
||||
<Route
|
||||
path="/new-content/courses/:programType/attach-practice"
|
||||
element={<AttachProgramPracticeFlow />}
|
||||
/>
|
||||
<Route
|
||||
path="/new-content/courses/:programType/:courseId/unit/:unitId/module/:moduleId/attach-practice"
|
||||
element={<AttachPracticeFlow />}
|
||||
/>
|
||||
<Route
|
||||
path="/new-content/courses/:programType/:courseId"
|
||||
element={<CourseManagementPage />}
|
||||
/>
|
||||
<Route
|
||||
path="/new-content/courses/:programType/:courseId/:unitId"
|
||||
element={<UnitManagementPage />}
|
||||
/>
|
||||
<Route
|
||||
path="/new-content/courses/:programType/:courseId/:unitId/:moduleId"
|
||||
element={<CourseModuleDetailPage />}
|
||||
/>
|
||||
<Route
|
||||
path="/new-content/learn-english"
|
||||
element={<LearnEnglishPage />}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import * as React from "react"
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||
import { X } from "lucide-react"
|
||||
import { cn } from "../../lib/utils"
|
||||
import * as React from "react";
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||||
import { X } from "lucide-react";
|
||||
import { cn } from "../../lib/utils";
|
||||
|
||||
const Dialog = DialogPrimitive.Root
|
||||
const DialogTrigger = DialogPrimitive.Trigger
|
||||
const DialogPortal = DialogPrimitive.Portal
|
||||
const DialogClose = DialogPrimitive.Close
|
||||
const Dialog = DialogPrimitive.Root;
|
||||
const DialogTrigger = DialogPrimitive.Trigger;
|
||||
const DialogPortal = DialogPrimitive.Portal;
|
||||
const DialogClose = DialogPrimitive.Close;
|
||||
|
||||
const DialogOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||
|
|
@ -20,8 +20,8 @@ const DialogOverlay = React.forwardRef<
|
|||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
|
||||
));
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||
|
||||
const DialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||
|
|
@ -38,27 +38,42 @@ const DialogContent = React.forwardRef<
|
|||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||
<X className="h-4 w-4" />
|
||||
<DialogPrimitive.Close className="absolute right-6 top-10 rounded-sm opacity-60 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||
<X className="h-6 w-6" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
))
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName
|
||||
));
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
||||
|
||||
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
|
||||
)
|
||||
DialogHeader.displayName = "DialogHeader"
|
||||
|
||||
const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
const DialogHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
|
||||
className={cn(
|
||||
"flex flex-col space-y-1.5 text-center sm:text-left",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
DialogFooter.displayName = "DialogFooter"
|
||||
);
|
||||
DialogHeader.displayName = "DialogHeader";
|
||||
|
||||
const DialogFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
DialogFooter.displayName = "DialogFooter";
|
||||
|
||||
const DialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||
|
|
@ -66,11 +81,14 @@ const DialogTitle = React.forwardRef<
|
|||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn("text-lg font-semibold leading-none tracking-tight", className)}
|
||||
className={cn(
|
||||
"text-lg font-semibold leading-none tracking-tight",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogTitle.displayName = DialogPrimitive.Title.displayName
|
||||
));
|
||||
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
||||
|
||||
const DialogDescription = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||
|
|
@ -81,8 +99,8 @@ const DialogDescription = React.forwardRef<
|
|||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogDescription.displayName = DialogPrimitive.Description.displayName
|
||||
));
|
||||
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
|
|
@ -95,5 +113,4 @@ export {
|
|||
DialogFooter,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
}
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-10 w-full rounded-lg border bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-grayScale-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"flex h-10 w-full rounded-[6px] border bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-grayScale-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from "react"
|
||||
import { ChevronDown } from "lucide-react"
|
||||
import { cn } from "../../lib/utils"
|
||||
import * as React from "react";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import { cn } from "../../lib/utils";
|
||||
|
||||
export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
|
||||
|
||||
|
|
@ -18,10 +18,9 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
|
|||
>
|
||||
{children}
|
||||
</select>
|
||||
<ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-grayScale-400" />
|
||||
<ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-grayScale-600" />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
},
|
||||
)
|
||||
Select.displayName = "Select"
|
||||
|
||||
);
|
||||
Select.displayName = "Select";
|
||||
|
|
|
|||
|
|
@ -18,15 +18,18 @@ export function Stepper({ steps, currentStep, className }: StepperProps) {
|
|||
key={step}
|
||||
className="flex-1 relative flex flex-col items-center group"
|
||||
>
|
||||
{/* Connector Line (Behind) */}
|
||||
{/* Connector Line - floats between circles with gap on both sides */}
|
||||
{index < steps.length - 1 && (
|
||||
<div className="absolute left-1/2 w-[100%] mx-auto top-5 h-[2px] bg-grayScale-200 z-0" />
|
||||
<div
|
||||
className="absolute top-4 h-[1.5px] bg-grayScale-200 z-0"
|
||||
style={{ left: "calc(50% + 24px)", right: "calc(-50% + 24px)" }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Circle */}
|
||||
<div
|
||||
className={cn(
|
||||
"relative z-10 grid h-10 w-10 place-items-center rounded-full border-2 text-sm font-bold transition-all duration-300 mb-3",
|
||||
"relative z-10 grid h-8 w-8 place-items-center rounded-full border-2 text-sm font-bold transition-all duration-300 mb-3",
|
||||
isCurrent
|
||||
? "border-brand-500 bg-brand-500 text-white shadow-md scale-110"
|
||||
: "border-grayScale-100 bg-white text-grayScale-400 font-medium",
|
||||
|
|
@ -38,7 +41,7 @@ export function Stepper({ steps, currentStep, className }: StepperProps) {
|
|||
{/* Label */}
|
||||
<span
|
||||
className={cn(
|
||||
"relative z-10 text-[13px] font-bold transition-colors duration-300",
|
||||
"relative z-10 text-[12px] font-bold transition-colors duration-300",
|
||||
isCurrent ? "text-brand-500" : "text-grayScale-400 font-medium",
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -25,6 +25,7 @@ export function AddPracticeFlow() {
|
|||
const moduleId = searchParams.get("moduleId");
|
||||
|
||||
const isModuleContext = backTo === "module";
|
||||
const isCourseContext = backTo === "modules";
|
||||
|
||||
const backLabel =
|
||||
backTo === "module"
|
||||
|
|
@ -73,7 +74,7 @@ export function AddPracticeFlow() {
|
|||
|
||||
if (isPublished) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen px-4 text-center pb-20 animate-in fade-in zoom-in duration-500 bg-white">
|
||||
<div className="flex flex-col items-center justify-center min-h-screen px-4 text-center pb-20 animate-in fade-in zoom-in duration-500">
|
||||
<div className="mb-10 relative">
|
||||
<div className="absolute inset-0 bg-brand-500/10 blur-3xl rounded-full" />
|
||||
<img
|
||||
|
|
@ -82,16 +83,16 @@ export function AddPracticeFlow() {
|
|||
className="h-[128px] w-[128px] relative"
|
||||
/>
|
||||
</div>
|
||||
<h1 className="text-[32px] font-bold text-grayScale-900 mb-4">
|
||||
<h1 className="text-[28px] font-bold text-grayScale-900 mb-2">
|
||||
Practice Published Successfully!
|
||||
</h1>
|
||||
<p className="text-grayScale-600 text-lg mb-14 max-w-lg font-medium leading-relaxed">
|
||||
<p className="text-grayScale-600 text-md mb-14 max-w-lg font-medium leading-relaxed">
|
||||
Your speaking practice is now active and available inside the module.
|
||||
</p>
|
||||
<div className="flex flex-col gap-4 w-full max-w-[400px]">
|
||||
<Button
|
||||
onClick={() => navigate(backPath)}
|
||||
className="h-14 rounded-2xl bg-brand-500 font-bold shadow-xl shadow-brand-500/20 text-[17px] text-white hover:bg-brand-600 transition-all active:scale-95"
|
||||
className="h-14 rounded-[6px] bg-[#9E2891] font-bold shadow-xl shadow-brand-500/20 text-[16px] text-white "
|
||||
>
|
||||
Go back to Module
|
||||
</Button>
|
||||
|
|
@ -106,7 +107,7 @@ export function AddPracticeFlow() {
|
|||
});
|
||||
}}
|
||||
variant="outline"
|
||||
className="h-14 rounded-2xl border-brand-200 text-brand-500 font-bold hover:bg-brand-50 transition-all text-[17px] bg-white"
|
||||
className="h-14 rounded-[6px] border-[#9E2891] text-[#9E2891] font-semibold text-[16px] bg-white "
|
||||
>
|
||||
Add Another Practice
|
||||
</Button>
|
||||
|
|
@ -128,6 +129,7 @@ export function AddPracticeFlow() {
|
|||
navigate={navigate}
|
||||
level={level!}
|
||||
isModuleContext={isModuleContext}
|
||||
isCourseContext={isCourseContext}
|
||||
/>
|
||||
);
|
||||
case 2:
|
||||
|
|
@ -182,6 +184,7 @@ export function AddPracticeFlow() {
|
|||
navigate={navigate}
|
||||
level={level!}
|
||||
isModuleContext={isModuleContext}
|
||||
isCourseContext={isCourseContext}
|
||||
/>
|
||||
);
|
||||
case 2:
|
||||
|
|
@ -219,40 +222,46 @@ export function AddPracticeFlow() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8 pb-32 px-6 pt-6 min-h-screen bg-[#F8FAFC]">
|
||||
<div className="space-y-8 pb-32 px-6 pt-6 min-h-screen ">
|
||||
{/* Header */}
|
||||
<div className="mx-auto max-w-7xl w-full">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<Link
|
||||
to={backPath}
|
||||
className="flex items-center gap-2 text-[15px] font-medium text-grayScale-500 transition-colors hover:text-brand-500 decoration-none"
|
||||
className="flex items-center gap-2 text-[15px] font-medium text-grayScale-600 transition-colors hover:text-brand-500 decoration-none"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
{backLabel}
|
||||
</Link>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="rounded-[8px] border-grayScale-200 text-grayScale-600 h-10 px-6 font-bold bg-white hover:bg-grayScale-50"
|
||||
onClick={() => navigate(backPath)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 mb-10">
|
||||
<h1 className="text-4xl font-bold text-[#0F172A]">
|
||||
Add New Practice
|
||||
</h1>
|
||||
<p className="text-grayScale-400 text-lg">
|
||||
<div className=" mb-10">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-3xl font-bold text-[#0F172A]">
|
||||
Add New Practice
|
||||
</h1>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="rounded-[8px] border-grayScale-200 text-grayScale-600 h-10 px-6 font-bold bg-white hover:bg-grayScale-50"
|
||||
onClick={() => navigate(backPath)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-grayScale-400 text-base">
|
||||
Create a new immersive practice session for students.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto max-w-4xl mb-12">
|
||||
<div className="mx-auto w-[70%] mb-12">
|
||||
<Stepper steps={flowSteps} currentStep={currentStep} />
|
||||
</div>
|
||||
|
||||
<div className="mx-auto max-w-4xl">{renderStep()}</div>
|
||||
<div
|
||||
className={`mx-auto ${(!isModuleContext && currentStep === 3) || (isModuleContext && currentStep === 2) || currentStep === 5 ? "max-w-6xl" : "max-w-4xl"}`}
|
||||
>
|
||||
{renderStep()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { Stepper } from "../../components/ui/stepper";
|
|||
|
||||
import { VideoDetailStep } from "./components/video-steps/VideoDetailStep";
|
||||
import { ReviewPublishStep } from "./components/video-steps/ReviewPublishStep";
|
||||
import successIcon from "../../assets/success.svg";
|
||||
|
||||
const STEPS = [
|
||||
{ id: 1, label: "Video Detail" },
|
||||
|
|
@ -37,43 +38,31 @@ export function AddVideoFlow() {
|
|||
|
||||
if (isPublished) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen px-4 text-center pb-20 animate-in fade-in zoom-in duration-500 bg-white">
|
||||
<div className="flex flex-col items-center justify-center min-h-screen px-4 text-center pb-20 animate-in fade-in zoom-in duration-500 ">
|
||||
{/* Success Icon Wrapper (Jagged Circle Style) */}
|
||||
<div className="mb-12 relative scale-110">
|
||||
<div className="absolute inset-0 bg-brand-500/5 blur-3xl rounded-full" />
|
||||
<div className="relative">
|
||||
<div
|
||||
className="h-24 w-24 bg-brand-500 flex items-center justify-center"
|
||||
style={{
|
||||
clipPath:
|
||||
"polygon(50% 0%, 61% 10%, 75% 10%, 80% 24%, 94% 30%, 90% 44%, 100% 56%, 90% 68%, 94% 82%, 80% 88%, 75% 100%, 61% 100%, 50% 90%, 39% 100%, 25% 100%, 20% 88%, 6% 82%, 10% 68%, 0% 56%, 10% 44%, 6% 30%, 20% 24%, 25% 10%, 39% 10%)",
|
||||
}}
|
||||
>
|
||||
<Check className="h-12 w-12 text-white stroke-[4px]" />
|
||||
</div>
|
||||
{/* Sub-Jagged layer for depth if needed */}
|
||||
<div
|
||||
className="absolute inset-0 bg-brand-500/20 scale-110 -z-10"
|
||||
style={{
|
||||
clipPath:
|
||||
"polygon(50% 0%, 61% 10%, 75% 10%, 80% 24%, 94% 30%, 90% 44%, 100% 56%, 90% 68%, 94% 82%, 80% 88%, 75% 100%, 61% 100%, 50% 90%, 39% 100%, 25% 100%, 20% 88%, 6% 82%, 10% 68%, 0% 56%, 10% 44%, 6% 30%, 20% 24%, 25% 10%, 39% 10%)",
|
||||
opacity: 0.3,
|
||||
}}
|
||||
<div className="absolute inset-0 bg-brand-500/10 blur-3xl rounded-full" />
|
||||
<img
|
||||
src={successIcon}
|
||||
alt="Success"
|
||||
className="h-[128px] w-[128px] relative"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="text-[32px] font-bold text-grayScale-900 mb-4">
|
||||
<h1 className="text-[26px] font-bold text-grayScale-900 mb-4">
|
||||
Video Published Successfully!
|
||||
</h1>
|
||||
<p className="text-grayScale-600 text-lg mb-14 max-w-lg font-medium leading-relaxed">
|
||||
<p className="text-grayScale-600 text-base mb-14 max-w-lg font-medium leading-relaxed">
|
||||
Your video is now live and available inside the selected module.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-4 w-full max-w-[400px]">
|
||||
<Button
|
||||
onClick={() => navigate(`/new-content/learn-english/${level}`)}
|
||||
className="h-14 rounded-2xl bg-brand-500 font-bold shadow-xl shadow-brand-500/20 text-[17px] text-white hover:bg-brand-600 transition-all active:scale-95"
|
||||
className="h-12 rounded-[6px] bg-brand-500 font-bold text-[17px] text-white transition-all active:scale-95"
|
||||
>
|
||||
Go back to Learn English
|
||||
</Button>
|
||||
|
|
@ -90,7 +79,7 @@ export function AddVideoFlow() {
|
|||
setCurrentStep(1);
|
||||
}}
|
||||
variant="outline"
|
||||
className="h-14 rounded-2xl border-brand-200 text-brand-500 font-bold hover:bg-brand-50 transition-all text-[17px] active:scale-95 bg-white"
|
||||
className="h-12 rounded-[6px] border-brand-200 text-brand-500 font-bold text-[17px] active:scale-95 bg-white"
|
||||
>
|
||||
Add Another Video
|
||||
</Button>
|
||||
|
|
@ -100,7 +89,7 @@ export function AddVideoFlow() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8 pb-32 px-6 pt-6 min-h-screen bg-[#F8FAFC]">
|
||||
<div className="space-y-8 pb-32 px-6 pt-6 min-h-screen ">
|
||||
{/* Header */}
|
||||
<div className="mx-auto max-w-7xl w-full">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
|
|
@ -120,7 +109,7 @@ export function AddVideoFlow() {
|
|||
</Button>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl font-bold text-[#0F172A] mb-10">
|
||||
<h1 className="text-2xl font-bold text-[#0F172A] mb-10">
|
||||
Add New Video
|
||||
</h1>
|
||||
|
||||
|
|
|
|||
193
src/pages/content-management/AttachPracticeFlow.tsx
Normal file
193
src/pages/content-management/AttachPracticeFlow.tsx
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
import { useState } from "react";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { ArrowLeft, Clock, FileVideo, Check } from "lucide-react";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import { Stepper } from "../../components/ui/stepper";
|
||||
import successIcon from "../../assets/success.svg";
|
||||
|
||||
import { AttachPracticeStep1 } from "./components/practice-steps/AttachPracticeStep1";
|
||||
import { AttachPracticeReviewStep } from "./components/practice-steps/AttachPracticeReviewStep";
|
||||
|
||||
export function AttachPracticeFlow() {
|
||||
const navigate = useNavigate();
|
||||
const { programType, courseId, unitId, moduleId } = useParams<{
|
||||
programType: string;
|
||||
courseId: string;
|
||||
unitId: string;
|
||||
moduleId: string;
|
||||
}>();
|
||||
|
||||
const backPath = `/new-content/courses/${programType}/${courseId}/${unitId}/${moduleId}`;
|
||||
const [currentStep, setCurrentStep] = useState(1);
|
||||
const [isPublished, setIsPublished] = useState(false);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
program:
|
||||
programType === "skill"
|
||||
? "Skill-Based Courses"
|
||||
: "English Proficiency Exams",
|
||||
module: "Module 4: Interactive Speaking",
|
||||
video: "Intro to Interactive Speaking",
|
||||
questionType: "speaking",
|
||||
version: "v1",
|
||||
});
|
||||
|
||||
const steps = ["Set Video", "Review & Publish"];
|
||||
|
||||
const nextStep = () =>
|
||||
setCurrentStep((prev) => Math.min(prev + 1, steps.length));
|
||||
const prevStep = () => setCurrentStep((prev) => Math.max(prev - 1, 1));
|
||||
|
||||
if (isPublished) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen px-4 text-center pb-20 animate-in fade-in zoom-in duration-700 ">
|
||||
{/* Scalloped Success Icon */}
|
||||
<div className="mb-10 relative">
|
||||
<div className="absolute inset-0 bg-brand-500/10 blur-3xl rounded-full" />
|
||||
<img
|
||||
src={successIcon}
|
||||
alt="Success"
|
||||
className="h-[128px] w-[128px] relative"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h1 className="text-[28px] font-bold text-grayScale-900 mb-2">
|
||||
Practice Attached Successfully!
|
||||
</h1>
|
||||
<p className="text-grayScale-600 text-md mb-14 max-w-2xl font-medium leading-relaxed">
|
||||
The practice has been successfully linked to a video{" "}
|
||||
<span className="text-[#9E2891]">“{formData.video}”</span>
|
||||
</p>
|
||||
|
||||
{/* Video Info Card */}
|
||||
<div className="w-full max-w-[600px] bg-[#9E289114] border border-[#9E2891] rounded-[12px] p-4 flex items-center justify-between mb-16 shadow-sm">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="h-[60px] w-[120px] rounded-xl overflow-hidden shadow-inner flex-shrink-0">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1557425955-df376b5903c8?auto=format&fit=crop&q=80&w=400"
|
||||
alt="Video Thumbnail"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-left space-y-1.5">
|
||||
<h4 className="text-[14px] font-medium text-grayScale-900">
|
||||
Intro to IELTS Speaking Part 1
|
||||
</h4>
|
||||
<div className="flex items-center gap-3 text-grayScale-400 font-medium text-[12px]">
|
||||
<div className="flex items-center gap-1.5 uppercase tracking-wide">
|
||||
<Clock className="h-3 w-3" />
|
||||
10:42 mins
|
||||
</div>
|
||||
<span>•</span>
|
||||
<div className="flex items-center gap-1.5 uppercase tracking-wide">
|
||||
MP4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pr-4">
|
||||
<Check className="h-5 w-5 text-[#9E2891] stroke-[3px]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col gap-4 w-full max-w-[440px]">
|
||||
<Button
|
||||
onClick={() => navigate(backPath)}
|
||||
className="h-14 rounded-[6px] bg-[#9E2891] font-bold shadow-xl shadow-brand-500/20 text-[16px] text-white"
|
||||
>
|
||||
Go back to Videos
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setIsPublished(false);
|
||||
setCurrentStep(1);
|
||||
}}
|
||||
className="h-14 rounded-[6px] border-[#9E2891] text-[#9E2891] font-semibold text-[16px] bg-white"
|
||||
>
|
||||
Attach More Practice
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderStep = () => {
|
||||
switch (currentStep) {
|
||||
case 1:
|
||||
return (
|
||||
<AttachPracticeStep1
|
||||
formData={formData}
|
||||
setFormData={setFormData}
|
||||
nextStep={nextStep}
|
||||
onCancel={() => navigate(backPath)}
|
||||
/>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<AttachPracticeReviewStep
|
||||
formData={formData}
|
||||
prevStep={prevStep}
|
||||
onPublish={() => setIsPublished(true)}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const title =
|
||||
currentStep === 1 ? "Attach Practice to a Video" : "Review & Publish";
|
||||
const description =
|
||||
currentStep === 1
|
||||
? "Create a new immersive practice session for a video."
|
||||
: "Verify practice details before publishing it.";
|
||||
|
||||
return (
|
||||
<div className="space-y-8 pb-32 px-6 pt-10 min-h-screen animate-in fade-in duration-500">
|
||||
<div className="mx-auto w-full">
|
||||
{/* Navigation Breadcrumb */}
|
||||
<div className="flex items-center justify-between mb-12">
|
||||
<Link
|
||||
to={backPath}
|
||||
className="flex items-center gap-2 text-[15px] font-bold text-grayScale-600 transition-colors hover:text-brand-500 group"
|
||||
>
|
||||
<ArrowLeft className="h-5 w-5 transition-transform group-hover:-translate-x-1" />
|
||||
Back to Videos
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Stepper Area */}
|
||||
<div className="mb-20 w-full pointer-events-none">
|
||||
<Stepper steps={steps} currentStep={currentStep} />
|
||||
</div>
|
||||
|
||||
{/* Page Title & Header Actions */}
|
||||
<div className="mb-10 flex items-start justify-between">
|
||||
<div className="">
|
||||
<h1 className="text-[30px] font-bold text-[#0D1421] ">{title}</h1>
|
||||
<p className="text-grayScale-400 text-[16px] font-medium ">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-10 px-8 rounded-[6px] border-grayScale-100 text-grayScale-600 font-bold bg-white hover:bg-grayScale-50 shadow-sm"
|
||||
onClick={() => navigate(backPath)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button className="h-10 px-8 rounded-[6px] bg-[#9E2891] font-bold text-white shadow-md hover:bg-[#8A237E] transition-all">
|
||||
Save as Draft
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Content */}
|
||||
<div className="w-full">{renderStep()}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
157
src/pages/content-management/AttachProgramPracticeFlow.tsx
Normal file
157
src/pages/content-management/AttachProgramPracticeFlow.tsx
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
import { useState } from "react";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { ArrowLeft, Check } from "lucide-react";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import { Stepper } from "../../components/ui/stepper";
|
||||
import successIcon from "../../assets/success.svg";
|
||||
|
||||
import { ProgramAttachStep1 } from "./components/practice-steps/ProgramAttachStep1";
|
||||
import { ProgramAttachReviewStep } from "./components/practice-steps/ProgramAttachReviewStep";
|
||||
|
||||
export function AttachProgramPracticeFlow() {
|
||||
const navigate = useNavigate();
|
||||
const { programType } = useParams<{ programType: string }>();
|
||||
|
||||
const backPath = `/new-content/courses/${programType}`;
|
||||
const [currentStep, setCurrentStep] = useState(1);
|
||||
const [isPublished, setIsPublished] = useState(false);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
program: "English Proficiency Exams",
|
||||
test: "Mock Exam 1",
|
||||
questionType: "Speaking Practice",
|
||||
version: "V 1.0",
|
||||
});
|
||||
|
||||
const steps = ["Set Program", "Review & Publish"];
|
||||
|
||||
const nextStep = () =>
|
||||
setCurrentStep((prev) => Math.min(prev + 1, steps.length));
|
||||
const prevStep = () => setCurrentStep((prev) => Math.max(prev - 1, 1));
|
||||
|
||||
if (isPublished) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen px-4 text-center pb-20 animate-in fade-in zoom-in duration-700 bg-white">
|
||||
{/* Scalloped Success Icon */}
|
||||
<div className="mb-10 relative">
|
||||
<div className="absolute inset-0 bg-brand-500/10 blur-3xl rounded-full" />
|
||||
<img
|
||||
src={successIcon}
|
||||
alt="Success"
|
||||
className="h-[128px] w-[128px] relative"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h1 className="text-[28px] font-bold text-grayScale-900 mb-2">
|
||||
Practice Attached Successfully!
|
||||
</h1>
|
||||
<p className="text-grayScale-600 text-md mb-14 max-w-lg font-medium leading-relaxed">
|
||||
The practice has been successfully linked to the program{" "}
|
||||
<span className="text-[#9E2891]">“{formData.program}”</span>
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-4 w-full max-w-[440px]">
|
||||
<Button
|
||||
onClick={() => navigate(backPath)}
|
||||
className="h-14 rounded-[12px] bg-[#9E2891] font-bold shadow-xl shadow-brand-500/20 text-[16px] text-white "
|
||||
>
|
||||
Go back to Program
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setIsPublished(false);
|
||||
setCurrentStep(1);
|
||||
}}
|
||||
className="h-14 rounded-[12px] border-[#9E2891] text-[#9E2891] font-bold text-[16px] bg-white "
|
||||
>
|
||||
Attach More Practice
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderStep = () => {
|
||||
switch (currentStep) {
|
||||
case 1:
|
||||
return (
|
||||
<ProgramAttachStep1
|
||||
formData={formData}
|
||||
setFormData={setFormData}
|
||||
nextStep={nextStep}
|
||||
onCancel={() => navigate(backPath)}
|
||||
/>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<ProgramAttachReviewStep
|
||||
formData={formData}
|
||||
prevStep={prevStep}
|
||||
onPublish={() => setIsPublished(true)}
|
||||
onCancel={() => navigate(backPath)}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const title =
|
||||
currentStep === 1 ? "Attach Practice to a program" : "Review & Publish";
|
||||
const description =
|
||||
currentStep === 1
|
||||
? "Create a new immersive practice session for a video."
|
||||
: "Verify practice details before publishing it.";
|
||||
|
||||
return (
|
||||
<div className="space-y-8 px-6 pt-10 min-h-screen animate-in fade-in duration-500">
|
||||
<div className=" w-full">
|
||||
{/* Navigation Breadcrumb */}
|
||||
<div className="flex items-center justify-between mb-12">
|
||||
<Link
|
||||
to={backPath}
|
||||
className="flex items-center gap-2 text-[15px] font-bold text-grayScale-600 transition-colors hover:text-brand-500 group"
|
||||
>
|
||||
<ArrowLeft className="h-5 w-5 transition-transform group-hover:-translate-x-1" />
|
||||
Back to Program
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Stepper Area */}
|
||||
<div className="mb-20 pointer-events-none">
|
||||
<Stepper steps={steps} currentStep={currentStep} />
|
||||
</div>
|
||||
|
||||
{/* Page Title & Header Actions */}
|
||||
<div className="mb-10 flex items-start justify-between">
|
||||
<div className="">
|
||||
<h1 className="text-[30px] font-bold text-[#0D1421] ">{title}</h1>
|
||||
<p className="text-grayScale-500 text-[14px]">{description}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-10 px-8 rounded-[6px] border-grayScale-100 text-grayScale-600 font-bold bg-white hover:bg-grayScale-50 shadow-sm"
|
||||
onClick={() => navigate(backPath)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button className="h-10 px-8 rounded-[6px] bg-[#9E2891] font-bold text-white shadow-md hover:bg-[#8A237E] transition-all">
|
||||
Save as Draft
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Content */}
|
||||
<div
|
||||
className={`w-full mx-auto ${
|
||||
currentStep === 1 ? "max-w-4xl" : "max-w-none"
|
||||
}`}
|
||||
>
|
||||
{renderStep()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -41,7 +41,7 @@ export function CourseDetailPage() {
|
|||
const [isAddModuleOpen, setIsAddModuleOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="space-y-10 pb-20">
|
||||
<div className="space-y-10 pb-20 pt-10">
|
||||
{/* Header Navigation */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
|
|
@ -55,11 +55,11 @@ export function CourseDetailPage() {
|
|||
|
||||
{/* Hero Section */}
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-4xl font-extrabold text-grayScale-900 tracking-tight">
|
||||
<div className="">
|
||||
<h1 className="text-2xl font-medium text-grayScale-900 tracking-tight">
|
||||
{courseId?.toUpperCase() || "A1"}
|
||||
</h1>
|
||||
<p className="text-grayScale-500 text-lg max-w-2xl font-medium">
|
||||
<p className="text-grayScale-500 text-sm max-w-2xl font-medium">
|
||||
Learn basic English words, phrases, and simple sentences for daily
|
||||
situations.
|
||||
</p>
|
||||
|
|
@ -67,37 +67,51 @@ export function CourseDetailPage() {
|
|||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-12 px-6 rounded-[6px] border-brand-500 text-brand-500 font-bold transition-all gap-2"
|
||||
className="rounded-[6px] border-brand-500 text-brand-500 "
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/new-content/learn-english/${level}/courses/add-practice?backTo=modules&courseId=${courseId}`,
|
||||
)
|
||||
}
|
||||
>
|
||||
<Calendar className="h-5 w-5" />
|
||||
<Calendar className="h-4 w-4" />
|
||||
Add Practice
|
||||
</Button>
|
||||
<Button
|
||||
className="h-12 px-6 rounded-[6px] bg-brand-500 font-bold shadow-lg shadow-brand-500/20 transition-all gap-2"
|
||||
className="rounded-[6px] bg-brand-500 font-semibold hover:bg-brand-600"
|
||||
onClick={() => setIsAddModuleOpen(true)}
|
||||
>
|
||||
<Plus className="h-5 w-5" />
|
||||
<Plus className="h-4 w-4" />
|
||||
Add Module
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center" aria-hidden="true">
|
||||
<div className="w-full border-t border-grayScale-200" />
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<div
|
||||
className="h-[0.5px] w-full opacity-20 rounded-full"
|
||||
style={{
|
||||
background: "gray",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AddModuleModal
|
||||
isOpen={isAddModuleOpen}
|
||||
onClose={() => setIsAddModuleOpen(false)}
|
||||
/>
|
||||
{/* Gradient Divider */}
|
||||
|
||||
{/* Gradient Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div className="flex flex-warp gap-10">
|
||||
{MODULES.map((module) => (
|
||||
<Card
|
||||
key={module.id}
|
||||
className="group overflow-hidden border border-grayScale-50 shadow-sm hover:shadow-lg transition-all duration-300 rounded-[16px] bg-white flex flex-col h-full"
|
||||
className="group overflow-hidden border w-[330px] border-grayScale-50 shadow-sm hover:shadow-lg transition-all duration-300 rounded-[16px] bg-white flex flex-col h-full"
|
||||
>
|
||||
{/* Gradient Banner */}
|
||||
<div
|
||||
|
|
@ -107,19 +121,23 @@ export function CourseDetailPage() {
|
|||
)}
|
||||
/>
|
||||
|
||||
<div className="p-2 pb-4 pt-8 flex-1 flex flex-col">
|
||||
<div className="p-2 pb-4 pt-4 flex-1 flex flex-col">
|
||||
<div className="flex gap-4 mb-8">
|
||||
{/* Icon Circle */}
|
||||
<div className="h-12 w-12 rounded-full bg-[#f3e8ff] flex items-center justify-center p-3 flex-shrink-0 border border-purple-100/50">
|
||||
<module.icon className="h-6 w-6 text-brand-500" />
|
||||
<div
|
||||
className={`h-12 w-12 rounded-full ${module.id === "m2" ? "bg-[#F8FAFC]" : "bg-[#f3e8ff]"} flex items-center justify-center p-3 flex-shrink-0 border border-purple-100/50`}
|
||||
>
|
||||
<module.icon
|
||||
className={`h-6 w-6 ${module.id === "m2" ? "text-[#64748B]" : "text-brand-500"}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-xl font-bold text-[#0F172A] tracking-tight">
|
||||
<h3 className="text-lg font-bold text-[#0F172A] tracking-tight">
|
||||
{module.title}
|
||||
</h3>
|
||||
<p className="text-grayScale-400 font-medium leading-normal text-[14px]">
|
||||
<p className="text-grayScale-400 font-medium text-[12px]">
|
||||
{module.description}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -129,7 +147,7 @@ export function CourseDetailPage() {
|
|||
<div className="flex items-center gap-3 mt-auto">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex-1 h-12 rounded-[6px] border-[#9E2891] text-[#9E2891] font-bold transition-all text-sm"
|
||||
className="flex-1 h-10 rounded-[6px] border-[#9E2891] text-[#9E2891] transition-all text-sm"
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/new-content/learn-english/${level}/courses/${courseId}/modules/${module.id}`,
|
||||
|
|
@ -141,12 +159,12 @@ export function CourseDetailPage() {
|
|||
{module.status === "Published" ? (
|
||||
<Button
|
||||
disabled
|
||||
className="flex-1 h-12 rounded-[6px] bg-[#D291BC] text-white font-bold opacity-100 cursor-default border-none shadow-none text-sm"
|
||||
className="flex-1 h-10 rounded-[6px] bg-[#D291BC] text-white opacity-100 cursor-default border-none shadow-none text-sm"
|
||||
>
|
||||
Published
|
||||
</Button>
|
||||
) : (
|
||||
<Button className="flex-1 h-12 rounded-[6px] bg-brand-500 text-white font-bold shadow-md shadow-brand-500/10 text-sm">
|
||||
<Button className="flex-1 h-10 rounded-[6px] bg-brand-500 text-white shadow-md shadow-brand-500/10 text-sm">
|
||||
Publish Practice
|
||||
</Button>
|
||||
)}
|
||||
|
|
|
|||
264
src/pages/content-management/CourseManagementPage.tsx
Normal file
264
src/pages/content-management/CourseManagementPage.tsx
Normal file
|
|
@ -0,0 +1,264 @@
|
|||
import { Link, useParams, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
ArrowLeft,
|
||||
Plus,
|
||||
FileText,
|
||||
LayoutGrid,
|
||||
PlayCircle,
|
||||
ClipboardCheck,
|
||||
ChevronRight,
|
||||
ArrowRight,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import { Card } from "../../components/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogClose,
|
||||
} from "../../components/ui/dialog";
|
||||
import { Input } from "../../components/ui/input";
|
||||
import uploadIcon from "../../assets/icons/upload.png";
|
||||
|
||||
export function CourseManagementPage() {
|
||||
const navigate = useNavigate();
|
||||
const { programType, courseId } = useParams<{
|
||||
programType: string;
|
||||
courseId: string;
|
||||
}>();
|
||||
|
||||
// Mock data for display titles
|
||||
const courseTitles: Record<string, string> = {
|
||||
duolingo: "Duolingo English Test",
|
||||
ielts: "IELTS Academic",
|
||||
};
|
||||
|
||||
const courseDisplayName =
|
||||
courseTitles[courseId || ""] || "Duolingo English Test";
|
||||
|
||||
const units = [
|
||||
{
|
||||
id: "unit1",
|
||||
name: "Greetings & Introductions",
|
||||
description:
|
||||
"Learn basic greetings, self-introductions, and polite expressions in everyday situations.",
|
||||
modules: 3,
|
||||
videos: 9,
|
||||
practices: 9,
|
||||
gradient:
|
||||
"linear-gradient(135deg, rgba(158, 40, 145, 0.5) 0%, rgba(158, 40, 145, 0.8) 100%)",
|
||||
},
|
||||
{
|
||||
id: "unit2",
|
||||
name: "Speaking",
|
||||
description:
|
||||
"Core speaking practice and skill building for natural pronunciation and fluency.",
|
||||
modules: 3,
|
||||
videos: 9,
|
||||
practices: 9,
|
||||
gradient:
|
||||
"linear-gradient(135deg, rgba(79, 70, 229, 0.5) 0%, rgba(79, 70, 229, 0.8) 100%)",
|
||||
},
|
||||
{
|
||||
id: "unit3",
|
||||
name: "Reading",
|
||||
description:
|
||||
"Reading comprehension and vocabulary improvement through various text types.",
|
||||
modules: 3,
|
||||
videos: 9,
|
||||
practices: 9,
|
||||
gradient:
|
||||
"linear-gradient(135deg, rgba(124, 58, 237, 0.5) 0%, rgba(124, 58, 237, 0.8) 100%)",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-8 animate-in fade-in duration-500 pb-10">
|
||||
{/* Navigation */}
|
||||
<Link
|
||||
to={`/new-content/courses/${programType}`}
|
||||
className="flex items-center gap-2.5 text-[15px] font-semibold text-grayScale-600 hover:text-brand-500 transition-colors pt-4 group"
|
||||
>
|
||||
<ArrowLeft className="h-5 w-5 transition-transform group-hover:-translate-x-1" />
|
||||
Back to Courses
|
||||
</Link>
|
||||
|
||||
{/* Header section */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-[28px] font-medium tracking-tight text-grayScale-900">
|
||||
{courseDisplayName}
|
||||
</h1>
|
||||
<p className="max-w-2xl text-[15px] font-medium leading-relaxed text-grayScale-500">
|
||||
Manage units and modules inside the {courseDisplayName}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="h-10 px-6 rounded-[6px] bg-brand-500 font-bold text-white shadow-sm hover:bg-brand-600 transition-all flex items-center gap-2">
|
||||
<Plus className="h-5 w-5" />
|
||||
Add Unit
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-[600px] p-0 border-none rounded-[16px] overflow-hidden">
|
||||
<div className="bg-white">
|
||||
<DialogHeader className="px-8 py-6 border-b border-grayScale-200 flex flex-row items-center justify-between">
|
||||
<DialogTitle className="text-[20px] font-bold relative top-2 text-grayScale-900">
|
||||
Create Courses
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="p-8 space-y-8">
|
||||
<div className="space-y-3">
|
||||
<label className="text-[15px] text-grayScale-800">
|
||||
Unit Name
|
||||
</label>
|
||||
<Input
|
||||
placeholder="e.g. Reading"
|
||||
className="h-12 border-grayScale-400 rounded-[8px] px-4 placeholder:text-grayScale-400 text-[15px] focus:ring-brand-500/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label className="text-[15px] text-grayScale-800">
|
||||
Thumbnail
|
||||
</label>
|
||||
<div className="relative group cursor-pointer">
|
||||
<div className="flex flex-col items-center justify-center rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white py-8 px-10 transition-all ">
|
||||
<div className="mb-4">
|
||||
<img
|
||||
src={uploadIcon}
|
||||
alt="Upload icon"
|
||||
className="h-10 w-10"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[15px]">
|
||||
<span className="text-brand-500 font-bold hover:underline">
|
||||
Click to upload
|
||||
</span>{" "}
|
||||
<span className="text-grayScale-500">
|
||||
or drag and drop
|
||||
</span>
|
||||
</p>
|
||||
<p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
|
||||
JPG, PNG (MAX 1 MB)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-8 py-6 bg-grayScale-50/30 border-t border-grayScale-50 flex justify-end gap-3">
|
||||
<DialogClose asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-11 px-8 rounded-[8px] border-grayScale-200 text-grayScale-700 font-bold"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button className="h-11 px-8 rounded-[8px] bg-brand-500 text-white font-bold hover:bg-brand-600">
|
||||
Create Courses
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-10 px-6 rounded-[6px] border-brand-500 text-brand-500 font-bold hover:bg-brand-50 transition-all flex items-center gap-2"
|
||||
onClick={() =>
|
||||
navigate(`/new-content/courses/${programType}/attach-practice`)
|
||||
}
|
||||
>
|
||||
<FileText className="h-5 w-5" />
|
||||
Attach Practice
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Horizontal Divider */}
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center" aria-hidden="true">
|
||||
<div className="w-full border-t border-grayScale-200" />
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<div
|
||||
className="h-[0.5px] w-full opacity-20 rounded-full"
|
||||
style={{
|
||||
background: "gray",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid of Units */}
|
||||
<div className="flex flex-wrap gap-4 pt-4">
|
||||
{units.map((unit) => (
|
||||
<Card
|
||||
key={unit.id}
|
||||
className="group flex w-[400px] flex-col h-full bg-white rounded-[12px] border border-grayScale-100 overflow-hidden shadow-sm hover:shadow-md transition-all"
|
||||
>
|
||||
{/* Gradient Header */}
|
||||
<div
|
||||
className="h-36 w-full transition-transform duration-500 "
|
||||
style={{ background: unit.gradient }}
|
||||
/>
|
||||
|
||||
<div className="p-4 flex flex-col flex-1 space-y-6">
|
||||
<div className="space-y-3 flex-1">
|
||||
<h3 className="text-[18px] font-medium text-grayScale-900 transition-colors">
|
||||
{unit.name}
|
||||
</h3>
|
||||
<p className="text-[12px] text-grayScale-500 font-medium line-clamp-3">
|
||||
{unit.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Pills */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<div className="h-9 px-3 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-600">
|
||||
<LayoutGrid className="h-3.5 w-3.5 text-grayScale-400" />
|
||||
<span className="text-[12px] font-bold">
|
||||
{unit.modules} Modules
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-9 px-3 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-600">
|
||||
<PlayCircle className="h-3.5 w-3.5 text-grayScale-400" />
|
||||
<span className="text-[12px] font-bold">
|
||||
{unit.videos} Videos
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-9 px-3 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-600">
|
||||
<ClipboardCheck className="h-3.5 w-3.5 text-grayScale-400" />
|
||||
<span className="text-[12px] font-bold">
|
||||
{unit.practices} Practices
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Button */}
|
||||
<Button
|
||||
className="w-full h-10 bg-brand-500 text-white rounded-[6px] font-bold flex items-center justify-center gap-2 group/btn"
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/new-content/courses/${programType}/${courseId}/${unit.id}`,
|
||||
)
|
||||
}
|
||||
>
|
||||
View Detail
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
248
src/pages/content-management/CourseModuleDetailPage.tsx
Normal file
248
src/pages/content-management/CourseModuleDetailPage.tsx
Normal file
|
|
@ -0,0 +1,248 @@
|
|||
import { useState } from "react";
|
||||
import { ArrowLeft, Plus, FileText, MoreVertical, Edit2 } from "lucide-react";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import { cn } from "../../lib/utils";
|
||||
import { Card } from "../../components/ui/card";
|
||||
|
||||
const MOCK_VIDEOS = [
|
||||
{
|
||||
id: "v1",
|
||||
title: "1.1 Introduction to Formal Greetings",
|
||||
duration: "08:45",
|
||||
status: "Draft",
|
||||
thumbnailColor: "bg-[#CBD5E1]",
|
||||
},
|
||||
{
|
||||
id: "v2",
|
||||
title: "1.2 Understanding Email Structure",
|
||||
duration: "08:45",
|
||||
status: "Published",
|
||||
thumbnailColor: "bg-[#DBEAFE]",
|
||||
},
|
||||
{
|
||||
id: "v3",
|
||||
title: "1.3 Common Business Idioms",
|
||||
duration: "08:45",
|
||||
status: "Published",
|
||||
thumbnailColor: "bg-[#FEF3C7]",
|
||||
},
|
||||
{
|
||||
id: "v4",
|
||||
title: "1.4 Video Conference Etiquette",
|
||||
duration: "08:45",
|
||||
status: "Published",
|
||||
thumbnailColor: "bg-[#FCE7F3]",
|
||||
},
|
||||
];
|
||||
|
||||
const MOCK_PRACTICES = [
|
||||
{
|
||||
id: "p1",
|
||||
title: "1.1 Conversation Practice",
|
||||
duration: "08:45",
|
||||
status: "Published",
|
||||
thumbnailColor: "bg-[#E0F2FE]",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
title: "1.2 Roleplay Scenario",
|
||||
duration: "08:45",
|
||||
status: "Draft",
|
||||
thumbnailColor: "bg-[#F0FDF4]",
|
||||
},
|
||||
];
|
||||
|
||||
export function CourseModuleDetailPage() {
|
||||
const navigate = useNavigate();
|
||||
const { programType, courseId, unitId, moduleId } = useParams<{
|
||||
programType: string;
|
||||
courseId: string;
|
||||
unitId: string;
|
||||
moduleId: string;
|
||||
}>();
|
||||
|
||||
const [activeTab, setActiveTab] = useState<"video" | "practice">("video");
|
||||
const [activeFilter, setActiveFilter] = useState("All");
|
||||
|
||||
const moduleTitle = "Module 1: Basic Phrases";
|
||||
const moduleDescription = "Learn essential phrases for daily conversations.";
|
||||
|
||||
const content = activeTab === "video" ? MOCK_VIDEOS : MOCK_PRACTICES;
|
||||
const filteredContent = content.filter((item) => {
|
||||
if (activeFilter === "All") return true;
|
||||
if (activeFilter === "Drafts") return item.status === "Draft";
|
||||
return item.status === activeFilter;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-8 animate-in fade-in duration-500 pb-10">
|
||||
{/* Navigation */}
|
||||
<Link
|
||||
to={`/new-content/courses/${programType}/${courseId}/${unitId}`}
|
||||
className="flex items-center gap-2.5 text-[15px] font-bold text-grayScale-600 hover:text-brand-500 transition-colors pt-4 group"
|
||||
>
|
||||
<ArrowLeft className="h-5 w-5 transition-transform group-hover:-translate-x-1" />
|
||||
Back to Modules
|
||||
</Link>
|
||||
|
||||
{/* Header section */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-[32px] font-extrabold tracking-tight text-[#0D1421]">
|
||||
{moduleTitle}
|
||||
</h1>
|
||||
<p className="max-w-2xl text-[16px] font-medium leading-relaxed text-grayScale-400">
|
||||
{moduleDescription}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-10 px-6 rounded-[6px] border-brand-500 text-brand-500 font-bold hover:bg-brand-50 transition-all flex items-center gap-2 shadow-sm"
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/new-content/courses/${programType}/${courseId}/unit/${unitId}/module/${moduleId}/attach-practice`,
|
||||
)
|
||||
}
|
||||
>
|
||||
<FileText className="h-5 w-5" />
|
||||
Attach Practice
|
||||
</Button>
|
||||
<Button className="h-10 px-6 rounded-[6px] bg-brand-500 font-bold text-white shadow-md hover:bg-brand-600 transition-all flex items-center gap-2 text-[15px]">
|
||||
<Plus className="h-5 w-5" />
|
||||
Add Video
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-10 border-b border-grayScale-100">
|
||||
<button
|
||||
onClick={() => setActiveTab("video")}
|
||||
className={cn(
|
||||
"pb-4 text-[16px] font-bold transition-all relative px-2",
|
||||
activeTab === "video"
|
||||
? "text-brand-500 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[2px] after:bg-brand-500"
|
||||
: "text-grayScale-400 hover:text-grayScale-600",
|
||||
)}
|
||||
>
|
||||
Video
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("practice")}
|
||||
className={cn(
|
||||
"pb-4 text-[16px] font-bold transition-all relative px-2",
|
||||
activeTab === "practice"
|
||||
? "text-brand-500 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[2px] after:bg-brand-500"
|
||||
: "text-grayScale-400 hover:text-grayScale-600",
|
||||
)}
|
||||
>
|
||||
Practice
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filter Bar */}
|
||||
<div className="bg-white border border-grayScale-100 rounded-[16px] p-4 flex items-center gap-8 shadow-sm">
|
||||
<div className="text-[12px] font-bold text-grayScale-300 uppercase tracking-widest pl-4">
|
||||
STATUS:
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{["All", "Published", "Drafts", "Archived"].map((filter) => (
|
||||
<button
|
||||
key={filter}
|
||||
onClick={() => setActiveFilter(filter)}
|
||||
className={cn(
|
||||
"px-5 py-2 rounded-full text-[13px] font-bold transition-all",
|
||||
activeFilter === filter
|
||||
? "bg-brand-500 text-white shadow-md shadow-brand-500/20"
|
||||
: "bg-grayScale-100 text-grayScale-500 hover:bg-grayScale-200",
|
||||
)}
|
||||
>
|
||||
{filter}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid of Content */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 pt-4">
|
||||
{filteredContent.map((item) => (
|
||||
<ContentCard key={item.id} {...item} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ContentCard({
|
||||
title,
|
||||
duration,
|
||||
status,
|
||||
thumbnailColor,
|
||||
}: {
|
||||
title: string;
|
||||
duration: string;
|
||||
status: string;
|
||||
thumbnailColor: string;
|
||||
}) {
|
||||
return (
|
||||
<Card className="group flex flex-col bg-white rounded-[20px] border border-grayScale-50 overflow-hidden shadow-sm hover:shadow-xl hover:shadow-grayScale-400/5 transition-all">
|
||||
{/* Thumbnail Area */}
|
||||
<div className={cn("h-44 w-full relative", thumbnailColor)}>
|
||||
<div className="absolute bottom-3 right-3 bg-black/60 text-white text-[11px] font-bold px-2 py-0.5 rounded backdrop-blur-sm">
|
||||
{duration}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-5 flex flex-col flex-1 space-y-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div
|
||||
className={cn(
|
||||
"px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider flex items-center gap-2 border",
|
||||
status === "Published"
|
||||
? "bg-[#F0FDF4] text-[#16A34A] border-[#DCFCE7]"
|
||||
: "bg-grayScale-50 text-grayScale-400 border-grayScale-100",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"h-1.5 w-1.5 rounded-full",
|
||||
status === "Published" ? "bg-[#16A34A]" : "bg-grayScale-300",
|
||||
)}
|
||||
/>
|
||||
{status}
|
||||
</div>
|
||||
<button className="h-8 w-8 rounded-lg flex items-center justify-center text-grayScale-300 hover:text-grayScale-600 transition-colors">
|
||||
<MoreVertical className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h3 className="text-[14px] font-bold text-[#0F172A] line-clamp-2 leading-snug">
|
||||
{title}
|
||||
</h3>
|
||||
|
||||
<div className="pt-2 grid grid-cols-1 gap-2 mt-auto">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full h-10 rounded-[10px] border-grayScale-200 text-grayScale-600 font-bold flex items-center justify-center gap-2 text-xs hover:bg-grayScale-25"
|
||||
>
|
||||
<Edit2 className="h-4 w-4" />
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
className={cn(
|
||||
"w-full h-10 rounded-[10px] font-bold text-xs shadow-sm",
|
||||
status === "Published"
|
||||
? "bg-[#ECD5E9] text-[#9E2891] hover:bg-[#EBD0E7]"
|
||||
: "bg-brand-500 text-white hover:bg-brand-600",
|
||||
)}
|
||||
>
|
||||
{status === "Published" ? "Published" : "Publish"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -52,7 +52,7 @@ export function LearnEnglishPage() {
|
|||
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="h-11 rounded-xl bg-brand-500 px-6 font-semibold hover:bg-brand-600">
|
||||
<Button className="h-11 rounded-[6px] bg-brand-500 px-6 font-semibold ">
|
||||
<Plus className="mr-2 h-5 w-5" />
|
||||
Add Program
|
||||
</Button>
|
||||
|
|
@ -72,7 +72,7 @@ export function LearnEnglishPage() {
|
|||
className="absolute inset-0 flex items-center"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div className="w-full border-t border-grayScale-100" />
|
||||
<div className="w-full border-t border-grayScale-200" />
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<div
|
||||
|
|
@ -86,17 +86,17 @@ export function LearnEnglishPage() {
|
|||
|
||||
<form className="space-y-6 p-8 pt-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[15px] font-medium text-grayScale-700">
|
||||
<label className="text-[15px] text-grayScale-700">
|
||||
Program Name
|
||||
</label>
|
||||
<Input
|
||||
placeholder="e.g. Beginner"
|
||||
className="h-12 rounded-xl"
|
||||
className="h-12 rounded-xl ring-0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[15px] font-medium text-grayScale-700">
|
||||
<label className="text-[15px] text-grayScale-700">
|
||||
Description
|
||||
</label>
|
||||
<Input
|
||||
|
|
@ -106,7 +106,7 @@ export function LearnEnglishPage() {
|
|||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[15px] font-medium text-grayScale-700">
|
||||
<label className="text-[15px] text-grayScale-700">
|
||||
Program Order
|
||||
</label>
|
||||
<Select className="h-12 rounded-xl">
|
||||
|
|
@ -117,7 +117,7 @@ export function LearnEnglishPage() {
|
|||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[15px] font-medium text-grayScale-700">
|
||||
<label className="text-[15px] text-grayScale-700">
|
||||
Thumbnail
|
||||
</label>
|
||||
<div className="relative group cursor-pointer">
|
||||
|
|
@ -148,12 +148,12 @@ export function LearnEnglishPage() {
|
|||
<DialogClose asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-12 min-w-[120px] rounded-xl border-grayScale-200 font-semibold"
|
||||
className="h-12 min-w-[120px] rounded-[6px] border-grayScale-200 font-semibold"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button className="h-12 min-w-[160px] rounded-xl bg-brand-500 font-semibold hover:bg-brand-600">
|
||||
<Button className="h-12 min-w-[160px] rounded-[6px] bg-brand-500 font-semibold hover:bg-brand-600">
|
||||
Create Program
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -165,7 +165,7 @@ export function LearnEnglishPage() {
|
|||
{/* Gradient Divider */}
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center" aria-hidden="true">
|
||||
<div className="w-full border-t border-grayScale-100" />
|
||||
<div className="w-full border-t border-grayScale-200" />
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<div
|
||||
|
|
@ -178,11 +178,11 @@ export function LearnEnglishPage() {
|
|||
</div>
|
||||
|
||||
{/* Cards Grid */}
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div className="flex flex-warp gap-10">
|
||||
{levels.map((level) => (
|
||||
<Card
|
||||
key={level.title}
|
||||
className="group overflow-hidden border-none shadow-soft transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
|
||||
className="group w-[290px] overflow-hidden border-none shadow-soft transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
|
||||
>
|
||||
{/* Gradient Header */}
|
||||
<div
|
||||
|
|
@ -192,15 +192,17 @@ export function LearnEnglishPage() {
|
|||
"linear-gradient(135deg, #9E289180 0%, #9E2891 100%)",
|
||||
}}
|
||||
/>
|
||||
<CardContent className="bg-white p-6">
|
||||
<h3 className="text-xl font-bold text-grayScale-700">
|
||||
{level.title}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-grayScale-500">
|
||||
{level.description}
|
||||
</p>
|
||||
<CardContent className="bg-white p-6 flex flex-col h-[280px]">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-grayScale-700">
|
||||
{level.title}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-grayScale-500">
|
||||
{level.description}
|
||||
</p>
|
||||
</div>
|
||||
<Link to={`/new-content/learn-english/${level.id}/courses`}>
|
||||
<Button className="mt-8 h-11 w-full rounded-xl bg-brand-500 font-semibold hover:bg-brand-600">
|
||||
<Button className="h-11 w-full rounded-[6px] bg-brand-500 font-semibold hover:bg-brand-600">
|
||||
View Courses
|
||||
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ export function ModuleDetailPage() {
|
|||
.join(" ") || "Business English Fundamentals";
|
||||
|
||||
return (
|
||||
<div className="space-y-10 pb-20 animate-in fade-in duration-500">
|
||||
<div className="space-y-10 pt-10 pb-20 animate-in fade-in duration-500">
|
||||
{/* Header Navigation */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
|
|
@ -108,11 +108,11 @@ export function ModuleDetailPage() {
|
|||
|
||||
{/* Hero Section */}
|
||||
<div className="flex flex-col md:flex-row md:items-start justify-between gap-6">
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-3xl font-extrabold text-grayScale-900 tracking-tight">
|
||||
<div className="">
|
||||
<h1 className="text-2xl font-medium text-grayScale-900 tracking-tight">
|
||||
Module 3: {moduleTitle}
|
||||
</h1>
|
||||
<p className="text-grayScale-500 text-[17px] max-w-2xl font-medium leading-relaxed">
|
||||
<p className="text-grayScale-500 text-[14px] max-w-2xl">
|
||||
This module covers essential vocabulary and phrases used in modern
|
||||
business environments, including email etiquette and meeting
|
||||
protocols.
|
||||
|
|
@ -121,7 +121,7 @@ export function ModuleDetailPage() {
|
|||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-12 px-6 rounded-xl border-brand-500 text-brand-500 font-bold hover:bg-brand-50 transition-all flex items-center gap-2"
|
||||
className="rounded-[6px] border-brand-500 text-brand-500 "
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/new-content/learn-english/${level}/courses/add-practice?backTo=module&courseId=${courseId}&moduleId=${moduleId}`,
|
||||
|
|
@ -132,7 +132,7 @@ export function ModuleDetailPage() {
|
|||
Add Practice
|
||||
</Button>
|
||||
<Button
|
||||
className="h-12 px-6 rounded-xl bg-brand-500 font-bold hover:bg-brand-600 shadow-lg shadow-brand-500/20 text-white transition-all flex items-center gap-2"
|
||||
className="rounded-[6px] bg-brand-500 font-semibold hover:bg-brand-600"
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/new-content/learn-english/${level}/courses/${courseId}/modules/${moduleId}/add-video`,
|
||||
|
|
@ -148,12 +148,12 @@ export function ModuleDetailPage() {
|
|||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="border-b border-grayScale-50">
|
||||
<div className="border-b border-grayScale-200">
|
||||
<div className="flex gap-10">
|
||||
<button
|
||||
onClick={() => setActiveTab("video")}
|
||||
className={cn(
|
||||
"pb-4 text-[17px] font-bold transition-all relative",
|
||||
"pb-4 text-[16px] font-medium transition-all relative",
|
||||
activeTab === "video"
|
||||
? "text-brand-500 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[3px] after:bg-brand-500 after:rounded-t-full"
|
||||
: "text-grayScale-400 hover:text-grayScale-600",
|
||||
|
|
@ -164,7 +164,7 @@ export function ModuleDetailPage() {
|
|||
<button
|
||||
onClick={() => setActiveTab("practice")}
|
||||
className={cn(
|
||||
"pb-4 text-[17px] font-bold transition-all relative",
|
||||
"pb-4 text-[16px] font-medium transition-all relative",
|
||||
activeTab === "practice"
|
||||
? "text-brand-500 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[3px] after:bg-brand-500 after:rounded-t-full"
|
||||
: "text-grayScale-400 hover:text-grayScale-600",
|
||||
|
|
@ -270,12 +270,12 @@ function PracticeCard({
|
|||
<div className="bg-white rounded-[24px] border border-grayScale-50 shadow-sm overflow-hidden hover:shadow-xl hover:shadow-grayScale-400/5 transition-all group p-6 flex flex-col h-full min-h-[340px]">
|
||||
<div className="flex-1 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-[20px] font-bold text-grayScale-900 line-clamp-1">
|
||||
<h3 className="text-[18px] font-bold text-grayScale-900 line-clamp-1">
|
||||
{title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="bg-[#22C55E] text-white text-[11px] font-bold px-2 py-1 rounded-[4px]">
|
||||
{level}
|
||||
</span>
|
||||
|
|
@ -285,21 +285,21 @@ function PracticeCard({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2.5 text-brand-500 bg-brand-50/50 w-fit px-3 py-2 rounded-xl">
|
||||
<div className="flex items-center gap-2.5 text-brand-400 w-fit py-2 rounded-xl">
|
||||
<Layers className="h-4 w-4" />
|
||||
<span className="text-[14px] font-bold">{variations} Variations</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<div className="bg-grayScale-50 text-grayScale-400 text-[11px] font-bold px-3 py-1.5 rounded-[6px] tracking-wide uppercase">
|
||||
<div className="flex border-t border-grayScale-200 items-center justify-between pt-2">
|
||||
<div className="bg-grayScale-100 text-grayScale-400 text-[11px] font-bold px-3 py-1.5 rounded-[6px] tracking-wide uppercase">
|
||||
{status}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button className="h-8 w-8 rounded-lg border border-grayScale-100 flex items-center justify-center text-grayScale-400 hover:text-brand-500 hover:border-brand-100 transition-all">
|
||||
<Edit2 className="h-4 w-4" />
|
||||
<button className="h-8 w-8 rounded-lg flex items-center justify-center text-grayScale-400 hover:text-brand-500 hover:border-brand-100 transition-all">
|
||||
<Edit2 className="h-5 w-5" />
|
||||
</button>
|
||||
<button className="h-8 w-8 rounded-lg border border-grayScale-100 flex items-center justify-center text-grayScale-400 hover:text-red-500 hover:border-red-100 transition-all">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
<button className="h-8 w-8 rounded-lg flex items-center justify-center text-grayScale-400 hover:text-red-500 hover:border-red-100 transition-all">
|
||||
<Trash2 className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export function NewContentPage() {
|
|||
<Mic className="h-10 w-10 text-brand-500" />
|
||||
</div>
|
||||
</div>
|
||||
<CardContent className="border-t border-grayScale-100 bg-white p-8 text-center">
|
||||
<CardContent className="border-t border-grayScale-200 bg-white p-8 text-center">
|
||||
<h3 className="text-xl font-bold text-grayScale-700">
|
||||
Learn English
|
||||
</h3>
|
||||
|
|
@ -50,7 +50,7 @@ export function NewContentPage() {
|
|||
modules.
|
||||
</p>
|
||||
<Link to="/new-content/learn-english">
|
||||
<Button className="mt-8 h-12 w-full rounded-xl bg-brand-500 text-base font-semibold hover:bg-brand-600">
|
||||
<Button className="mt-8 h-12 w-full rounded-[6px] bg-brand-500 text-base font-semibold ">
|
||||
Manage Learn English
|
||||
</Button>
|
||||
</Link>
|
||||
|
|
@ -64,15 +64,17 @@ export function NewContentPage() {
|
|||
<Mic className="h-10 w-10 text-brand-500" />
|
||||
</div>
|
||||
</div>
|
||||
<CardContent className="border-t border-grayScale-100 bg-white p-8 text-center">
|
||||
<CardContent className="border-t border-grayScale-200 bg-white p-8 text-center">
|
||||
<h3 className="text-xl font-bold text-grayScale-700">Courses</h3>
|
||||
<p className="mt-3 text-sm leading-relaxed text-grayScale-500">
|
||||
Manage skill-based and exam preparation courses such as Duolingo
|
||||
and IELTS.
|
||||
</p>
|
||||
<Button className="mt-8 h-12 w-full rounded-xl bg-brand-500 text-base font-semibold hover:bg-brand-600">
|
||||
Manage Courses
|
||||
</Button>
|
||||
<Link to="/new-content/courses" className="block w-full">
|
||||
<Button className="mt-8 h-12 w-full rounded-[6px] bg-brand-500 text-base font-semibold ">
|
||||
Manage Courses
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export function ProgramCoursesPage() {
|
|||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-8 pt-10">
|
||||
{/* Navigation */}
|
||||
<Link
|
||||
to="/new-content/learn-english"
|
||||
|
|
@ -189,12 +189,27 @@ export function ProgramCoursesPage() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gradient Divider */}
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center" aria-hidden="true">
|
||||
<div className="w-full border-t border-grayScale-200" />
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<div
|
||||
className="h-[0.5px] w-full opacity-20 rounded-full"
|
||||
style={{
|
||||
background: "gray",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cards Grid */}
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div className="flex flex-warp gap-10 ">
|
||||
{courses.map((course) => (
|
||||
<Card
|
||||
key={course.id}
|
||||
className="group overflow-hidden border border-grayScale-100 shadow-soft transition-all duration-300 hover:shadow-lg"
|
||||
className="group w-[290px] overflow-hidden border border-grayScale-100 shadow-soft transition-all duration-300 hover:shadow-lg"
|
||||
>
|
||||
{/* Gradient Header */}
|
||||
<div
|
||||
|
|
|
|||
273
src/pages/content-management/ProgramDetailPage.tsx
Normal file
273
src/pages/content-management/ProgramDetailPage.tsx
Normal file
|
|
@ -0,0 +1,273 @@
|
|||
import { Link, useParams, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
ArrowLeft,
|
||||
Plus,
|
||||
FileText,
|
||||
ClipboardList,
|
||||
ListChecks,
|
||||
ChevronRight,
|
||||
X,
|
||||
Upload,
|
||||
} from "lucide-react";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import { Card } from "../../components/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogClose,
|
||||
} from "../../components/ui/dialog";
|
||||
import { Input } from "../../components/ui/input";
|
||||
import { Select } from "../../components/ui/select";
|
||||
import uploadIcon from "../../assets/icons/upload.png";
|
||||
|
||||
export function ProgramDetailPage() {
|
||||
const navigate = useNavigate();
|
||||
const { programType } = useParams<{ programType: string }>();
|
||||
|
||||
// Mock data for "proficiency" program type
|
||||
const programs: Record<string, any> = {
|
||||
proficiency: {
|
||||
title: "English Proficiency Exams",
|
||||
description:
|
||||
"Manage exam-based learning programs such as Duolingo and IELTS.",
|
||||
courses: [
|
||||
{
|
||||
id: "duolingo",
|
||||
name: "Duolingo English Test",
|
||||
description:
|
||||
"Adaptive exam-style practice for speaking, writing, reading, and listening.",
|
||||
coursesCount: 6,
|
||||
questionTypesCount: 13,
|
||||
logo: (
|
||||
<div className="h-14 w-14 rounded-full bg-[#FFB800] flex items-center justify-center relative overflow-hidden">
|
||||
{/* Simple Duolingo-like representation if image not available */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent" />
|
||||
<div className="h-8 w-8 bg-white rounded-full flex items-center justify-center">
|
||||
<div className="h-4 w-4 bg-[#FFB800] rounded-sm transform rotate-45" />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
buttonText: "Manage Detail",
|
||||
},
|
||||
{
|
||||
id: "ielts",
|
||||
name: "IELTS Academic",
|
||||
description:
|
||||
"Full preparation for IELTS speaking, writing, listening, and reading.",
|
||||
coursesCount: 4,
|
||||
questionTypesCount: 18,
|
||||
logo: (
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-[28px] font-black tracking-tighter text-[#E11D48] ">
|
||||
IELTS
|
||||
</span>
|
||||
<span className="text-[8px] font-bold text-[#E11D48] mt-2 tracking-widest uppercase">
|
||||
™
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
buttonText: "View Detail",
|
||||
},
|
||||
],
|
||||
},
|
||||
"skill-based": {
|
||||
title: "Skill-Based Courses",
|
||||
description:
|
||||
"Practice-focused communication and skills training for real-world scenarios.",
|
||||
courses: [], // To be implemented or shown if needed
|
||||
},
|
||||
};
|
||||
|
||||
const currentProgram =
|
||||
programs[programType || "proficiency"] || programs.proficiency;
|
||||
|
||||
return (
|
||||
<div className="space-y-8 animate-in fade-in duration-500 pb-10">
|
||||
{/* Navigation */}
|
||||
<Link
|
||||
to="/new-content/courses"
|
||||
className="flex items-center gap-2.5 text-[15px] font-semibold text-grayScale-600 hover:text-brand-500 transition-colors pt-4 group"
|
||||
>
|
||||
<ArrowLeft className="h-5 w-5 transition-transform group-hover:-translate-x-1" />
|
||||
Back
|
||||
</Link>
|
||||
|
||||
{/* Header section */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-[26px] font-medium tracking-tight text-grayScale-900">
|
||||
{currentProgram.title}
|
||||
</h1>
|
||||
<p className="max-w-2xl text-[15px] font-medium text-grayScale-500">
|
||||
{currentProgram.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="h-10 px-6 rounded-[6px] bg-brand-500 font-bold text-white transition-all flex items-center gap-2">
|
||||
<Plus className="h-5 w-5" />
|
||||
Create Course
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-[600px] p-0 border-none rounded-[16px] overflow-hidden">
|
||||
<div className="bg-white">
|
||||
<DialogHeader className="px-8 py-6 border-b border-grayScale-200 flex flex-row items-center justify-between">
|
||||
<DialogTitle className="text-[20px] font-bold relative top-2 text-grayScale-900">
|
||||
Create Course
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="p-8 space-y-8">
|
||||
<div className="space-y-3">
|
||||
<label className="text-[15px] text-grayScale-800">
|
||||
Name
|
||||
</label>
|
||||
<Input
|
||||
placeholder="e.g. TOEFL, IELTS"
|
||||
className="h-12 border-grayScale-400 rounded-[8px] px-4 placeholder:text-grayScale-400 text-[15px] focus:ring-brand-500/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label className="text-[15px] text-grayScale-800">
|
||||
Course Order
|
||||
</label>
|
||||
<Select defaultValue="1">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Thumbnail Field */}
|
||||
<div className="space-y-3">
|
||||
<label className="text-[15px] text-grayScale-800">
|
||||
Thumbnail
|
||||
</label>
|
||||
<div className="relative group cursor-pointer">
|
||||
<div className="flex flex-col items-center justify-center rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white py-8 px-10 transition-all ">
|
||||
<div className="mb-4">
|
||||
<img
|
||||
src={uploadIcon}
|
||||
alt="Upload icon"
|
||||
className="h-10 w-10"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[15px]">
|
||||
<span className="text-brand-500 font-bold hover:underline">
|
||||
Click to upload
|
||||
</span>{" "}
|
||||
<span className="text-grayScale-500">
|
||||
or drag and drop
|
||||
</span>
|
||||
</p>
|
||||
<p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
|
||||
JPG, PNG (MAX 1 MB)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-8 py-6 bg-grayScale-50/30 border-t border-grayScale-50 flex justify-end gap-3">
|
||||
<DialogClose asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-11 px-8 rounded-[8px] border-grayScale-200 text-grayScale-700 font-bold"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button className="h-11 px-8 rounded-[8px] bg-brand-500 text-white font-bold hover:bg-brand-600">
|
||||
Create Program
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-10 px-6 rounded-[6px] border-brand-500 text-brand-500 font-bold flex items-center gap-2"
|
||||
onClick={() =>
|
||||
navigate(`/new-content/courses/${programType}/attach-practice`)
|
||||
}
|
||||
>
|
||||
<FileText className="h-5 w-5" />
|
||||
Attach Practice
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gradient Divider */}
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center" aria-hidden="true">
|
||||
<div className="w-full border-t border-grayScale-200" />
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<div
|
||||
className="h-[0.5px] w-full opacity-20 rounded-full"
|
||||
style={{
|
||||
background: "gray",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cards Grid */}
|
||||
<div className="flex flex-wrap gap-8 mt-10">
|
||||
{currentProgram.courses.map((course: any) => (
|
||||
<Card
|
||||
key={course.id}
|
||||
className="bg-white w-[500px] rounded-[20px] border border-grayScale-100 p-6 flex flex-col items-start shadow-sm hover:shadow-md transition-shadow"
|
||||
>
|
||||
{/* Logo */}
|
||||
<div className="h-16 flex items-center">{course.logo}</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="space-y-4 pt-2 flex-1">
|
||||
<h3 className="text-[18px] font-medium text-grayScale-900">
|
||||
{course.name}
|
||||
</h3>
|
||||
<p className="text-[14px] text-grayScale-500 font-medium">
|
||||
{course.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Badges/Stats */}
|
||||
<div className="flex items-center pt-4 gap-4">
|
||||
<div className="h-10 px-4 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-700">
|
||||
<ClipboardList className="h-3 w-3 text-grayScale-400" />
|
||||
<span className="text-[12px] ">
|
||||
{course.coursesCount} Courses
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-10 px-4 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-700">
|
||||
<ListChecks className="h-3 w-3 text-grayScale-400" />
|
||||
<span className="text-[12px] ">
|
||||
{course.questionTypesCount} Question Types
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Button */}
|
||||
<Button
|
||||
className="w-full mt-4 h-10 bg-brand-500 text-white rounded-[8px] font-bold flex items-center justify-center gap-2 group/btn"
|
||||
onClick={() =>
|
||||
navigate(`/new-content/courses/${programType}/${course.id}`)
|
||||
}
|
||||
>
|
||||
{course.buttonText}
|
||||
<ChevronRight className="h-5 w-5 transition-transform group-hover/btn:translate-x-1" />
|
||||
</Button>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
82
src/pages/content-management/ProgramTypeSelectionPage.tsx
Normal file
82
src/pages/content-management/ProgramTypeSelectionPage.tsx
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
import { Link } from "react-router-dom";
|
||||
import { GraduationCap, Brain } from "lucide-react";
|
||||
import { Button } from "../../components/ui/button";
|
||||
|
||||
export function ProgramTypeSelectionPage() {
|
||||
return (
|
||||
<div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||||
{/* Header section */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-1.5 pt-2">
|
||||
<h1 className="text-[28px] font-bold tracking-tight text-grayScale-900">
|
||||
Courses
|
||||
</h1>
|
||||
<p className="max-w-2xl text-[15px] font-medium text-grayScale-500">
|
||||
Organize courses under skill-based learning or English proficiency
|
||||
exams. Select a program type to manage curriculum and modules.
|
||||
</p>
|
||||
</div>
|
||||
<Button className="h-10 px-6 rounded-[6px] bg-brand-500 font-bold text-white shadow-sm hover:bg-brand-600 transition-all flex items-center gap-2 mt-4">
|
||||
Manage Question Types
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Gradient Divider */}
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center" aria-hidden="true">
|
||||
<div className="w-full border-t border-grayScale-200" />
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<div
|
||||
className="h-[0.5px] w-full opacity-20 rounded-full"
|
||||
style={{
|
||||
background: "gray",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Selection Cards Grid */}
|
||||
<div className="flex flex-warp gap-10 pt-4">
|
||||
{/* Skill-Based Courses Card */}
|
||||
<Link to="/new-content/courses/skill-based" className="group h-full">
|
||||
<div className="bg-white rounded-[6px] w-[500px] border border-grayScale-100 px-10 py-12 h-full transition-all flex flex-col items-start gap-10">
|
||||
<div className="h-16 w-16 rounded-full bg-brand-50/10 flex items-center justify-center">
|
||||
<Brain className="h-8 w-8 text-brand-500" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 flex-1">
|
||||
<h3 className="text-[20px] font-bold text-grayScale-900">
|
||||
Skill-Based Courses
|
||||
</h3>
|
||||
<p className="text-[15px] leading-relaxed text-grayScale-500 font-medium">
|
||||
Practice-focused communication and skills training. Create
|
||||
modules for vocabulary, grammar, and real-world conversation
|
||||
scenarios.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* English Proficiency Exams Card */}
|
||||
<Link to="/new-content/courses/proficiency" className="group h-full">
|
||||
<div className="bg-white w-[500px] rounded-[6px] border border-grayScale-100 px-10 py-12 h-full transition-all flex flex-col items-start gap-10">
|
||||
<div className="h-16 w-16 rounded-full bg-brand-50/10 flex items-center justify-center">
|
||||
<GraduationCap className="h-8 w-8 text-brand-500" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 flex-1">
|
||||
<h3 className="text-[20px] font-bold text-grayScale-900 transition-colors">
|
||||
English Proficiency Exams
|
||||
</h3>
|
||||
<p className="text-[15px] leading-relaxed text-grayScale-500 font-medium">
|
||||
Exam preparation courses such as IELTS, and Duolingo. Structure
|
||||
content by band scores, sections, and mock tests.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
254
src/pages/content-management/UnitManagementPage.tsx
Normal file
254
src/pages/content-management/UnitManagementPage.tsx
Normal file
|
|
@ -0,0 +1,254 @@
|
|||
import { Link, useParams, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
ArrowLeft,
|
||||
Plus,
|
||||
MessageCircle,
|
||||
PlayCircle,
|
||||
ClipboardCheck,
|
||||
ArrowRight,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import { Card } from "../../components/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogClose,
|
||||
} from "../../components/ui/dialog";
|
||||
import { Input } from "../../components/ui/input";
|
||||
import { Select } from "../../components/ui/select";
|
||||
import uploadIcon from "../../assets/icons/upload.png";
|
||||
|
||||
export function UnitManagementPage() {
|
||||
const navigate = useNavigate();
|
||||
const { programType, courseId, unitId } = useParams<{
|
||||
programType: string;
|
||||
courseId: string;
|
||||
unitId: string;
|
||||
}>();
|
||||
|
||||
// Mock titles
|
||||
const unitTitles: Record<string, string> = {
|
||||
unit1: "Greetings & Introductions",
|
||||
unit2: "Speaking",
|
||||
unit3: "Reading",
|
||||
};
|
||||
|
||||
const unitDisplayName =
|
||||
unitTitles[unitId || ""] || "Greetings & Introductions";
|
||||
|
||||
const modules = [
|
||||
{
|
||||
id: "mod1",
|
||||
name: "Module 1: Basic Phrases",
|
||||
description: "Learn essential phrases for daily conversations.",
|
||||
videos: 3,
|
||||
practices: 3,
|
||||
gradient:
|
||||
"linear-gradient(135deg, rgba(158, 40, 145, 0.4) 0%, rgba(158, 40, 145, 0.7) 100%)",
|
||||
},
|
||||
{
|
||||
id: "mod2",
|
||||
name: "Module 1: Basic Phrases", // Matching Image 2092-1 labels
|
||||
description: "Learn essential phrases for daily conversations.",
|
||||
videos: 3,
|
||||
practices: 3,
|
||||
gradient:
|
||||
"linear-gradient(135deg, rgba(79, 70, 229, 0.4) 0%, rgba(79, 70, 229, 0.7) 100%)",
|
||||
},
|
||||
{
|
||||
id: "mod3",
|
||||
name: "Module 1: Basic Phrases",
|
||||
description: "Learn essential phrases for daily conversations.",
|
||||
videos: 3,
|
||||
practices: 3,
|
||||
gradient:
|
||||
"linear-gradient(135deg, rgba(124, 58, 237, 0.4) 0%, rgba(124, 58, 237, 0.7) 100%)",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-8 animate-in fade-in duration-500 pb-10">
|
||||
{/* Navigation */}
|
||||
<Link
|
||||
to={`/new-content/courses/${programType}/${courseId}`}
|
||||
className="flex items-center gap-2.5 text-[15px] font-semibold text-grayScale-600 hover:text-brand-500 transition-colors pt-4 group"
|
||||
>
|
||||
<ArrowLeft className="h-5 w-5 transition-transform group-hover:-translate-x-1" />
|
||||
Back to Courses
|
||||
</Link>
|
||||
|
||||
{/* Header section */}
|
||||
<div className="flex items-start justify-between">
|
||||
<h1 className="text-[28px] font-medium tracking-tight text-grayScale-900">
|
||||
{unitDisplayName}
|
||||
</h1>
|
||||
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="h-10 px-6 rounded-[6px] bg-brand-500 font-bold text-white shadow-sm hover:bg-brand-600 transition-all flex items-center gap-2">
|
||||
<Plus className="h-5 w-5" />
|
||||
Add Modules
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-[600px] p-0 border-none rounded-[16px] overflow-hidden">
|
||||
<div className="bg-white">
|
||||
<DialogHeader className="px-8 py-6 border-b border-grayScale-200 flex flex-row items-center justify-between">
|
||||
<DialogTitle className="text-[20px] font-bold relative top-2 text-grayScale-900">
|
||||
Create Modules
|
||||
</DialogTitle>
|
||||
<DialogClose className="rounded-full p-1.5 hover:bg-grayScale-50 transition-colors">
|
||||
<X className="h-5 w-5 text-grayScale-400" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogClose>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="p-8 space-y-8">
|
||||
<div className="space-y-3">
|
||||
<label className="text-[15px] text-grayScale-800">
|
||||
Module Title
|
||||
</label>
|
||||
<Input
|
||||
placeholder="e.g. 1.1 Exam types"
|
||||
className="h-12 border-grayScale-400 rounded-[8px] px-4 placeholder:text-grayScale-400 text-[15px] focus:ring-brand-500/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label className="text-[15px] text-grayScale-800">
|
||||
Module Order
|
||||
</label>
|
||||
<Select defaultValue="1">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label className="text-[15px] text-grayScale-800">Icon</label>
|
||||
<div className="relative group cursor-pointer">
|
||||
<div className="flex flex-col items-center justify-center rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white py-8 px-10 transition-all ">
|
||||
<div className="mb-4">
|
||||
<img
|
||||
src={uploadIcon}
|
||||
alt="Upload icon"
|
||||
className="h-10 w-10"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[15px]">
|
||||
<span className="text-brand-500 font-bold hover:underline">
|
||||
Click to upload
|
||||
</span>{" "}
|
||||
<span className="text-grayScale-500">
|
||||
or drag and drop
|
||||
</span>
|
||||
</p>
|
||||
<p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
|
||||
JPG, PNG (MAX 1 MB)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-8 py-6 bg-grayScale-50/30 border-t border-grayScale-200 flex justify-end gap-3">
|
||||
<DialogClose asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-11 px-8 rounded-[8px] border-grayScale-200 text-grayScale-700 font-bold"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button className="h-11 px-8 rounded-[8px] bg-brand-500 text-white font-bold hover:bg-brand-600">
|
||||
Create Module
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
{/* Gradient Divider */}
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center" aria-hidden="true">
|
||||
<div className="w-full border-t border-grayScale-200" />
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<div
|
||||
className="h-[0.5px] w-full opacity-20 rounded-full"
|
||||
style={{
|
||||
background: "gray",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid of Modules */}
|
||||
<div className="flex flex-wrap gap-4 pt-4">
|
||||
{modules.map((module, index) => (
|
||||
<Card
|
||||
key={`${module.id}-${index}`}
|
||||
className="group flex w-[400px] flex-col bg-white rounded-[12px] border border-grayScale-100 overflow-hidden shadow-sm hover:shadow-md transition-all"
|
||||
>
|
||||
{/* Gradient Header */}
|
||||
<div
|
||||
className="h-36 w-full"
|
||||
style={{ background: module.gradient }}
|
||||
/>
|
||||
|
||||
<div className="p-5 flex flex-col space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
{/* Chat Icon */}
|
||||
<div className="mt-1 h-10 w-10 shrink-0 rounded-full bg-[#9E28911A] border border-[#9E289133] flex items-center justify-center">
|
||||
<MessageCircle className="h-5 w-5 text-brand-500" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-[16px] font-medium text-grayScale-900 leading-tight">
|
||||
{module.name}
|
||||
</h3>
|
||||
<p className="text-[12px] text-grayScale-500 font-medium">
|
||||
{module.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Pills */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-8 px-3 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-600">
|
||||
<PlayCircle className="h-3.5 w-3.5 text-grayScale-400" />
|
||||
<span className="text-[12px] font-bold">
|
||||
{module.videos} Videos
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-8 px-3 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-600">
|
||||
<ClipboardCheck className="h-3.5 w-3.5 text-grayScale-400" />
|
||||
<span className="text-[12px] font-bold">
|
||||
{module.practices} Practices
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Button */}
|
||||
<Button
|
||||
className="w-full h-10 bg-brand-500 text-white rounded-[6px] font-bold flex items-center justify-center gap-2 group/btn"
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/new-content/courses/${programType}/${courseId}/${unitId}/${module.id}`,
|
||||
)
|
||||
}
|
||||
>
|
||||
View Detail
|
||||
<ArrowRight className="ml-1 h-4 w-4 transition-transform group-hover/btn:translate-x-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -28,10 +28,6 @@ export function AddModuleModal({ isOpen, onClose }: AddModuleModalProps) {
|
|||
<DialogDescription className="text-sm text-grayScale-400">
|
||||
Create a module to organize videos and practices.
|
||||
</DialogDescription>
|
||||
<DialogClose className="absolute right-8 top-8 flex h-10 w-10 items-center justify-center rounded-full hover:bg-grayScale-50 transition-all">
|
||||
<X className="h-6 w-6 text-grayScale-400" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogClose>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Gradient Divider */}
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ export function VideoCard({
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<h3 className="text-[17px] font-bold text-grayScale-900 line-clamp-2 leading-snug">
|
||||
<h3 className="text-[16px] font-medium text-grayScale-900 line-clamp-2 leading-snug">
|
||||
{title}
|
||||
</h3>
|
||||
|
||||
|
|
@ -76,7 +76,7 @@ export function VideoCard({
|
|||
<Button
|
||||
variant="outline"
|
||||
onClick={onEdit}
|
||||
className="w-full h-11 rounded-xl border-grayScale-100 text-grayScale-600 font-bold hover:bg-grayScale-50 transition-all flex items-center justify-center gap-2"
|
||||
className="w-full h-10 rounded-xl border-grayScale-200 text-grayScale-600 font-bold hover:bg-grayScale-50 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<Edit2 className="h-4 w-4" />
|
||||
Edit
|
||||
|
|
@ -85,7 +85,7 @@ export function VideoCard({
|
|||
disabled={status === "Published"}
|
||||
onClick={onPublish}
|
||||
className={cn(
|
||||
"w-full h-11 rounded-xl font-bold transition-all shadow-sm",
|
||||
"w-full h-10 rounded-xl font-bold transition-all shadow-sm",
|
||||
status === "Published"
|
||||
? "bg-[#E9D5E5] text-white opacity-100 cursor-default"
|
||||
: "bg-brand-500 text-white hover:bg-brand-600 shadow-brand-500/10",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,232 @@
|
|||
import {
|
||||
Rocket,
|
||||
GraduationCap,
|
||||
Folder,
|
||||
ChevronUp,
|
||||
ChevronDown,
|
||||
Eye,
|
||||
Video as VideoIcon,
|
||||
ClipboardList,
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Button } from "../../../../components/ui/button";
|
||||
import { Card } from "../../../../components/ui/card";
|
||||
import { cn } from "../../../../lib/utils";
|
||||
|
||||
interface AttachPracticeReviewStepProps {
|
||||
formData: any;
|
||||
prevStep: () => void;
|
||||
onPublish: () => void;
|
||||
}
|
||||
|
||||
export function AttachPracticeReviewStep({
|
||||
formData,
|
||||
prevStep,
|
||||
onPublish,
|
||||
}: AttachPracticeReviewStepProps) {
|
||||
const [isExpanded, setIsExpanded] = useState(true);
|
||||
const [isConfirmed, setIsConfirmed] = useState(false);
|
||||
|
||||
const questions = [
|
||||
{ order: "01", text: "What is the main idea of the passage?" },
|
||||
{ order: "02", text: "What does the speaker mainly talk about in the..." },
|
||||
{ order: "03", text: "Which option best completes the sentence?" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-10 animate-in fade-in duration-500 mx-auto">
|
||||
{/* 1. Video Summary Card */}
|
||||
<Card className="p-6 border-grayScale-200 rounded-2xl bg-white overflow-hidden">
|
||||
<div className="flex gap-8 items-start">
|
||||
{/* Thumbnail */}
|
||||
<div className="relative h-[150px] w-[260px] rounded-xl overflow-hidden shadow-inner flex-shrink-0">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1557425955-df376b5903c8?auto=format&fit=crop&q=80&w=600"
|
||||
alt="Video Thumbnail"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute bottom-2 right-2 bg-black/70 text-white text-[11px] font-bold px-2 py-0.5 rounded flex items-center gap-1.5">
|
||||
<VideoIcon className="h-3 w-3" />
|
||||
12:30
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Details */}
|
||||
<div className="pt-12">
|
||||
<h3 className="text-[20px] font-bold text-grayScale-900 leading-tight">
|
||||
Intro to Interactive Speaking
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<div className="h-8 pr-2 rounded-full flex items-center gap-2 text-brand-500 text-[13px]">
|
||||
<GraduationCap className="h-4 w-4" />
|
||||
IELTS
|
||||
</div>
|
||||
<div className="h-8 pr-2 rounded-full flex items-center gap-2 text-brand-500 text-[13px]">
|
||||
<Folder className="h-4 w-4" />
|
||||
Unit 2: Speaking
|
||||
</div>
|
||||
<div className="h-8 rounded-full flex items-center gap-2 text-brand-500 text-[13px]">
|
||||
<Folder className="h-4 w-4" />
|
||||
Module 4: Interactive Speaking
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 2. Attached Practices Section */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between ">
|
||||
<h2 className="text-[20px] font-bold text-[#0F172A] flex items-center gap-3">
|
||||
Attached Practices
|
||||
</h2>
|
||||
<span className="h-6 px-3 rounded-full bg-grayScale-200/40 text-grayScale-500 text-[12px] font-bold flex items-center justify-center">
|
||||
Total Items: 3
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Card className="overflow-hidden border border-grayScale-200 shadow-sm rounded-2xl bg-white">
|
||||
{/* Header */}
|
||||
<div
|
||||
className="p-6 flex items-center justify-between transition-colors hover:bg-grayScale-25 cursor-pointer"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-12 w-12 rounded-full bg-[#FDF2F8] flex items-center justify-center text-[#9E2891]">
|
||||
<ClipboardList className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="space-y-0.5">
|
||||
<h4 className="text-[17px] font-medium text-grayScale-900">
|
||||
Multiple Choice
|
||||
</h4>
|
||||
<p className="text-[14px] text-grayScale-400 font-medium">
|
||||
3 Questions • ~4 min to complete
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<button className="flex items-center gap-2 text-[#9E2891] font-medium text-[14px] hover:opacity-80 transition-opacity">
|
||||
<Eye className="h-4 w-4" />
|
||||
Preview
|
||||
</button>
|
||||
{isExpanded ? (
|
||||
<ChevronUp className="h-6 w-6 text-grayScale-300" />
|
||||
) : (
|
||||
<ChevronDown className="h-6 w-6 text-grayScale-300" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expanded Content (Table) */}
|
||||
{isExpanded && (
|
||||
<div className="animate-in slide-in-from-top-2 duration-300">
|
||||
<div className="border-t border-grayScale-100">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-white">
|
||||
<th className="py-4 pl-10 pr-0 w-[80px]"></th>
|
||||
<th className="py-4 px-4 text-[13px] font-medium text-[#A5B4C1] uppercase tracking-wide w-24">
|
||||
Order
|
||||
</th>
|
||||
<th className="py-4 px-4 text-[13px] font-medium text-[#A5B4C1] uppercase tracking-wide">
|
||||
Versions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="border-t border-grayScale-100">
|
||||
{questions.map((q, i) => (
|
||||
<tr
|
||||
key={i}
|
||||
className="border-b border-grayScale-200 last:border-0 group hover:bg-grayScale-25 transition-colors"
|
||||
>
|
||||
<td className="py-6 pl-10 pr-0 text-center">
|
||||
<GripVertical className="h-4 w-4 text-[#A5B4C1]" />
|
||||
</td>
|
||||
<td className="py-6 px-4">
|
||||
<span className="text-[15px] text-[#A5B4C1]">
|
||||
{q.order}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-6 px-4">
|
||||
<p className="text-[15px] font-medium text-[#0D1421]">
|
||||
{q.text}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 3. Confirmation Checkbox */}
|
||||
<div className="bg-[#F1F5F9] border border-[#E2E8F0] px-6 py-4 rounded-[12px] flex items-start gap-4">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="confirm"
|
||||
checked={isConfirmed}
|
||||
onChange={(e) => setIsConfirmed(e.target.checked)}
|
||||
className="mt-1 h-5 w-5 rounded border-grayScale-300 text-brand-500 focus:ring-brand-500 cursor-pointer"
|
||||
/>
|
||||
<div className="">
|
||||
<label
|
||||
htmlFor="confirm"
|
||||
className="text-[16px] font-bold text-grayScale-900 cursor-pointer"
|
||||
>
|
||||
I confirm these details are correct
|
||||
</label>
|
||||
<p className="text-[13px] text-grayScale-400">
|
||||
This action cannot be undone immediately. Rollback requires manual
|
||||
intervention.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 4. Action Footer */}
|
||||
<div className="flex items-center justify-between pt-10 px-2">
|
||||
<Button
|
||||
onClick={prevStep}
|
||||
variant="outline"
|
||||
className="h-12 px-10 rounded-[6px] bg-transparent border-grayScale-400 font-bold text-grayScale-600 transition-all"
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<div className="flex gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-12 px-10 rounded-[6px] border-grayScale-200 font-bold text-grayScale-600 bg-white shadow-none transition-all"
|
||||
>
|
||||
Save as Draft
|
||||
</Button>
|
||||
<Button
|
||||
onClick={onPublish}
|
||||
disabled={!isConfirmed}
|
||||
className={cn(
|
||||
"h-12 px-10 rounded-[6px] font-bold text-white shadow-xl flex items-center gap-3 transition-all active:scale-95",
|
||||
isConfirmed
|
||||
? "bg-[#9E2891] hover:bg-[#8A237E] shadow-[#9E2891]/20"
|
||||
: "bg-grayScale-200 cursor-not-allowed opacity-50",
|
||||
)}
|
||||
>
|
||||
<Rocket className="h-5 w-5" />
|
||||
Publish Now
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Add GripVertical helper since it might not be imported from lucide-react if I missed it
|
||||
function GripVertical({ className }: { className?: string }) {
|
||||
return (
|
||||
<div className={cn("grid grid-cols-2 gap-0.5", className)}>
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<div key={i} className="h-0.5 w-0.5 rounded-full bg-current" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
import { LayoutGrid, Video, ArrowRight } from "lucide-react";
|
||||
import { Button } from "../../../../components/ui/button";
|
||||
import { Card } from "../../../../components/ui/card";
|
||||
import { Select } from "../../../../components/ui/select";
|
||||
import { cn } from "../../../../lib/utils";
|
||||
|
||||
interface AttachPracticeStep1Props {
|
||||
formData: any;
|
||||
setFormData: (data: any) => void;
|
||||
nextStep: () => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
export function AttachPracticeStep1({
|
||||
formData,
|
||||
setFormData,
|
||||
nextStep,
|
||||
onCancel,
|
||||
}: AttachPracticeStep1Props) {
|
||||
return (
|
||||
<Card className="overflow-hidden max-w-4xl mx-auto border-grayScale-100 rounded-3xl bg-white shadow-sm animate-in fade-in duration-500">
|
||||
<div className="space-y-6 p-12">
|
||||
{/* Select Program */}
|
||||
<div className="space-y-4">
|
||||
<label className="text-[14px] font-medium text-[#0F172A] ml-1">
|
||||
Select Program
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
|
||||
<LayoutGrid className="h-5 w-5 text-grayScale-400" />
|
||||
</div>
|
||||
<Select
|
||||
className="h-[56px] w-full rounded-[10px] border-grayScale-200 bg-[#fff] pl-14 text-grayScale-800 font-bold focus:border-brand-500 transition-all text-sm"
|
||||
value={formData.program}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, program: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Choose Program</option>
|
||||
<option value="skill">Skill-Based Courses</option>
|
||||
<option value="exams">English Proficiency Exams</option>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Select Module */}
|
||||
<div className="space-y-4">
|
||||
<label className="text-[14px] font-medium text-[#0F172A] ml-1">
|
||||
Select Module
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
|
||||
<LayoutGrid className="h-5 w-5 text-grayScale-400" />
|
||||
</div>
|
||||
<Select
|
||||
className="h-[56px] w-full rounded-[10px] border-grayScale-200 bg-[#fff] pl-14 text-grayScale-800 font-bold focus:border-brand-500 transition-all text-sm"
|
||||
value={formData.module}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, module: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Choose Module</option>
|
||||
<option value="m1">Module 1: Basic Phrases</option>
|
||||
<option value="m2">Module 2: Intermediate Grammar</option>
|
||||
</Select>
|
||||
</div>
|
||||
<p className="text-[13px] text-grayScale-400 font-medium px-1">
|
||||
Select the specific learning module this practice will reinforce.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Select Video */}
|
||||
<div className="space-y-4">
|
||||
<label className="text-[14px] font-medium text-[#0F172A] ml-1">
|
||||
Select Video
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
|
||||
<Video className="h-5 w-5 text-grayScale-400" />
|
||||
</div>
|
||||
<Select
|
||||
className="h-[56px] w-full rounded-[10px] border-grayScale-200 bg-[#fff] pl-14 text-grayScale-800 font-bold focus:border-brand-500 transition-all text-sm"
|
||||
value={formData.video}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, video: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Choose a video</option>
|
||||
<option value="v1">Intro to Interactive Speaking</option>
|
||||
<option value="v2">Business Meeting Etiquette</option>
|
||||
</Select>
|
||||
</div>
|
||||
<p className="text-[13px] text-grayScale-400 font-medium px-1">
|
||||
Select the specific video this practice will reinforce.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Select Question Type */}
|
||||
<div className="space-y-4">
|
||||
<label className="text-[14px] font-medium text-[#0F172A] ml-1">
|
||||
Select Question Type
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
|
||||
<LayoutGrid className="h-5 w-5 text-grayScale-400" />
|
||||
</div>
|
||||
<Select
|
||||
className="h-[56px] w-full rounded-[10px] border-grayScale-200 bg-[#fff] pl-14 text-grayScale-800 font-bold focus:border-brand-500 transition-all text-sm"
|
||||
value={formData.questionType}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, questionType: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Choose question type</option>
|
||||
<option value="speaking">Speaking Practice</option>
|
||||
<option value="listening">Listening Quiz</option>
|
||||
</Select>
|
||||
</div>
|
||||
<p className="text-[13px] text-grayScale-400 font-medium px-1">
|
||||
Select one question type that associates with th selected video
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Set Version */}
|
||||
<div className="space-y-4">
|
||||
<label className="text-[14px] font-medium text-[#0F172A] ml-1">
|
||||
Set Version
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
|
||||
<LayoutGrid className="h-5 w-5 text-grayScale-400" />
|
||||
</div>
|
||||
<Select
|
||||
className="h-[56px] w-full rounded-[10px] border-grayScale-200 bg-[#fff] pl-14 text-grayScale-800 font-bold focus:border-brand-500 transition-all text-sm"
|
||||
value={formData.version}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, version: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Choose versions</option>
|
||||
<option value="v1">Version 1.0</option>
|
||||
<option value="v2">Version 2.0</option>
|
||||
</Select>
|
||||
</div>
|
||||
<p className="text-[13px] text-grayScale-400 font-medium px-1">
|
||||
Select one or more versions
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between border-t border-grayScale-200 bg-[#F8FAFC] py-4 px-12">
|
||||
<button
|
||||
className="text-[14px] text-grayScale-500 transition-colors hover:text-grayScale-700"
|
||||
onClick={onCancel}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<Button
|
||||
onClick={nextStep}
|
||||
className="h-10 px-12 rounded-[6px] bg-[#9E2891] text-[14px] font-bold text-white shadow-lg shadow-brand-500/10 transition-all active:scale-95 flex items-center gap-3"
|
||||
>
|
||||
Next: Review
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -10,6 +10,7 @@ interface ContextStepProps {
|
|||
navigate: (path: string) => void;
|
||||
level: string;
|
||||
isModuleContext?: boolean;
|
||||
isCourseContext?: boolean;
|
||||
}
|
||||
|
||||
export function ContextStep({
|
||||
|
|
@ -19,22 +20,37 @@ export function ContextStep({
|
|||
navigate,
|
||||
level,
|
||||
isModuleContext,
|
||||
isCourseContext,
|
||||
}: ContextStepProps) {
|
||||
return (
|
||||
<Card className="overflow-hidden border-grayScale-50 shadow-soft rounded-2xl bg-white animate-in fade-in duration-500">
|
||||
<div className="border-b border-grayScale-50 p-8">
|
||||
<h2 className="text-2xl font-bold text-grayScale-900 leading-none">
|
||||
<Card className="overflow-hidden border-grayScale-300 rounded-2xl bg-white animate-in fade-in duration-500">
|
||||
<div className="border-b border-grayScale-50 px-8 pt-8 pb-4">
|
||||
<h2 className="text-xl font-bold text-grayScale-900 leading-none">
|
||||
Step 1: Context Definition
|
||||
</h2>
|
||||
<p className="text-grayScale-400 text-base mt-3">
|
||||
<p className="text-grayScale-600 text-base mt-3">
|
||||
Define the educational level and curriculum module for this practice.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center" aria-hidden="true">
|
||||
<div className="w-full border-t border-grayScale-200" />
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<div
|
||||
className="h-[0.5px] w-full opacity-20 rounded-full"
|
||||
style={{
|
||||
background: "gray",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-10 p-10">
|
||||
{/* Program Field */}
|
||||
<div className="space-y-3">
|
||||
<label className="text-[17px] font-bold text-grayScale-700 ml-1">
|
||||
<label className="text-[16px] text-grayScale-700 ml-1">
|
||||
Program{" "}
|
||||
<span className="text-grayScale-300 font-medium">
|
||||
(Auto-selected)
|
||||
|
|
@ -42,10 +58,10 @@ export function ContextStep({
|
|||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-6 top-1/2 -translate-y-1/2">
|
||||
<GraduationCap className="h-6 w-6 text-grayScale-400" />
|
||||
<GraduationCap className="h-6 w-6 text-grayScale-600" />
|
||||
</div>
|
||||
<Select
|
||||
className="h-16 w-full rounded-2xl border-grayScale-50 bg-[#F9FAFB] pl-16 text-grayScale-700 font-bold focus:border-brand-500 focus:ring-0 transition-all cursor-default"
|
||||
className="h-12 w-full rounded-[6px] border-grayScale-400 bg-[#fff] pl-16 text-grayScale-800 font-bold focus:border-brand-500 focus:ring-0 transition-all cursor-default"
|
||||
disabled
|
||||
>
|
||||
<option>{formData.program || "Intermediate"}</option>
|
||||
|
|
@ -55,7 +71,7 @@ export function ContextStep({
|
|||
|
||||
{/* Course Field */}
|
||||
<div className="space-y-3">
|
||||
<label className="text-[17px] font-bold text-grayScale-700 ml-1">
|
||||
<label className="text-[16px] font-bold text-grayScale-700 ml-1">
|
||||
Course{" "}
|
||||
<span className="text-grayScale-300 font-medium">
|
||||
(Auto-selected)
|
||||
|
|
@ -63,10 +79,10 @@ export function ContextStep({
|
|||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-6 top-1/2 -translate-y-1/2">
|
||||
<GraduationCap className="h-6 w-6 text-grayScale-400" />
|
||||
<GraduationCap className="h-6 w-6 text-grayScale-600" />
|
||||
</div>
|
||||
<Select
|
||||
className="h-16 w-full rounded-2xl border-grayScale-50 bg-[#F9FAFB] pl-16 text-grayScale-700 font-bold focus:border-brand-500 focus:ring-0 transition-all cursor-default"
|
||||
className="h-12 w-full rounded-[6px] border-grayScale-400 bg-[#fff] pl-16 text-grayScale-800 font-bold focus:border-brand-500 focus:ring-0 transition-all cursor-default"
|
||||
disabled
|
||||
>
|
||||
<option>{formData.course || "B2"}</option>
|
||||
|
|
@ -75,30 +91,32 @@ export function ContextStep({
|
|||
</div>
|
||||
|
||||
{/* Select Module Field */}
|
||||
<div className="space-y-3">
|
||||
<label className="text-[17px] font-bold text-grayScale-700 ml-1">
|
||||
Select Module
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-6 top-1/2 -translate-y-1/2">
|
||||
<LayoutGrid className="h-6 w-6 text-grayScale-400" />
|
||||
{(isModuleContext || isCourseContext) && (
|
||||
<div className="space-y-3">
|
||||
<label className="text-[16px] font-bold text-grayScale-700 ml-1">
|
||||
Select Module
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-6 top-1/2 -translate-y-1/2">
|
||||
<LayoutGrid className="h-6 w-6 text-grayScale-400" />
|
||||
</div>
|
||||
<Select className="h-12 w-full rounded-[6px] border-grayScale-300 bg-[#fff] pl-16 text-grayScale-800 font-bold focus:border-brand-500 focus:ring-0 transition-all">
|
||||
<option value="">Choose a module...</option>
|
||||
<option value="m1">Introduction Basics</option>
|
||||
<option value="m2">Daily Routines</option>
|
||||
<option value="m3">Travel Essentials</option>
|
||||
</Select>
|
||||
</div>
|
||||
<Select className="h-16 w-full rounded-2xl border-grayScale-100 bg-white pl-16 text-grayScale-700 font-bold focus:border-brand-500 focus:ring-0 transition-all ring-offset-0">
|
||||
<option value="">Choose a module...</option>
|
||||
<option value="m1">Introduction Basics</option>
|
||||
<option value="m2">Daily Routines</option>
|
||||
<option value="m3">Travel Essentials</option>
|
||||
</Select>
|
||||
<p className="text-[13px] text-grayScale-400 font-medium px-2">
|
||||
Select the specific learning module this practice will reinforce.
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-[13px] text-grayScale-400 font-medium px-2">
|
||||
Select the specific learning module this practice will reinforce.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Select Video Field (Conditional) */}
|
||||
{isModuleContext && (
|
||||
<div className="space-y-3 animate-in fade-in slide-in-from-top-2 duration-300">
|
||||
<label className="text-[17px] font-bold text-grayScale-700 ml-1">
|
||||
<label className="text-[16px] font-bold text-grayScale-700 ml-1">
|
||||
Select Video
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -106,7 +124,7 @@ export function ContextStep({
|
|||
<Monitor className="h-6 w-6 text-grayScale-400" />
|
||||
</div>
|
||||
<Select
|
||||
className="h-16 w-full rounded-2xl border-grayScale-100 bg-white pl-16 text-grayScale-700 font-bold focus:border-brand-500 focus:ring-0 transition-all"
|
||||
className="h-12 w-full rounded-[6px] border-grayScale-300 bg-[#fff] pl-16 text-grayScale-800 font-bold focus:border-brand-500 focus:ring-0 transition-all"
|
||||
value={formData.selectedVideo}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, selectedVideo: e.target.value })
|
||||
|
|
@ -124,9 +142,9 @@ export function ContextStep({
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between border-t border-grayScale-50 bg-[#F9FAFB]/50 p-10 px-12">
|
||||
<div className="flex items-center justify-between border-t border-grayScale-100 bg-[#F8FAFC] p-4 px-12">
|
||||
<button
|
||||
className="text-[17px] font-bold text-grayScale-500 transition-colors hover:text-grayScale-700"
|
||||
className="text-[14px] font-bold text-grayScale-500 transition-colors hover:text-grayScale-700"
|
||||
onClick={() =>
|
||||
navigate(`/new-content/learn-english/${level}/courses`)
|
||||
}
|
||||
|
|
@ -135,7 +153,7 @@ export function ContextStep({
|
|||
</button>
|
||||
<Button
|
||||
onClick={nextStep}
|
||||
className="h-14 px-10 rounded-2xl bg-brand-500 text-[17px] font-bold text-white hover:bg-brand-600 shadow-xl shadow-brand-500/20 transition-all active:scale-95 flex items-center gap-2"
|
||||
className="h-10 px-10 rounded-[6px] bg-brand-500 text-[14px] font-bold text-white transition-all active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
Next: {isModuleContext ? "Persona" : "Scenario"}{" "}
|
||||
<ArrowRight className="h-5 w-5" />
|
||||
|
|
|
|||
|
|
@ -32,56 +32,59 @@ export function PersonaStep({
|
|||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-6 sm:grid-cols-4">
|
||||
{PERSONAS.map((persona) => (
|
||||
<div
|
||||
key={persona.id}
|
||||
onClick={() => setSelectedPersona(persona.id)}
|
||||
className={cn(
|
||||
"group relative cursor-pointer rounded-2xl border-2 bg-white p-6 transition-all duration-300",
|
||||
selectedPersona === persona.id
|
||||
? "border-brand-500 shadow-xl scale-105"
|
||||
: "border-grayScale-50 hover:border-brand-200",
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="relative">
|
||||
<Avatar className="h-24 w-24 border-4 border-white shadow-lg">
|
||||
<AvatarImage src={persona.avatar} />
|
||||
<AvatarFallback>
|
||||
{persona.name.substring(0, 2)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
{selectedPersona === persona.id && (
|
||||
<div className="absolute -right-2 top-0 grid h-7 w-7 place-items-center rounded-full bg-brand-500 text-white shadow-xl ring-4 ring-white">
|
||||
<Check className="h-4 w-4 stroke-[3]" />
|
||||
</div>
|
||||
)}
|
||||
{PERSONAS.map((persona) => {
|
||||
const isSelected = selectedPersona === persona.id;
|
||||
return (
|
||||
<div
|
||||
key={persona.id}
|
||||
onClick={() => setSelectedPersona(persona.id)}
|
||||
className={cn(
|
||||
"group relative w-[260px] cursor-pointer rounded-2xl border-2 bg-white p-6 transition-all duration-300",
|
||||
isSelected
|
||||
? "border-brand-500"
|
||||
: "border-grayScale-100 hover:border-brand-200",
|
||||
)}
|
||||
>
|
||||
{/* Top-right checkmark badge */}
|
||||
{isSelected && (
|
||||
<div className="absolute right-2.5 top-2.5 grid h-6 w-6 place-items-center rounded-full bg-brand-500 text-white z-10">
|
||||
<Check className="h-4 w-4 stroke-[3]" />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
{/* Avatar with conditional purple ring */}
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-full p-[3px] transition-all duration-300",
|
||||
isSelected ? "bg-brand-500" : "bg-transparent",
|
||||
)}
|
||||
>
|
||||
<Avatar className="h-24 w-24 border-2 border-white">
|
||||
<AvatarImage src={persona.avatar} />
|
||||
<AvatarFallback>
|
||||
{persona.name.substring(0, 2)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
<span className="text-lg font-bold text-grayScale-700">
|
||||
{persona.name}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
className={cn(
|
||||
"text-lg font-bold transition-colors",
|
||||
selectedPersona === persona.id
|
||||
? "text-brand-600"
|
||||
: "text-grayScale-700",
|
||||
)}
|
||||
>
|
||||
{persona.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex items-center justify-between pt-8">
|
||||
<Button
|
||||
onClick={prevStep}
|
||||
variant="outline"
|
||||
className="h-12 w-28 rounded-xl border-grayScale-200 font-bold text-grayScale-600"
|
||||
className="h-10 w-20 rounded-[6px] border-grayScale-200 text-grayScale-600"
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
onClick={nextStep}
|
||||
className="h-12 rounded-xl bg-brand-500 px-8 font-bold hover:bg-brand-600 shadow-md shadow-brand-500/20"
|
||||
className="h-10 rounded-[6px] bg-brand-500 px-8 hover:bg-brand-600 shadow-md shadow-brand-500/20"
|
||||
>
|
||||
Next: Questions <ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,107 @@
|
|||
import { Edit2, Trash2, ArrowRight } from "lucide-react";
|
||||
import { Button } from "../../../../components/ui/button";
|
||||
import { Card } from "../../../../components/ui/card";
|
||||
import { cn } from "../../../../lib/utils";
|
||||
|
||||
interface ProgramAttachReviewStepProps {
|
||||
formData: any;
|
||||
prevStep: () => void;
|
||||
onPublish: () => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const MOCK_QUESTIONS = [
|
||||
{
|
||||
id: "q1",
|
||||
title: "1. Speak About The Photo",
|
||||
description:
|
||||
'Passage: "Good morning, everyone. I\'d like to start by reviewing the quarterly figures. As you can see from the chart..."',
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "2. Fill In the Blank",
|
||||
description:
|
||||
'Passage: "Attention passengers on Flight 492 to London. We are now inviting passengers with small children..."',
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "3. Writing Part 1",
|
||||
description:
|
||||
'Passage: "In today\'s lecture on astrophysics, we will discuss the concept of event horizons and their implications..."',
|
||||
},
|
||||
];
|
||||
|
||||
export function ProgramAttachReviewStep({
|
||||
formData,
|
||||
prevStep,
|
||||
onPublish,
|
||||
onCancel,
|
||||
}: ProgramAttachReviewStepProps) {
|
||||
return (
|
||||
<div className="space-y-6 animate-in fade-in duration-500">
|
||||
{/* Questions List */}
|
||||
<div className="space-y-6">
|
||||
{MOCK_QUESTIONS.map((q) => (
|
||||
<Card
|
||||
key={q.id}
|
||||
className="group relative flex border-grayScale-200 rounded-2xl bg-white overflow-hidden transition-all"
|
||||
>
|
||||
{/* Grip Area */}
|
||||
<div className="w-[50px] flex items-center justify-center bg-white border-r border-grayScale-200">
|
||||
<GripVertical className="h-3 w-3 text-grayScale-600" />
|
||||
</div>
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 p-8 py-10">
|
||||
<h4 className="text-[18px] font-medium text-[#0F172A] mb-3 leading-tight">
|
||||
{q.title}
|
||||
</h4>
|
||||
<p className="text-[14px] text-grayScale-400 leading-relaxed line-clamp-2">
|
||||
{q.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Actions Area (Vertical Stack) */}
|
||||
<div className="w-[50px] border-l border-grayScale-200 flex flex-col items-center justify-center divide-y divide-grayScale-50">
|
||||
<button className="flex-1 w-full flex items-center justify-center text-grayScale-600 hover:text-brand-500 transition-colors border-b border-grayScale-200">
|
||||
<Edit2 className="h-4 w-4" />
|
||||
</button>
|
||||
<button className="flex-1 w-full flex items-center justify-center text-grayScale-600 hover:text-red-500 transition-colors">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Footer Actions */}
|
||||
<div className="flex bg-[#F8FAFC] border border-grayScale-200 items-center rounded-[12px] justify-between py-4 px-6">
|
||||
<Button
|
||||
onClick={onCancel}
|
||||
variant="outline"
|
||||
className="h-10 px-6 rounded-[6px] border-grayScale-100 font-bold text-grayScale-500 bg-white hover:bg-grayScale-50 transition-all text-lg"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={onPublish}
|
||||
className="h-10 px-10 rounded-[6px] bg-[#9E2891] text-[16px] font-medium text-white transition-all active:scale-95 flex items-center gap-3"
|
||||
>
|
||||
Next: Review & Publish
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// GripVertical helper
|
||||
function GripVertical({ className }: { className?: string }) {
|
||||
return (
|
||||
<div className={cn("grid grid-cols-2 gap-0.5", className)}>
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<div key={i} className="h-1 w-1 rounded-full bg-current" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
import { LayoutGrid, Plus, ArrowRight } from "lucide-react";
|
||||
import { Button } from "../../../../components/ui/button";
|
||||
import { Card } from "../../../../components/ui/card";
|
||||
import { Select } from "../../../../components/ui/select";
|
||||
import { cn } from "../../../../lib/utils";
|
||||
|
||||
interface ProgramAttachStep1Props {
|
||||
formData: any;
|
||||
setFormData: (data: any) => void;
|
||||
nextStep: () => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
export function ProgramAttachStep1({
|
||||
formData,
|
||||
setFormData,
|
||||
nextStep,
|
||||
onCancel,
|
||||
}: ProgramAttachStep1Props) {
|
||||
return (
|
||||
<Card className="overflow-hidden border-grayScale-100 rounded-[16px] bg-white shadow-sm animate-in fade-in duration-500">
|
||||
<div className="space-y-6 p-8 pb-16">
|
||||
{/* Select Program */}
|
||||
<div className="space-y-4">
|
||||
<label className="text-[14px] font-medium text-[#0F172A] ml-1">
|
||||
Select Program
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-6 top-1/2 -translate-y-1/2 pointer-events-none z-10">
|
||||
<LayoutGrid className="h-5 w-5 text-grayScale-400" />
|
||||
</div>
|
||||
<Select
|
||||
className="h-[56px] w-full rounded-[12px] border-grayScale-200 bg-white pl-16 text-grayScale-700 font-medium focus:border-brand-500 transition-all text-sm appearance-none"
|
||||
value={formData.program}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, program: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Choose Program</option>
|
||||
<option value="exams">English Proficiency Exams</option>
|
||||
<option value="skill">Skill-Based Courses</option>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tests (Auto Select) */}
|
||||
<div className="space-y-4">
|
||||
<label className="text-[14px] font-medium text-grayScale-900 ml-1">
|
||||
Tests{" "}
|
||||
<span className="text-grayScale-400 font-medium">
|
||||
(Auto Select)
|
||||
</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-6 top-1/2 -translate-y-1/2 pointer-events-none z-10">
|
||||
<LayoutGrid className="h-5 w-5 text-grayScale-400" />
|
||||
</div>
|
||||
<div className="h-[56px] w-full rounded-[12px] border border-grayScale-200 bg-white flex items-center pl-16 text-grayScale-700 font-medium text-sm">
|
||||
Mock Exam 1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full border-t border-grayScale-300" />
|
||||
|
||||
{/* Select Question Type */}
|
||||
<div className="space-y-4">
|
||||
<label className="text-[14px] font-medium text-[#0F172A] ml-1">
|
||||
Select Question Type
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-6 top-1/2 -translate-y-1/2 pointer-events-none z-10">
|
||||
<LayoutGrid className="h-5 w-5 text-grayScale-400" />
|
||||
</div>
|
||||
<Select
|
||||
className="h-[56px] w-full rounded-[12px] border-grayScale-200 bg-white pl-16 text-grayScale-700 font-medium focus:border-brand-500 transition-all text-sm appearance-none"
|
||||
value={formData.questionType}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, questionType: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Choose question type</option>
|
||||
<option value="Speaking Practice">Speaking Practice</option>
|
||||
<option value="Writing Part 1">Writing Part 1</option>
|
||||
</Select>
|
||||
</div>
|
||||
<p className="text-[13px] text-grayScale-400 font-medium px-1">
|
||||
Select one question type that associates with th selected video
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Set Version */}
|
||||
<div className="space-y-4">
|
||||
<label className="text-[14px] font-medium text-[#0F172A] ml-1">
|
||||
Set Version
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-6 top-1/2 -translate-y-1/2 pointer-events-none z-10">
|
||||
<LayoutGrid className="h-5 w-5 text-grayScale-400" />
|
||||
</div>
|
||||
<Select
|
||||
className="h-[56px] w-full rounded-[12px] border-grayScale-200 bg-white pl-16 text-grayScale-700 font-medium focus:border-brand-500 transition-all text-sm appearance-none"
|
||||
value={formData.version}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, version: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Choose a version</option>
|
||||
<option value="V 1.0">V 1.0</option>
|
||||
<option value="V 2.0">V 2.0</option>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add More Button */}
|
||||
<button className="flex items-center gap-2 text-[#9E2891] font-medium text-[14px] group transition-all hover:translate-x-1">
|
||||
<div className="h-5 w-5 rounded-full border-2 border-[#9E2891] flex items-center justify-center">
|
||||
<Plus className="h-3 w-3" />
|
||||
</div>
|
||||
Add More
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between border-t border-grayScale-200 bg-[#F8FAFC] py-4 px-12">
|
||||
<button
|
||||
className="text-[14px] text-grayScale-500 transition-colors hover:text-grayScale-700"
|
||||
onClick={onCancel}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<Button
|
||||
onClick={nextStep}
|
||||
className="h-10 px-12 rounded-[6px] bg-[#9E2891] text-[14px] font-bold text-white shadow-lg shadow-brand-500/10 transition-all active:scale-95 flex items-center gap-3"
|
||||
>
|
||||
Next: Review
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -34,7 +34,7 @@ export function QuestionsStep({
|
|||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-1 px-2">
|
||||
<h2 className="text-2xl font-extrabold text-grayScale-700">
|
||||
<h2 className="text-2xl font-bold text-grayScale-700">
|
||||
Create Practice Questions
|
||||
</h2>
|
||||
<p className="text-grayScale-400 text-lg">
|
||||
|
|
@ -52,7 +52,7 @@ export function QuestionsStep({
|
|||
<div className="flex items-center justify-between border-b border-grayScale-50 pb-4 mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<GripVertical className="h-5 w-5 text-brand-500 cursor-grab" />
|
||||
<span className="font-bold text-grayScale-500 text-lg">
|
||||
<span className="font-bold text-grayScale-500 text-base">
|
||||
Question {i + 1}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -67,7 +67,7 @@ export function QuestionsStep({
|
|||
setFormData({ ...formData, questions: newQuestions });
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-5 w-5" />
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8">
|
||||
|
|
@ -82,7 +82,7 @@ export function QuestionsStep({
|
|||
newQuestions[i].text = e.target.value;
|
||||
setFormData({ ...formData, questions: newQuestions });
|
||||
}}
|
||||
className="h-16 rounded-xl border-grayScale-200 focus:border-brand-500 font-medium px-6 text-lg placeholder:text-grayScale-300 bg-white"
|
||||
className="h-16 rounded-xl border-grayScale-200 font-medium px-6 text-base placeholder:text-grayScale-400 bg-white text-grayScale-700"
|
||||
placeholder="e.g. How long have you been studying English?"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -90,14 +90,30 @@ export function QuestionsStep({
|
|||
<label className="text-[10px] font-bold text-grayScale-700 uppercase tracking-widest">
|
||||
VOICE PROMPT
|
||||
</label>
|
||||
<VoicePrompt filename={q.voicePrompt} />
|
||||
<VoicePrompt
|
||||
src={q.voicePrompt}
|
||||
filename={q.voicePrompt}
|
||||
onRemove={() => {
|
||||
const newQuestions = [...formData.questions];
|
||||
newQuestions[i].voicePrompt = "";
|
||||
setFormData({ ...formData, questions: newQuestions });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:w-1/3 space-y-3">
|
||||
<label className="text-[10px] font-bold text-grayScale-700 uppercase tracking-widest">
|
||||
SAMPLE ANSWER PROMPT
|
||||
</label>
|
||||
<VoicePrompt filename={q.sampleAnswer} />
|
||||
<VoicePrompt
|
||||
src={q.sampleAnswer}
|
||||
filename={q.sampleAnswer}
|
||||
onRemove={() => {
|
||||
const newQuestions = [...formData.questions];
|
||||
newQuestions[i].sampleAnswer = "";
|
||||
setFormData({ ...formData, questions: newQuestions });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
|
@ -124,13 +140,13 @@ export function QuestionsStep({
|
|||
<Button
|
||||
onClick={prevStep}
|
||||
variant="outline"
|
||||
className="h-12 w-28 rounded-xl border-grayScale-200 font-bold text-grayScale-600 shadow-sm"
|
||||
className="h-10 w-20 rounded-[6px] border-grayScale-200 font-bold text-grayScale-600 shadow-sm"
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
onClick={nextStep}
|
||||
className="h-12 rounded-xl bg-brand-500 px-8 font-bold hover:bg-brand-600 shadow-md shadow-brand-500/20"
|
||||
className="h-10 rounded-[6px] bg-brand-500 px-8 font-bold "
|
||||
>
|
||||
Next: Review <ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { Edit2, GripVertical, Trash2, Rocket, Info } from "lucide-react";
|
||||
import { Button } from "../../../../components/ui/button";
|
||||
import { Card } from "../../../../components/ui/card";
|
||||
import { Input } from "../../../../components/ui/input";
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
|
|
@ -8,7 +9,6 @@ import {
|
|||
} from "../../../../components/ui/avatar";
|
||||
import { PERSONAS } from "./constants";
|
||||
import { VoicePrompt } from "./VoicePrompt";
|
||||
import { cn } from "../../../../lib/utils";
|
||||
|
||||
interface ReviewStepProps {
|
||||
formData: any;
|
||||
|
|
@ -36,8 +36,8 @@ export function ReviewStep({
|
|||
</div>
|
||||
|
||||
{/* 1. Basic Info Card (Image 1436.1) */}
|
||||
<Card className="overflow-hidden border border-grayScale-50 shadow-soft rounded-2xl bg-white shadow-sm">
|
||||
<div className="border-b border-grayScale-50 p-6 px-10 flex justify-between items-center bg-white">
|
||||
<Card className="overflow-hidden border border-grayScale-200 rounded-2xl bg-white ">
|
||||
<div className="border-b border-grayScale-50 p-4 px-5 flex justify-between items-center bg-white">
|
||||
<h3 className="text-[17px] font-extrabold text-grayScale-900">
|
||||
Basic Information
|
||||
</h3>
|
||||
|
|
@ -50,9 +50,26 @@ export function ReviewStep({
|
|||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
<div className="p-8 px-10 flex items-center justify-between ">
|
||||
{/* Gradient Divider */}
|
||||
<div className="relative">
|
||||
<div
|
||||
className="absolute inset-0 flex items-center"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div className="w-full border-t border-grayScale-100" />
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<div
|
||||
className="h-[0.5px] w-full opacity-20 rounded-full"
|
||||
style={{
|
||||
background: "gray",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-8 px-5 flex items-center justify-between ">
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="h-[72px] w-[110px] rounded-xl bg-grayScale-100 overflow-hidden shadow-inner flex-shrink-0">
|
||||
<div className="h-[70px] w-[85px] rounded-xl bg-grayScale-100 overflow-hidden shadow-inner flex-shrink-0">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1558403194-611308249627?auto=format&fit=crop&q=80&w=200"
|
||||
alt="Banner"
|
||||
|
|
@ -60,21 +77,17 @@ export function ReviewStep({
|
|||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-[22px] font-extrabold text-grayScale-900 leading-tight">
|
||||
<h4 className="text-[22px] font-bold text-grayScale-900 leading-tight">
|
||||
{formData.title || "Business English 101: Communication"}
|
||||
</h4>
|
||||
<div className="flex items-center gap-6 text-[14px]">
|
||||
<span className="text-grayScale-900 font-bold">
|
||||
<span className="text-grayScale-900 ">
|
||||
Program:{" "}
|
||||
<span className="text-brand-500 font-extrabold">
|
||||
{formData.program}
|
||||
</span>
|
||||
<span className="text-brand-500 ">{formData.program}</span>
|
||||
</span>
|
||||
<span className="text-grayScale-900 font-bold">
|
||||
<span className="text-grayScale-900 ">
|
||||
Course:{" "}
|
||||
<span className="text-brand-500 font-extrabold">
|
||||
{formData.course}
|
||||
</span>
|
||||
<span className="text-brand-500 ">{formData.course}</span>
|
||||
</span>
|
||||
<span className="text-grayScale-900 font-bold">
|
||||
Module:{" "}
|
||||
|
|
@ -86,15 +99,15 @@ export function ReviewStep({
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<span className="text-[11px] font-bold text-grayScale-900 uppercase tracking-widest">
|
||||
<span className="text-[11px] text-left font-medium text-grayScale-900 ">
|
||||
Persona
|
||||
</span>
|
||||
<div className="flex items-center gap-2 bg-[#FAF5FF] p-2 pl-2.5 pr-4 rounded-full border border-brand-100/30">
|
||||
<div className="flex items-center gap-2 bg-[#FAF5FF] py-1 pl-2.5 pr-4 rounded-full border border-brand-100/30">
|
||||
<Avatar className="h-8 w-8 border-2 border-white shadow-sm font-bold">
|
||||
<AvatarImage src={persona?.avatar} />
|
||||
<AvatarFallback>P</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="text-[14px] font-extrabold text-brand-500 capitalize">
|
||||
<span className="text-[14px] text-brand-500 capitalize">
|
||||
{persona?.name || "Alex Johnson"}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -120,18 +133,18 @@ export function ReviewStep({
|
|||
|
||||
{isModuleContext ? (
|
||||
/* 3. Split Questions & Answers Layout (Image 1413.1) */
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 bg-white rounded-[24px] border border-grayScale-50 shadow-sm overflow-hidden min-h-[600px]">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 bg-white rounded-[12px] border border-grayScale-50 shadow-sm overflow-hidden min-h-[600px]">
|
||||
{/* Left Column: Questions */}
|
||||
<div className="border-r border-grayScale-50 flex flex-col">
|
||||
<div className="p-6 px-10 border-b border-grayScale-50 flex items-center gap-3 bg-white">
|
||||
<div className="border-r border-grayScale-200 flex flex-col">
|
||||
<div className="p-4 border-b border-grayScale-50 flex items-center gap-3 bg-white">
|
||||
<h3 className="text-[16px] font-extrabold text-[#0F172A]">
|
||||
Questions
|
||||
</h3>
|
||||
<span className="h-6 w-6 rounded-full bg-grayScale-50 flex items-center justify-center text-[12px] font-extrabold text-grayScale-300">
|
||||
<span className="h-6 w-6 rounded-full bg-grayScale-100 flex items-center justify-center text-[12px] font-extrabold text-grayScale-500">
|
||||
{formData.questions.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="p-10 space-y-14">
|
||||
<div className="p-4 space-y-14">
|
||||
{formData.questions.map((q: any, i: number) => (
|
||||
<div key={q.id} className="relative pl-12">
|
||||
<span className="absolute left-0 top-0 text-[18px] font-bold text-grayScale-400 tracking-tighter opacity-70">
|
||||
|
|
@ -163,19 +176,19 @@ export function ReviewStep({
|
|||
|
||||
{/* Right Column: Answers */}
|
||||
<div className="flex flex-col">
|
||||
<div className="p-6 px-10 border-b border-grayScale-50 flex items-center justify-between bg-white">
|
||||
<div className="p-4 border-b border-grayScale-50 flex items-center justify-between bg-white">
|
||||
<div className="flex items-center gap-3">
|
||||
<h3 className="text-[16px] font-extrabold ">Answers</h3>
|
||||
<span className="h-6 w-6 rounded-full bg-grayScale-50 flex items-center justify-center text-[12px] font-extrabold text-brand-300">
|
||||
<span className="h-6 w-6 rounded-full bg-grayScale-100 flex items-center justify-center text-[12px] font-extrabold text-grayScale-500">
|
||||
{formData.questions.length}
|
||||
</span>
|
||||
</div>
|
||||
<button className="flex items-center gap-2 text-brand-500 font-bold text-[15px] hover:opacity-80 transition-opacity">
|
||||
<Edit2 className="h-4 w-4" />
|
||||
<Edit2 className="h-3 w-3" />
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-10 space-y-14">
|
||||
<div className="p-4 space-y-14">
|
||||
{formData.questions.map((q: any, i: number) => (
|
||||
<div key={q.id + "_ans"} className="relative pl-12">
|
||||
<span className="absolute left-0 top-0 text-[18px] font-bold text-grayScale-400 tracking-tighter opacity-70">
|
||||
|
|
@ -187,7 +200,7 @@ export function ReviewStep({
|
|||
</span>
|
||||
<VoicePrompt
|
||||
filename={q.sampleAnswer}
|
||||
className="bg-[#FAF5FF]/60 border-[#F3E8FF] h-[72px]"
|
||||
className="bg-[#FAF5FF]/60 border-[#F3E8FF] h-[60px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -209,20 +222,20 @@ export function ReviewStep({
|
|||
<Button
|
||||
onClick={prevStep}
|
||||
variant="outline"
|
||||
className="h-12 px-10 rounded-xl border-grayScale-200 font-bold text-grayScale-600 bg-white shadow-sm hover:bg-grayScale-50 transition-all text-sm"
|
||||
className="h-10 px-10 rounded-[6px] border-grayScale-200 font-bold text-grayScale-600 bg-white shadow-sm hover:bg-grayScale-50 transition-all text-sm"
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<div className="flex gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-12 px-8 rounded-xl border-grayScale-100 font-bold text-grayScale-600 bg-white shadow-sm hover:bg-grayScale-50 transition-all text-sm"
|
||||
className="h-10 px-8 rounded-[6px] border-grayScale-100 font-bold text-grayScale-600 bg-white shadow-sm hover:bg-grayScale-50 transition-all text-sm"
|
||||
>
|
||||
Save as Draft
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setIsPublished(true)}
|
||||
className="h-12 px-10 rounded-xl bg-brand-500 font-bold hover:bg-brand-600 shadow-xl shadow-brand-500/20 gap-3 active:scale-95 transition-all text-white text-sm"
|
||||
className="h-10 px-10 rounded-[6px] bg-brand-500 font-bold hover:bg-brand-600 shadow-xl shadow-brand-500/20 gap-3 active:scale-95 transition-all text-white text-sm"
|
||||
>
|
||||
<Rocket className="h-4 w-4" />
|
||||
Publish Now
|
||||
|
|
@ -235,53 +248,55 @@ export function ReviewStep({
|
|||
|
||||
function ReviewItem({ q, index }: { q: any; index: number }) {
|
||||
return (
|
||||
<Card className="overflow-hidden border border-grayScale-50 shadow-sm rounded-2xl bg-white relative p-8 group">
|
||||
<div className="absolute left-0 top-0 bottom-0 w-[5px] bg-brand-500 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-center justify-between border-b border-grayScale-50 pb-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<GripVertical className="h-4 w-4 text-grayScale-200" />
|
||||
<span className="font-bold text-grayScale-800 text-[18px]">
|
||||
<Card className="overflow-hidden border-grayScale-50 shadow-soft rounded-2xl bg-white relative">
|
||||
<div className="absolute left-0 top-0 bottom-0 w-[5px] bg-brand-500" />
|
||||
<div className="px-5 pb-7 pt-2 space-y-6">
|
||||
<div className="flex items-center justify-between border-b border-grayScale-50 pb-4 mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<GripVertical className="h-5 w-5 text-brand-500 cursor-grab" />
|
||||
<span className="font-bold text-grayScale-500 text-base">
|
||||
Question {index + 1}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button className="h-9 w-9 rounded-lg border border-grayScale-100 flex items-center justify-center text-grayScale-400 hover:text-brand-500 hover:border-brand-100 transition-all">
|
||||
<Edit2 className="h-4 w-4" />
|
||||
</button>
|
||||
<button className="h-9 w-9 rounded-lg border border-grayScale-100 flex items-center justify-center text-grayScale-400 hover:text-red-500 hover:border-red-100 transition-all">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-brand-500 hover:bg-brand-50 rounded-lg"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<div className="space-y-4">
|
||||
<span className="text-[11px] font-extrabold text-grayScale-300 uppercase tracking-widest block">
|
||||
TEXT PROMPT
|
||||
</span>
|
||||
<p className="text-[16px] font-medium text-grayScale-600 leading-relaxed shadow-sm p-6 border border-grayScale-50 rounded-2xl bg-[#F8FAFC]/30">
|
||||
{q.text}
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8">
|
||||
<div className="md:col-span-8 space-y-3">
|
||||
<label className="text-[10px] font-bold text-grayScale-700 uppercase tracking-widest">
|
||||
QUESTION PROMPT
|
||||
</label>
|
||||
<Input
|
||||
value={q.text}
|
||||
readOnly
|
||||
className="h-16 rounded-xl border-grayScale-200 font-medium px-6 text-base placeholder:text-grayScale-400 bg-white text-grayScale-700"
|
||||
placeholder="e.g. How long have you been studying English?"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<span className="text-[11px] font-extrabold text-grayScale-300 uppercase tracking-widest block">
|
||||
<div className="md:col-span-4 space-y-3">
|
||||
<label className="text-[10px] font-bold text-grayScale-700 uppercase tracking-widest">
|
||||
VOICE PROMPT
|
||||
</span>
|
||||
</label>
|
||||
<VoicePrompt
|
||||
src={q.voicePrompt}
|
||||
filename={q.voicePrompt}
|
||||
className="bg-[#FAF5FF]/60 border-[#F3E8FF] h-[76px]"
|
||||
onRemove={() => {}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 max-w-sm">
|
||||
<span className="text-[11px] font-extrabold text-grayScale-300 uppercase tracking-widest block">
|
||||
SAMPLE ANSWER
|
||||
</span>
|
||||
<div className="md:w-1/3 space-y-3">
|
||||
<label className="text-[10px] font-bold text-grayScale-700 uppercase tracking-widest">
|
||||
SAMPLE ANSWER PROMPT
|
||||
</label>
|
||||
<VoicePrompt
|
||||
src={q.sampleAnswer}
|
||||
filename={q.sampleAnswer}
|
||||
className="bg-grayScale-50/10 border-dashed h-[72px]"
|
||||
onRemove={() => {}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,44 +27,43 @@ export function ScenarioStep({
|
|||
Set the scene and context for this English practice session.
|
||||
</p>
|
||||
</div>
|
||||
<Card className="p-8 space-y-6 border-grayScale-50 shadow-soft rounded-2xl bg-white">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-bold text-grayScale-700">
|
||||
<Card className="p-8 space-y-6 border-grayScale-200 rounded-2xl bg-white">
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm text-grayScale-700">
|
||||
Practice Banner Image
|
||||
</label>
|
||||
<p className="text-xs text-grayScale-400">
|
||||
<p className="text-xs pb-2 text-grayScale-400">
|
||||
This image will appear as the background for the scenario.
|
||||
</p>
|
||||
<div className="mt-4 flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-grayScale-100 bg-[#F8F9FA] p-12 hover:bg-grayScale-50 transition-all">
|
||||
<div className="mt-4 flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-grayScale-200 bg-[#F8F9FA] p-12 hover:bg-grayScale-50 transition-all">
|
||||
<div className="mb-4 rounded-xl border border-grayScale-100 bg-white p-3 text-brand-500 shadow-sm">
|
||||
<Upload className="h-6 w-6" />
|
||||
</div>
|
||||
<p className="text-sm">
|
||||
<span className="font-bold text-grayScale-700">
|
||||
Click to upload
|
||||
</span>{" "}
|
||||
<span className="text-grayScale-500">or drag and drop</span>
|
||||
<span className="text-grayScale-700">
|
||||
Click to upload or drag and drop
|
||||
</span>
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-grayScale-400 uppercase tracking-wide font-bold">
|
||||
<p className="mt-1 text-xs text-grayScale-400 uppercase tracking-wide ">
|
||||
SVG, PNG, JPG (MAX 5MB)
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="mt-6 h-10 rounded-xl border-grayScale-200 bg-white px-8 font-bold text-grayScale-600 shadow-sm hover:bg-grayScale-50"
|
||||
className="mt-6 h-10 rounded-[6px] border-grayScale-200 bg-white px-8 font-bold text-brand-500 shadow-sm hover:bg-grayScale-50"
|
||||
>
|
||||
Browse Files
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card className="p-8 space-y-6 border-grayScale-50 shadow-soft rounded-2xl bg-white">
|
||||
<Card className="p-8 space-y-6 border-grayScale-200 rounded-2xl bg-white">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-bold text-grayScale-700">
|
||||
<label className="text-sm font-medium text-grayScale-700">
|
||||
Practice Title <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
placeholder="e.g., Ordering Coffee at a Cafe"
|
||||
className="h-14 rounded-xl border-grayScale-200 focus:border-brand-500 font-bold placeholder:text-grayScale-300 bg-white"
|
||||
className="h-12 rounded-xl border-grayScale-200 focus:border-brand-500 placeholder:text-grayScale-500 bg-white"
|
||||
value={formData.title}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, title: e.target.value })
|
||||
|
|
@ -72,13 +71,13 @@ export function ScenarioStep({
|
|||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-bold text-grayScale-700">
|
||||
<label className="text-sm font-medium text-grayScale-700">
|
||||
Scenario Description <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Textarea
|
||||
placeholder="Describe the setting..."
|
||||
className="min-h-[160px] rounded-xl resize-none p-4 border-grayScale-200 focus:border-brand-500 leading-relaxed font-bold placeholder:text-grayScale-300 bg-white"
|
||||
className="min-h-[160px] rounded-xl resize-none p-4 border-grayScale-200 focus:border-brand-500 leading-relaxed placeholder:text-grayScale-500 bg-white"
|
||||
maxLength={1000}
|
||||
value={formData.description}
|
||||
onChange={(e) =>
|
||||
|
|
@ -88,24 +87,28 @@ export function ScenarioStep({
|
|||
})
|
||||
}
|
||||
/>
|
||||
<div className="absolute bottom-4 right-4 text-xs font-bold text-grayScale-300">
|
||||
<div className="absolute bottom-4 right-4 text-xs font-bold text-grayScale-500">
|
||||
{formData.description.length} / 1000
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-xs text-grayScale-500">
|
||||
Provide context for the AI and the student. Be specific about the
|
||||
location and the goal.
|
||||
</span>
|
||||
</div>
|
||||
</Card>
|
||||
<div className="flex items-center justify-between pt-4">
|
||||
<Button
|
||||
onClick={prevStep}
|
||||
variant="outline"
|
||||
className="h-12 w-28 rounded-xl border-grayScale-200 font-bold text-grayScale-600 shadow-sm"
|
||||
className="h-10 w-20 rounded-[6px] border-grayScale-200 text-grayScale-600 shadow-sm"
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
onClick={nextStep}
|
||||
disabled={!formData.title || !formData.description}
|
||||
className="h-12 rounded-xl bg-brand-500 px-8 font-bold hover:bg-brand-600 shadow-md shadow-brand-500/20"
|
||||
className="h-10 rounded-[6px] bg-brand-500 px-8 "
|
||||
>
|
||||
Next: Persona <ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,44 +1,182 @@
|
|||
import { Play, X } from "lucide-react";
|
||||
import { Button } from "../../../../components/ui/button";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Play, Pause, X } from "lucide-react";
|
||||
import { cn } from "../../../../lib/utils";
|
||||
|
||||
interface VoicePromptProps {
|
||||
/** Either a URL/path to the audio file, or a filename string (for display-only mode) */
|
||||
src?: string;
|
||||
filename: string;
|
||||
onRemove?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function VoicePrompt({ filename, className }: VoicePromptProps) {
|
||||
const BAR_COUNT = 24;
|
||||
|
||||
export function VoicePrompt({
|
||||
src,
|
||||
filename,
|
||||
onRemove,
|
||||
className,
|
||||
}: VoicePromptProps) {
|
||||
const [bars, setBars] = useState<number[]>([]);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [progress, setProgress] = useState(0); // 0–1
|
||||
|
||||
const audioRef = useRef<HTMLAudioElement | null>(null);
|
||||
const rafRef = useRef<number | null>(null);
|
||||
|
||||
// ─── Decode audio and build waveform bars ───────────────────────────────────
|
||||
useEffect(() => {
|
||||
if (!src) {
|
||||
// No real audio — generate plausible static bars
|
||||
setBars(generateFakeBars());
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
const audioCtx = new AudioContext();
|
||||
|
||||
fetch(src)
|
||||
.then((r) => r.arrayBuffer())
|
||||
.then((buf) => audioCtx.decodeAudioData(buf))
|
||||
.then((decoded) => {
|
||||
if (cancelled) return;
|
||||
const raw = decoded.getChannelData(0);
|
||||
const blockSize = Math.floor(raw.length / BAR_COUNT);
|
||||
const barsData = Array.from({ length: BAR_COUNT }, (_, i) => {
|
||||
let sum = 0;
|
||||
for (let j = 0; j < blockSize; j++) {
|
||||
sum += Math.abs(raw[i * blockSize + j]);
|
||||
}
|
||||
return sum / blockSize;
|
||||
});
|
||||
// Normalize to 0–1
|
||||
const max = Math.max(...barsData, 0.001);
|
||||
setBars(barsData.map((v) => v / max));
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) setBars(generateFakeBars());
|
||||
})
|
||||
.finally(() => audioCtx.close());
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [src]);
|
||||
|
||||
// ─── Sync progress while playing ────────────────────────────────────────────
|
||||
const startProgressLoop = () => {
|
||||
const tick = () => {
|
||||
const el = audioRef.current;
|
||||
if (!el) return;
|
||||
setProgress(el.currentTime / (el.duration || 1));
|
||||
rafRef.current = requestAnimationFrame(tick);
|
||||
};
|
||||
rafRef.current = requestAnimationFrame(tick);
|
||||
};
|
||||
|
||||
const stopProgressLoop = () => {
|
||||
if (rafRef.current !== null) {
|
||||
cancelAnimationFrame(rafRef.current);
|
||||
rafRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
// ─── Play / Pause ────────────────────────────────────────────────────────────
|
||||
const handlePlayPause = () => {
|
||||
if (!src) return;
|
||||
|
||||
if (!audioRef.current) {
|
||||
audioRef.current = new Audio(src);
|
||||
audioRef.current.onended = () => {
|
||||
setIsPlaying(false);
|
||||
setProgress(0);
|
||||
stopProgressLoop();
|
||||
};
|
||||
}
|
||||
|
||||
if (isPlaying) {
|
||||
audioRef.current.pause();
|
||||
stopProgressLoop();
|
||||
setIsPlaying(false);
|
||||
} else {
|
||||
audioRef.current.play().then(() => {
|
||||
setIsPlaying(true);
|
||||
startProgressLoop();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// ─── Cleanup on unmount ──────────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
stopProgressLoop();
|
||||
audioRef.current?.pause();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const playedBars = Math.round(progress * BAR_COUNT);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-4 p-4 bg-brand-50/5 rounded-xl border border-grayScale-50 h-20 shadow-sm",
|
||||
"flex items-center gap-4 px-4 py-3 bg-[#F9F0FB] rounded-6px border border-brand-100 min-h-[60px]",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="h-10 w-10 rounded-full bg-brand-500 flex items-center justify-center text-white shadow-md flex-shrink-0 cursor-pointer hover:bg-brand-600 transition-colors">
|
||||
<Play className="h-5 w-5 fill-current ml-1" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="h-6 flex items-end gap-[2px] px-1 overflow-hidden opacity-40 mb-1">
|
||||
{[...Array(20)].map((_, idx) => (
|
||||
{/* Play / Pause button */}
|
||||
<button
|
||||
onClick={handlePlayPause}
|
||||
className="h-8 w-8 flex-shrink-0 rounded-full bg-brand-500 flex items-center justify-center text-white shadow-md hover:bg-brand-600 transition-colors"
|
||||
>
|
||||
{isPlaying ? (
|
||||
<Pause className="h-3 w-3 fill-current" />
|
||||
) : (
|
||||
<Play className="h-3 w-3 fill-current ml-0.5" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Waveform + filename */}
|
||||
<div className="flex-1 min-w-0 flex flex-col gap-1">
|
||||
{/* Bars — centered vertically, grow up and down */}
|
||||
<div className="flex items-center gap-[3.5px] h-6 overflow-hidden">
|
||||
{(bars.length ? bars : generateFakeBars()).map((v, i) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="w-[3px] bg-brand-500 rounded-full"
|
||||
style={{ height: `${Math.random() * 80 + 20}%` }}
|
||||
key={i}
|
||||
className="w-[4px] rounded-full flex-shrink-0"
|
||||
style={{
|
||||
height: `${Math.max(v * 100, 14)}%`,
|
||||
backgroundColor: i < playedBars ? "#9E2891" : "#D5C5DC",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[10px] font-bold text-brand-500 truncate">
|
||||
{/* Filename */}
|
||||
<p className="text-[11px] font-semibold text-brand-500 truncate">
|
||||
{filename}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-grayScale-300 rounded-lg"
|
||||
>
|
||||
<X className="h-5 w-5" color="#9E2891" />
|
||||
</Button>
|
||||
|
||||
{/* Remove button */}
|
||||
{onRemove && (
|
||||
<button
|
||||
onClick={onRemove}
|
||||
className="flex-shrink-0 text-brand-500 hover:text-brand-700 transition-colors p-1"
|
||||
aria-label="Remove"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
||||
function generateFakeBars(): number[] {
|
||||
// Realistic-looking static waveform (peaks in middle, quieter at edges)
|
||||
return Array.from({ length: BAR_COUNT }, (_, i) => {
|
||||
const center = BAR_COUNT / 2;
|
||||
const envelope = 1 - Math.abs(i - center) / center;
|
||||
return Math.max(0.1, envelope * (0.4 + Math.random() * 0.6));
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,11 @@
|
|||
import { Rocket, Edit2, Layout } from "lucide-react";
|
||||
import {
|
||||
Rocket,
|
||||
Edit2,
|
||||
Layout,
|
||||
Volume2,
|
||||
Settings,
|
||||
Maximize2,
|
||||
} from "lucide-react";
|
||||
import { Button } from "../../../../components/ui/button";
|
||||
|
||||
interface ReviewPublishStepProps {
|
||||
|
|
@ -33,17 +40,33 @@ export function ReviewPublishStep({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Controls Placeholder */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent">
|
||||
<div className="h-1.5 w-full bg-white/20 rounded-full mb-4 relative overflow-hidden">
|
||||
<div className="absolute left-0 top-0 bottom-0 w-1/3 bg-brand-500" />
|
||||
<div className="absolute left-1/3 top-1/2 -translate-y-1/2 h-3 w-3 rounded-full bg-white shadow-lg" />
|
||||
{/* Bottom Controls — Matching Image 1884 */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/95 via-black/40 to-transparent space-y-4">
|
||||
{/* Row 1: Seeker and Timestamps */}
|
||||
<div className="flex items-center gap-4 text-white">
|
||||
<span className="text-[13px] font-medium opacity-90">0:00</span>
|
||||
<div className="flex-1 h-1 bg-white/20 rounded-full relative cursor-pointer overflow-hidden group/seeker">
|
||||
<div
|
||||
className="absolute left-0 top-0 bottom-0 bg-brand-500 rounded-full"
|
||||
style={{ width: "40%" }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[13px] font-medium opacity-90">
|
||||
12:30
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-white/90 text-sm font-medium">
|
||||
<span>0:00 / 12:30</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-4 w-6 border-2 border-white/40 rounded-[2px]" />
|
||||
<div className="h-4 w-4 border-2 border-white/40 rounded-full" />
|
||||
|
||||
{/* Row 2: Icons */}
|
||||
<div className="flex items-center justify-between text-white">
|
||||
<div className="flex items-center gap-6">
|
||||
<Volume2 className="h-[22px] w-[22px] opacity-90 cursor-pointer hover:opacity-100 transition-opacity" />
|
||||
<div className="h-5 w-6 border-2 border-white rounded-[3px] flex items-center justify-center text-[9px] font-bold opacity-90 cursor-pointer hover:opacity-100 transition-opacity">
|
||||
CC
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<Settings className="h-5 w-5 opacity-90 cursor-pointer hover:opacity-100 transition-opacity" />
|
||||
<Maximize2 className="h-5 w-5 opacity-90 cursor-pointer hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -54,14 +77,14 @@ export function ReviewPublishStep({
|
|||
{/* 2. Content Details Card */}
|
||||
<div className="bg-white rounded-[16px] border border-grayScale-50 shadow-sm overflow-hidden">
|
||||
<div className="px-8 py-5 border-b border-grayScale-50 flex items-center justify-between bg-white">
|
||||
<h3 className="text-[17px] font-bold text-grayScale-900">
|
||||
<h3 className="text-[16px] font-bold text-grayScale-900">
|
||||
Content Details
|
||||
</h3>
|
||||
<button
|
||||
onClick={prevStep}
|
||||
className="flex items-center gap-2 text-brand-500 font-bold text-sm hover:opacity-80 transition-opacity"
|
||||
>
|
||||
<Edit2 className="h-4 w-4" />
|
||||
<Edit2 className="h-3 w-3" />
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -70,37 +93,37 @@ export function ReviewPublishStep({
|
|||
{/* Metadata Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div className="space-y-2">
|
||||
<span className="text-[11px] font-bold text-grayScale-300 uppercase tracking-widest block">
|
||||
<span className="text-[11px] font-bold text-grayScale-500 uppercase tracking-widest block">
|
||||
TITLE
|
||||
</span>
|
||||
<p className="text-[15px] font-bold text-grayScale-900">
|
||||
<p className="text-[15px] font-medium text-grayScale-900">
|
||||
{formData.title || "Introduction to Past Tense"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<span className="text-[11px] font-bold text-grayScale-300 uppercase tracking-widest block">
|
||||
<span className="text-[11px] font-bold text-grayScale-500 uppercase tracking-widest block">
|
||||
ASSIGNED MODULE
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Layout className="h-4 w-4 text-grayScale-400" />
|
||||
<p className="text-[14px] font-bold text-grayScale-700">
|
||||
<p className="text-[14px] font-medium text-grayScale-700">
|
||||
Grammar Basics - Level 1
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<span className="text-[11px] font-bold text-grayScale-300 uppercase tracking-widest block">
|
||||
<span className="text-[11px] font-bold text-grayScale-500 uppercase tracking-widest block">
|
||||
TEACHER NAME
|
||||
</span>
|
||||
<p className="text-[15px] font-bold text-grayScale-600">
|
||||
<p className="text-[15px] font-medium text-grayScale-600">
|
||||
Abebe Kebede
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<span className="text-[11px] font-bold text-grayScale-300 uppercase tracking-widest block">
|
||||
<span className="text-[11px] font-bold text-grayScale-500 uppercase tracking-widest block">
|
||||
FILE SIZE
|
||||
</span>
|
||||
<div className="flex items-baseline gap-1.5">
|
||||
|
|
@ -116,11 +139,11 @@ export function ReviewPublishStep({
|
|||
|
||||
{/* Description Section */}
|
||||
<div className="space-y-3">
|
||||
<span className="text-[11px] font-bold text-grayScale-300 uppercase tracking-widest block">
|
||||
<span className="text-[11px] font-bold text-grayScale-500 uppercase tracking-widest block">
|
||||
DESCRIPTION
|
||||
</span>
|
||||
<div
|
||||
className="text-[14px] text-grayScale-600 font-medium leading-relaxed max-w-4xl"
|
||||
className="text-[14px] text-grayScale-600 leading-relaxed max-w-4xl"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html:
|
||||
formData.description ||
|
||||
|
|
@ -130,12 +153,30 @@ export function ReviewPublishStep({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gradient Divider */}
|
||||
<div className="relative">
|
||||
<div
|
||||
className="absolute inset-0 flex items-center"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div className="w-full border-t border-grayScale-200" />
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<div
|
||||
className="h-[0.5px] w-full opacity-20 rounded-full"
|
||||
style={{
|
||||
background: "gray",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. Normal Footer (Inside Card) */}
|
||||
<div className="px-8 py-6 border-t border-grayScale-50 flex items-center justify-between bg-white">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={prevStep}
|
||||
className="h-12 px-8 rounded-xl border-grayScale-200 font-bold text-grayScale-600 hover:bg-grayScale-50 transition-all shadow-sm"
|
||||
className="h-10 px-8 rounded-xl border-grayScale-200 font-bold text-grayScale-600 hover:bg-grayScale-50 transition-all shadow-sm"
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
|
|
@ -143,13 +184,13 @@ export function ReviewPublishStep({
|
|||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-12 px-8 rounded-xl border-grayScale-100 font-bold text-grayScale-600 hover:bg-grayScale-50 transition-all shadow-sm"
|
||||
className="h-12 px-8 rounded-[6px] border-grayScale-100 font-bold text-grayScale-600 hover:bg-grayScale-50 transition-all shadow-sm"
|
||||
>
|
||||
Save as Draft
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setIsPublished(true)}
|
||||
className="h-12 px-10 rounded-xl bg-brand-500 font-bold text-white hover:bg-brand-600 shadow-lg shadow-brand-500/20 transition-all flex items-center gap-2.5"
|
||||
className="h-10 px-10 rounded-[6px] bg-brand-500 font-bold text-white shadow-brand-500/20 transition-all flex items-center gap-2.5"
|
||||
>
|
||||
<Rocket className="h-4 w-4" />
|
||||
Publish Now
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {
|
|||
Lightbulb,
|
||||
ChevronRight,
|
||||
ImageIcon,
|
||||
ArrowRight,
|
||||
} from "lucide-react";
|
||||
import { Button } from "../../../../components/ui/button";
|
||||
import { Input } from "../../../../components/ui/input";
|
||||
|
|
@ -55,7 +56,7 @@ export function VideoDetailStep({
|
|||
return (
|
||||
<div className="animate-in fade-in slide-in-from-bottom-4 duration-700 max-w-[1200px] mx-auto pb-20">
|
||||
{/* Single Unified Card for Everything */}
|
||||
<div className="bg-white rounded-[24px] border border-grayScale-50 p-10 shadow-sm space-y-12">
|
||||
<div className="bg-white rounded-[24px] border border-grayScale-50 p-10 shadow-sm space-y-8">
|
||||
{/* 1. Upload Video Section */}
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-[20px] font-bold text-grayScale-900 ml-1">
|
||||
|
|
@ -71,7 +72,7 @@ export function VideoDetailStep({
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="text-[17px] font-bold text-grayScale-900 mb-2">
|
||||
<h4 className="text-[17px] text-grayScale-900 mb-2">
|
||||
Drag and drop video files here
|
||||
</h4>
|
||||
<p className="text-grayScale-400 font-medium text-[13px] mb-8">
|
||||
|
|
@ -79,11 +80,11 @@ export function VideoDetailStep({
|
|||
</p>
|
||||
|
||||
<div className="flex items-center gap-4 w-full max-w-[200px] mb-8">
|
||||
<div className="flex-1 h-[1px] bg-grayScale-100" />
|
||||
<span className="text-[10px] font-bold text-grayScale-300 uppercase tracking-widest">
|
||||
<div className="flex-1 h-[1px] bg-grayScale-200" />
|
||||
<span className="text-[12px] font-bold text-grayScale-300 uppercase tracking-widest">
|
||||
OR
|
||||
</span>
|
||||
<div className="flex-1 h-[1px] bg-grayScale-100" />
|
||||
<div className="flex-1 h-[1px] bg-grayScale-200" />
|
||||
</div>
|
||||
|
||||
<Button
|
||||
|
|
@ -95,18 +96,35 @@ export function VideoDetailStep({
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Gradient Divider */}
|
||||
<div className="relative">
|
||||
<div
|
||||
className="absolute inset-0 flex items-center"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div className="w-full border-t border-grayScale-200" />
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<div
|
||||
className="h-[0.5px] w-full opacity-20 rounded-full"
|
||||
style={{
|
||||
background: "gray",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2. Form & Side Panel Grid */}
|
||||
<div className="flex flex-col lg:flex-row gap-12 items-start pt-4 border-t border-grayScale-50">
|
||||
<div className="flex flex-col lg:flex-row gap-12 items-start">
|
||||
{/* Left Column: Title, Order, Description */}
|
||||
<div className="flex-1 w-full space-y-10">
|
||||
<div className="space-y-3">
|
||||
<label className="text-[14px] font-bold text-grayScale-900 ml-1">
|
||||
<label className="text-[14px] font-medium text-grayScale-900 ml-1">
|
||||
Video Title
|
||||
</label>
|
||||
<Input
|
||||
placeholder="e.g., Introduction to Past Tense Verbs"
|
||||
className="h-14 rounded-xl border-grayScale-100 bg-white px-6 text-[15px] text-grayScale-800 placeholder:text-grayScale-300 focus:border-brand-500 font-medium transition-all shadow-sm"
|
||||
className="h-12 rounded-xl border-grayScale-200 bg-white px-6 text-[15px] text-grayScale-800 placeholder:text-grayScale-500 focus:border-brand-500 font-medium transition-all shadow-sm"
|
||||
value={formData.title}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, title: e.target.value })
|
||||
|
|
@ -115,11 +133,11 @@ export function VideoDetailStep({
|
|||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label className="text-[14px] font-bold text-grayScale-900 ml-1">
|
||||
<label className="text-[14px] font-medium text-grayScale-900 ml-1">
|
||||
Video Order
|
||||
</label>
|
||||
<Select
|
||||
className="h-14 rounded-xl border-grayScale-100 bg-white px-6 text-[15px] text-grayScale-800 font-medium cursor-pointer focus:border-brand-500 shadow-sm"
|
||||
className="h-12 rounded-xl border-grayScale-200 bg-white px-6 text-[15px] text-grayScale-800 font-medium cursor-pointer focus:border-brand-500 shadow-sm"
|
||||
value={formData.order}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, order: (e.target as any).value })
|
||||
|
|
@ -132,12 +150,12 @@ export function VideoDetailStep({
|
|||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label className="text-[14px] font-bold text-grayScale-900 ml-1">
|
||||
<label className="text-[14px] font-medium text-grayScale-900 ml-1">
|
||||
Description
|
||||
</label>
|
||||
<div className="rounded-xl border border-grayScale-100 bg-white overflow-hidden flex flex-col min-h-[380px] shadow-sm focus-within:border-brand-200 transition-all">
|
||||
<div className="rounded-xl border border-grayScale-200 bg-white overflow-hidden flex flex-col min-h-[200px] shadow-sm focus-within:border-brand-200 transition-all">
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center gap-1 p-2 bg-[#F8FAFC]">
|
||||
<div className="flex items-center gap-1 bg-[#F8FAFC]">
|
||||
<div className="flex items-center gap-1 w-fit bg-transparent px-2 py-1 rounded-lg">
|
||||
<button
|
||||
onClick={() => handleCommand("bold")}
|
||||
|
|
@ -182,8 +200,7 @@ export function VideoDetailStep({
|
|||
ref={editorRef}
|
||||
contentEditable
|
||||
onInput={handleInput}
|
||||
className="w-full h-full min-h-[300px] focus:outline-none text-[15px] text-grayScale-700 font-medium leading-relaxed prose prose-sm max-w-none"
|
||||
// Removed dangerouslySetInnerHTML to prevent cursor jumping
|
||||
className="w-full min-h-[140px] focus:outline-none text-[15px] text-grayScale-700 font-medium leading-relaxed prose prose-sm max-w-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -191,11 +208,11 @@ export function VideoDetailStep({
|
|||
</div>
|
||||
|
||||
{/* Right Column: Thumbnail, Pro Tip */}
|
||||
<div className="w-full lg:w-[320px] space-y-10">
|
||||
<div className="w-full lg:w-[320px] space-y-5">
|
||||
{/* Thumbnail Section */}
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-1 ml-1">
|
||||
<h3 className="text-[14px] font-bold text-grayScale-900">
|
||||
<h3 className="text-[14px] font-medium text-grayScale-900">
|
||||
Thumbnail
|
||||
</h3>
|
||||
<p className="text-[12px] text-grayScale-400 font-medium leading-relaxed">
|
||||
|
|
@ -203,11 +220,11 @@ export function VideoDetailStep({
|
|||
</p>
|
||||
</div>
|
||||
<div className="relative group cursor-pointer aspect-video">
|
||||
<div className="h-full w-full flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-[#E2E8F0] bg-[#F8FAFC]/50 p-6 transition-all group-hover:border-brand-200">
|
||||
<div className="h-10 w-10 rounded bg-white shadow-sm flex items-center justify-center mb-3">
|
||||
<ImageIcon className="h-5 w-5 text-grayScale-400" />
|
||||
<div className="h-full w-full flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-grayScale-200 bg-[#F8FAFC]/50 p-6 transition-all group-hover:border-brand-200">
|
||||
<div className="h-10 w-10 flex items-center justify-center mb-3">
|
||||
<ImageIcon className="h-7 w-7 text-grayScale-400" />
|
||||
</div>
|
||||
<p className="text-[13px] font-bold text-brand-500">
|
||||
<p className="text-[13px] font-bold text-brand-400">
|
||||
Click to upload
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -215,40 +232,38 @@ export function VideoDetailStep({
|
|||
</div>
|
||||
|
||||
{/* Pro Tip Section */}
|
||||
<div className="bg-[#FAF5FF] rounded-xl border border-[#F3E8FF] p-6 space-y-3">
|
||||
<div className="bg-brand-500/5 flex items-start gap-3 rounded-xl border border-[#F3E8FF] p-6 space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-8 w-8 flex-shrink-0 rounded-full bg-white flex items-center justify-center border border-[#F3E8FF] shadow-sm">
|
||||
<div className="h-8 w-8 flex-shrink-0 flex items-center justify-center">
|
||||
<Lightbulb className="h-4 w-4 text-brand-50" fill="#A855F7" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<Lightbulb className="h-4 w-4 text-brand-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative top-[-10px]">
|
||||
<h3 className="text-[14px] font-bold text-grayScale-900">
|
||||
Pro Tip
|
||||
</h3>
|
||||
<p className="text-[12px] text-grayScale-700 font-medium leading-relaxed">
|
||||
Short, descriptive titles work best. Include keywords like
|
||||
"Grammar" or "Vocabulary" to help students find your content.
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-[12px] text-grayScale-700 font-medium leading-relaxed">
|
||||
Short, descriptive titles work best. Include keywords like
|
||||
"Grammar" or "Vocabulary" to help students find your content.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer (Inside Card Container) */}
|
||||
<div className="pt-10 border-t border-grayScale-50 flex items-center justify-between">
|
||||
<div className="pt-5 border-t border-grayScale-200 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-2 w-2 rounded-full bg-brand-500 animate-pulse" />
|
||||
<span className="text-[14px] font-bold text-grayScale-400">
|
||||
<span className="text-[14px] font-medium text-grayScale-600">
|
||||
Last saved: Just now
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
onClick={nextStep}
|
||||
className="h-12 px-10 rounded-xl bg-brand-500 font-bold text-white hover:bg-brand-600 shadow-lg shadow-brand-500/20 transition-all flex items-center gap-2 text-sm group active:scale-95"
|
||||
className="h-10 px-10 rounded-[6px] bg-brand-500 font-bold text-white transition-all flex items-center gap-2 text-sm group active:scale-95"
|
||||
>
|
||||
Continue
|
||||
<ChevronRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user