rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: UI improvements & migration script

Browse source
This commit is contained in:
swve 2024-11-23 20:24:39 +01:00
parent e464b30147
commit 6cd1cf7e9c
5 changed files with 154 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

41
apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx
View file

@ -7,6 +7,7 @@ import {
Eye,
File,
FilePenLine,
FileSymlink,
Globe,
Lock,
MoreVertical,
@ -27,6 +28,7 @@ import { useOrg } from '@components/Contexts/OrgContext'
import { useCourse } from '@components/Contexts/CourseContext'
import toast from 'react-hot-toast'
import { useMediaQuery } from 'usehooks-ts'
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
type ActivitiyElementProps = {
orgslug: string
@ -176,24 +178,26 @@ function ActivityElement(props: ActivitiyElementProps) {
)}
<span>{!props.activity.published ? 'Publish' : 'Unpublish'}</span>
</button>
<Link
href={
getUriWithOrg(props.orgslug, '') +
`/course/${props.course_uuid.replace(
'course_',
''
)}/activity/${props.activity.activity_uuid.replace(
'activity_',
''
)}`
}
prefetch
className="p-1 px-2 sm:px-3 bg-gradient-to-bl text-cyan-800 from-sky-400/50 to-cyan-200/80 border border-cyan-600/10 shadow-md rounded-md font-bold text-xs flex items-center space-x-1 transition-colors duration-200 hover:from-sky-500/50 hover:to-cyan-300/80"
rel="noopener noreferrer"
>
<Eye strokeWidth={2} size={12} className="text-sky-600" />
<span>Preview</span>
</Link>
<div className="w-px h-3 bg-gray-300 mx-1 self-center rounded-full hidden sm:block" />
<ToolTip content="Preview Activity" sideOffset={8}>
<Link
href={
getUriWithOrg(props.orgslug, '') +
`/course/${props.course_uuid.replace(
'course_',
''
)}/activity/${props.activity.activity_uuid.replace(
'activity_',
''
)}`
}
prefetch
className="p-1 px-2 sm:px-3 bg-gradient-to-bl text-cyan-800 from-sky-400/50 to-cyan-200/80 border border-cyan-600/10 shadow-md rounded-md font-bold text-xs flex items-center space-x-1 transition-colors duration-200 hover:from-sky-500/50 hover:to-cyan-300/80"
rel="noopener noreferrer"
>
<Eye strokeWidth={2} size={14} className="text-sky-600" />
</Link>
</ToolTip>
{/* Delete Button */}
<ConfirmationModal
confirmationMessage="Are you sure you want to delete this activity ?"
@ -205,7 +209,6 @@ function ActivityElement(props: ActivitiyElementProps) {
rel="noopener noreferrer"
>
<X size={15} className="text-rose-200 font-bold" />
{!isMobile && <span className="text-rose-200 font-bold text-xs">Delete</span>}
</button>
}
functionToExecute={() => deleteActivityUI()}

2
apps/web/components/Objects/Courses/CourseActions/CoursePaidOptions.tsx
View file

@ -74,7 +74,7 @@ function CoursePaidOptions({ course }: CoursePaidOptionsProps) {
<div key={product.id} className="bg-slate-50/30 p-4 rounded-lg nice-shadow flex flex-col">
<div className="flex justify-between items-start mb-2">
<div className="flex flex-col space-y-1 items-start">
<Badge className='w-fit flex items-center space-x-2' variant="outline">
<Badge className='w-fit flex items-center space-x-2 bg-gray-100/50' variant="outline">
{product.product_type === 'subscription' ? <RefreshCcw size={12} /> : <SquareCheck size={12} />}
<span className='text-sm'>
{product.product_type === 'subscription' ? 'Subscription' : 'One-time payment'}

10
apps/web/components/Objects/Courses/CourseActions/PaidCourseActivity.tsx → apps/web/components/Objects/Courses/CourseActions/PaidCourseActivityDisclaimer.tsx
View file

@ -6,16 +6,16 @@ interface PaidCourseActivityProps {
course: any;
}
function PaidCourseActivity({ course }: PaidCourseActivityProps) {
function PaidCourseActivityDisclaimer({ course }: PaidCourseActivityProps) {
return (
<div className="space-y-4 ">
<div className="p-4 bg-amber-50 border border-amber-200 rounded-lg nice-shadow">
<div className="space-y-4 max-w-lg mx-auto">
<div className="p-4 bg-amber-50 border border-amber-200 rounded-lg ">
<div className="flex items-center gap-3">
<AlertCircle className="w-5 h-5 text-amber-800" />
<h3 className="text-amber-800 font-semibold">Paid Content</h3>
</div>
<p className="text-amber-700 text-sm mt-1">
This content requires a course purchase to access. Please purchase the course to continue.
This content requires a course purchase to access.
</p>
</div>
<CoursePaidOptions course={course} />
@ -23,4 +23,4 @@ function PaidCourseActivity({ course }: PaidCourseActivityProps) {
)
}
export default PaidCourseActivity
export default PaidCourseActivityDisclaimer