info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-01 13:22:38 +02:00
Code Issues Releases Wiki Activity

Outline button

Browse Source
This commit is contained in:
Kamran Ahmed
2025-03-08 15:56:27 +00:00
parent 3ebfb6ae24
commit b451d582fa
1 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/GenerateCourse/AICourseContent.tsx
View File

@@ -152,6 +152,20 @@ export function AICourseContent(props: AICourseContentProps) {
<span className="font-medium">{totalModules} modules</span> <span className="font-medium">{totalModules} modules</span>
<span className="text-gray-400">•</span> <span className="text-gray-400">•</span>
<span className="font-medium">{totalCourseLessons} lessons</span> <span className="font-medium">{totalCourseLessons} lessons</span>
{viewMode === 'module' && (
<span className="flex flex-row items-center gap-1 lg:hidden">
<span className="text-gray-400">•</span>
<button
className="underline underline-offset-2"
onClick={() => {
setExpandedModules({});
setViewMode('full');
}}
>
View outline
</button>
</span>
)}
{finishedPercentage > 0 && ( {finishedPercentage > 0 && (
<> <>
<span className="text-gray-400">•</span> <span className="text-gray-400">•</span>
@@ -174,7 +188,7 @@ export function AICourseContent(props: AICourseContentProps) {
setExpandedModules({}); setExpandedModules({});
setViewMode('full'); setViewMode('full');
}} }}
className="max-lg:hidden flex flex-shrink-0 items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900" className="flex flex-shrink-0 items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900 max-lg:hidden"
> >
<BookOpenCheck size={18} className="mr-2" /> <BookOpenCheck size={18} className="mr-2" />
View Course Outline View Course Outline
@@ -286,7 +300,7 @@ export function AICourseContent(props: AICourseContentProps) {
return ( return (
<div <div
key={moduleIdx} key={moduleIdx}
className="max-lg:mb-2 mb-5 pb-4 last:border-0 last:pb-0" className="mb-5 pb-4 last:border-0 last:pb-0 max-lg:mb-2"
> >
<h2 className="mb-4 text-xl font-bold text-gray-800 max-lg:mb-2 max-lg:text-lg max-lg:leading-tight"> <h2 className="mb-4 text-xl font-bold text-gray-800 max-lg:mb-2 max-lg:text-lg max-lg:leading-tight">
{courseModule.title} {courseModule.title}
@@ -321,7 +335,7 @@ export function AICourseContent(props: AICourseContentProps) {
{!isCompleted && ( {!isCompleted && (
<span <span
className={cn( className={cn(
'flex max-lg:size-5 max-lg:text-xs size-6 flex-shrink-0 items-center justify-center rounded-full bg-gray-200 text-sm font-medium text-gray-800', 'flex size-6 flex-shrink-0 items-center justify-center rounded-full bg-gray-200 text-sm font-medium text-gray-800 max-lg:size-5 max-lg:text-xs',
)} )}
> >
{lessonIdx + 1} {lessonIdx + 1}