saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-04-19 10:51:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix element alignent

Browse Source
This commit is contained in:
austinkelsay 2025-03-30 12:34:42 -05:00
parent 3efc82bd06
commit b94e90fc03
No known key found for this signature in database
GPG Key ID: 5A763922E5BA08EE
4 changed files with 191 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/content/courses/CombinedLesson.js
View File

@ -269,33 +269,49 @@ const CombinedLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
</div>
{!isVideo && <Divider />}
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && (
<div className='mt-6 bg-gray-800/90 rounded-lg p-4'>
<h3 className='text-lg font-semibold mb-2 text-white'>External links:</h3>
<ul className='list-disc list-inside text-white'>
{lesson.additionalLinks.map((link, index) => (
<li key={index}>
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-300 hover:underline'>
{new URL(link).hostname}
</a>
</li>
))}
</ul>
<div className='mt-6 bg-gray-800/90 rounded-lg p-4 px-0'>
<div className="flex justify-between items-start">
<div>
<h3 className='text-lg font-semibold mb-2 text-white'>External links:</h3>
<ul className='list-disc list-inside text-white'>
{lesson.additionalLinks.map((link, index) => (
<li key={index}>
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-300 hover:underline'>
{new URL(link).hostname}
</a>
</li>
))}
</ul>
</div>
<div>
<Menu model={menuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
</div>
</div>
)}
{!lesson?.additionalLinks || lesson.additionalLinks.length === 0 && (
<div className='mt-6 flex justify-end'>
<Menu model={menuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
)}
</div>
{!isVideo && renderContent()}
<div className="flex justify-end mt-8 mr-4">
<Menu model={menuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
</div>
);
};

60
src/components/content/courses/CourseLesson.js
View File

@ -116,16 +116,44 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
</p>
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && (
<div className='mt-6'>
<h3 className='text-lg font-semibold mb-2'>External links:</h3>
<ul className='list-disc list-inside'>
{lesson.additionalLinks.map((link, index) => (
<li key={index}>
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-500 hover:underline'>
{new URL(link).hostname}
</a>
</li>
))}
</ul>
<div className="flex justify-between items-start">
<div>
<h3 className='text-lg font-semibold mb-2'>External links:</h3>
<ul className='list-disc list-inside'>
{lesson.additionalLinks.map((link, index) => (
<li key={index}>
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-500 hover:underline'>
{new URL(link).hostname}
</a>
</li>
))}
</ul>
</div>
<div>
<Menu model={menuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
</div>
</div>
)}
{!lesson?.additionalLinks || lesson.additionalLinks.length === 0 && (
<div className='mt-6 flex justify-end'>
<Menu model={menuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
)}
<div className='flex flex-row w-full mt-6 items-center'>
@ -165,18 +193,6 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
<div className='w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
{renderContent()}
</div>
<div className="w-[75vw] mx-auto flex justify-end mt-4 mb-12 max-tab:w-[95vw] max-mob:w-[95vw]">
<Menu model={menuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
</div>
)
}

92
src/components/content/courses/DocumentLesson.js
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, useRef } from "react";
import { Tag } from "primereact/tag";
import Image from "next/image";
import ZapDisplay from "@/components/zaps/ZapDisplay";
@ -12,6 +12,8 @@ import dynamic from "next/dynamic";
import useWindowWidth from "@/hooks/useWindowWidth";
import appConfig from "@/config/appConfig";
import useTrackDocumentLesson from "@/hooks/tracking/useTrackDocumentLesson";
import { Menu } from "primereact/menu";
import { Toast } from "primereact/toast";
const MDDisplay = dynamic(
() => import("@uiw/react-markdown-preview"),
@ -27,16 +29,45 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
const { returnImageProxy } = useImageProxy();
const windowWidth = useWindowWidth();
const isMobileView = windowWidth <= 768;
const menuRef = useRef(null);
const toastRef = useRef(null);
// todo implement real read time needs to be on form
const readTime = 120;
const { isCompleted, isTracking } = useTrackDocumentLesson({
const { isCompleted, isTracking, markLessonAsCompleted } = useTrackDocumentLesson({
lessonId: lesson?.d,
courseId: course?.d,
readTime: readTime,
paidCourse: isPaid,
decryptionPerformed: decryptionPerformed,
});
const menuItems = [
{
label: 'Mark as completed',
icon: 'pi pi-check-circle',
command: async () => {
try {
await markLessonAsCompleted();
setCompleted && setCompleted(lesson.id);
toastRef.current.show({
severity: 'success',
summary: 'Success',
detail: 'Lesson marked as completed',
life: 3000
});
} catch (error) {
console.error('Failed to mark lesson as completed:', error);
toastRef.current.show({
severity: 'error',
summary: 'Error',
detail: 'Failed to mark lesson as completed',
life: 3000
});
}
}
}
];
useEffect(() => {
if (!zaps || zapsLoading || zapsError) return;
@ -86,6 +117,7 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
return (
<div className="w-full">
<Toast ref={toastRef} />
<div className="relative w-[80%] h-[200px] mx-auto mb-24">
<Image
alt="lesson background image"
@ -150,20 +182,48 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
</div>
</div>
<Divider />
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && (
<div className='mt-6 bg-gray-800/90 rounded-lg p-4'>
<h3 className='text-lg font-semibold mb-2 text-white'>External links:</h3>
<ul className='list-disc list-inside text-white'>
{lesson.additionalLinks.map((link, index) => (
<li key={index}>
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-300 hover:underline'>
{new URL(link).hostname}
</a>
</li>
))}
</ul>
</div>
)}
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && (
<div className='mt-6 bg-gray-800/90 rounded-lg p-4'>
<div className="flex justify-between items-start">
<div>
<h3 className='text-lg font-semibold mb-2 text-white'>External links:</h3>
<ul className='list-disc list-inside text-white'>
{lesson.additionalLinks.map((link, index) => (
<li key={index}>
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-300 hover:underline'>
{new URL(link).hostname}
</a>
</li>
))}
</ul>
</div>
<div>
<Menu model={menuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
</div>
</div>
)}
{!lesson?.additionalLinks || lesson.additionalLinks.length === 0 && (
<div className='mt-6 flex justify-end'>
<Menu model={menuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
)}
</div>
{renderContent()}
</div>

60
src/components/content/courses/VideoLesson.js
View File

@ -238,30 +238,46 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted
</div>
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && (
<div className='mt-6'>
<h3 className='text-lg font-semibold mb-2 text-white'>External links:</h3>
<ul className='list-disc list-inside text-white'>
{lesson.additionalLinks.map((link, index) => (
<li key={index}>
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-300 hover:underline'>
{new URL(link).hostname}
</a>
</li>
))}
</ul>
<div className="flex justify-between items-start">
<div>
<h3 className='text-lg font-semibold mb-2 text-white'>External links:</h3>
<ul className='list-disc list-inside text-white'>
{lesson.additionalLinks.map((link, index) => (
<li key={index}>
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-300 hover:underline'>
{new URL(link).hostname}
</a>
</li>
))}
</ul>
</div>
<div>
<Menu model={menuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
</div>
</div>
)}
{!lesson?.additionalLinks || lesson.additionalLinks.length === 0 && (
<div className='mt-6 flex justify-end'>
<Menu model={menuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
)}
</div>
<div className="flex justify-end mt-4 mr-4">
<Menu model={menuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
</div>
)