mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-06-18 13:35:08 +00:00
Fix element alignent
This commit is contained in:
austinkelsay
parent
3efc82bd06
commit
b94e90fc03
@ -269,33 +269,49 @@ const CombinedLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
|
|||||||
</div>
|
</div>
|
||||||
{!isVideo && <Divider />}
|
{!isVideo && <Divider />}
|
||||||
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && (
|
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && (
|
||||||
<div className='mt-6 bg-gray-800/90 rounded-lg p-4'>
|
<div className='mt-6 bg-gray-800/90 rounded-lg p-4 px-0'>
|
||||||
<h3 className='text-lg font-semibold mb-2 text-white'>External links:</h3>
|
<div className="flex justify-between items-start">
|
||||||
<ul className='list-disc list-inside text-white'>
|
<div>
|
||||||
{lesson.additionalLinks.map((link, index) => (
|
<h3 className='text-lg font-semibold mb-2 text-white'>External links:</h3>
|
||||||
<li key={index}>
|
<ul className='list-disc list-inside text-white'>
|
||||||
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-300 hover:underline'>
|
{lesson.additionalLinks.map((link, index) => (
|
||||||
{new URL(link).hostname}
|
<li key={index}>
|
||||||
</a>
|
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-300 hover:underline'>
|
||||||
</li>
|
{new URL(link).hostname}
|
||||||
))}
|
</a>
|
||||||
</ul>
|
</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>
|
</div>
|
||||||
{!isVideo && renderContent()}
|
{!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>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -116,16 +116,44 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
|
|||||||
</p>
|
</p>
|
||||||
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && (
|
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && (
|
||||||
<div className='mt-6'>
|
<div className='mt-6'>
|
||||||
<h3 className='text-lg font-semibold mb-2'>External links:</h3>
|
<div className="flex justify-between items-start">
|
||||||
<ul className='list-disc list-inside'>
|
<div>
|
||||||
{lesson.additionalLinks.map((link, index) => (
|
<h3 className='text-lg font-semibold mb-2'>External links:</h3>
|
||||||
<li key={index}>
|
<ul className='list-disc list-inside'>
|
||||||
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-500 hover:underline'>
|
{lesson.additionalLinks.map((link, index) => (
|
||||||
{new URL(link).hostname}
|
<li key={index}>
|
||||||
</a>
|
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-500 hover:underline'>
|
||||||
</li>
|
{new URL(link).hostname}
|
||||||
))}
|
</a>
|
||||||
</ul>
|
</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 flex-row w-full mt-6 items-center'>
|
<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]'>
|
<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()}
|
{renderContent()}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState, useRef } from "react";
|
||||||
import { Tag } from "primereact/tag";
|
import { Tag } from "primereact/tag";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import ZapDisplay from "@/components/zaps/ZapDisplay";
|
import ZapDisplay from "@/components/zaps/ZapDisplay";
|
||||||
@ -12,6 +12,8 @@ import dynamic from "next/dynamic";
|
|||||||
import useWindowWidth from "@/hooks/useWindowWidth";
|
import useWindowWidth from "@/hooks/useWindowWidth";
|
||||||
import appConfig from "@/config/appConfig";
|
import appConfig from "@/config/appConfig";
|
||||||
import useTrackDocumentLesson from "@/hooks/tracking/useTrackDocumentLesson";
|
import useTrackDocumentLesson from "@/hooks/tracking/useTrackDocumentLesson";
|
||||||
|
import { Menu } from "primereact/menu";
|
||||||
|
import { Toast } from "primereact/toast";
|
||||||
|
|
||||||
const MDDisplay = dynamic(
|
const MDDisplay = dynamic(
|
||||||
() => import("@uiw/react-markdown-preview"),
|
() => import("@uiw/react-markdown-preview"),
|
||||||
@ -27,10 +29,12 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
|
|||||||
const { returnImageProxy } = useImageProxy();
|
const { returnImageProxy } = useImageProxy();
|
||||||
const windowWidth = useWindowWidth();
|
const windowWidth = useWindowWidth();
|
||||||
const isMobileView = windowWidth <= 768;
|
const isMobileView = windowWidth <= 768;
|
||||||
|
const menuRef = useRef(null);
|
||||||
|
const toastRef = useRef(null);
|
||||||
// todo implement real read time needs to be on form
|
// todo implement real read time needs to be on form
|
||||||
const readTime = 120;
|
const readTime = 120;
|
||||||
|
|
||||||
const { isCompleted, isTracking } = useTrackDocumentLesson({
|
const { isCompleted, isTracking, markLessonAsCompleted } = useTrackDocumentLesson({
|
||||||
lessonId: lesson?.d,
|
lessonId: lesson?.d,
|
||||||
courseId: course?.d,
|
courseId: course?.d,
|
||||||
readTime: readTime,
|
readTime: readTime,
|
||||||
@ -38,6 +42,33 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
|
|||||||
decryptionPerformed: decryptionPerformed,
|
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(() => {
|
useEffect(() => {
|
||||||
if (!zaps || zapsLoading || zapsError) return;
|
if (!zaps || zapsLoading || zapsError) return;
|
||||||
const total = getTotalFromZaps(zaps, lesson);
|
const total = getTotalFromZaps(zaps, lesson);
|
||||||
@ -86,6 +117,7 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
|
<Toast ref={toastRef} />
|
||||||
<div className="relative w-[80%] h-[200px] mx-auto mb-24">
|
<div className="relative w-[80%] h-[200px] mx-auto mb-24">
|
||||||
<Image
|
<Image
|
||||||
alt="lesson background image"
|
alt="lesson background image"
|
||||||
@ -150,20 +182,48 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Divider />
|
<Divider />
|
||||||
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && (
|
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && (
|
||||||
<div className='mt-6 bg-gray-800/90 rounded-lg p-4'>
|
<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>
|
<div className="flex justify-between items-start">
|
||||||
<ul className='list-disc list-inside text-white'>
|
<div>
|
||||||
{lesson.additionalLinks.map((link, index) => (
|
<h3 className='text-lg font-semibold mb-2 text-white'>External links:</h3>
|
||||||
<li key={index}>
|
<ul className='list-disc list-inside text-white'>
|
||||||
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-300 hover:underline'>
|
{lesson.additionalLinks.map((link, index) => (
|
||||||
{new URL(link).hostname}
|
<li key={index}>
|
||||||
</a>
|
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-300 hover:underline'>
|
||||||
</li>
|
{new URL(link).hostname}
|
||||||
))}
|
</a>
|
||||||
</ul>
|
</li>
|
||||||
</div>
|
))}
|
||||||
)}
|
</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>
|
||||||
{renderContent()}
|
{renderContent()}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -238,30 +238,46 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted
|
|||||||
</div>
|
</div>
|
||||||
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && (
|
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && (
|
||||||
<div className='mt-6'>
|
<div className='mt-6'>
|
||||||
<h3 className='text-lg font-semibold mb-2 text-white'>External links:</h3>
|
<div className="flex justify-between items-start">
|
||||||
<ul className='list-disc list-inside text-white'>
|
<div>
|
||||||
{lesson.additionalLinks.map((link, index) => (
|
<h3 className='text-lg font-semibold mb-2 text-white'>External links:</h3>
|
||||||
<li key={index}>
|
<ul className='list-disc list-inside text-white'>
|
||||||
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-300 hover:underline'>
|
{lesson.additionalLinks.map((link, index) => (
|
||||||
{new URL(link).hostname}
|
<li key={index}>
|
||||||
</a>
|
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-300 hover:underline'>
|
||||||
</li>
|
{new URL(link).hostname}
|
||||||
))}
|
</a>
|
||||||
</ul>
|
</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>
|
|
||||||
|
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user