))}
{featuredCourses.length === 0 && (
diff --git a/apps/web/components/Objects/Thumbnails/CourseThumbnailLanding.tsx b/apps/web/components/Objects/Thumbnails/CourseThumbnailLanding.tsx
new file mode 100644
index 00000000..cadebaf1
--- /dev/null
+++ b/apps/web/components/Objects/Thumbnails/CourseThumbnailLanding.tsx
@@ -0,0 +1,156 @@
+'use client'
+import { useOrg } from '@components/Contexts/OrgContext'
+import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
+import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
+import { getUriWithOrg } from '@services/config/config'
+import { deleteCourseFromBackend } from '@services/courses/courses'
+import { getCourseThumbnailMediaDirectory } from '@services/media/media'
+import { revalidateTags } from '@services/utils/ts/requests'
+import { BookMinus, FilePenLine, Settings2, MoreVertical } from 'lucide-react'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import React from 'react'
+import toast from 'react-hot-toast'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@components/ui/dropdown-menu"
+
+type Course = {
+ course_uuid: string
+ name: string
+ description: string
+ thumbnail_image: string
+ org_id: string
+ update_date: string
+}
+
+type PropsType = {
+ course: Course
+ orgslug: string
+ customLink?: string
+}
+
+interface AdminEditOptionsProps {
+ course: Course
+ orgslug: string
+ deleteCourse: () => Promise
+}
+
+export const removeCoursePrefix = (course_uuid: string) => course_uuid.replace('course_', '')
+
+const AdminEditOptions: React.FC = ({ course, orgslug, deleteCourse }) => {
+ return (
+
+
+
+
+
+
+
+
+
+ Edit Content
+
+
+
+
+ Settings
+
+
+
+
+ Delete Course
+
+ }
+ functionToExecute={deleteCourse}
+ status="warning"
+ />
+
+
+
+
+
+ )
+}
+
+const CourseThumbnailLanding: React.FC = ({ course, orgslug, customLink }) => {
+ const router = useRouter()
+ const org = useOrg() as any
+ const session = useLHSession() as any
+
+ const deleteCourse = async () => {
+ const toastId = toast.loading('Deleting course...')
+ try {
+ await deleteCourseFromBackend(course.course_uuid, session.data?.tokens?.access_token)
+ await revalidateTags(['courses'], orgslug)
+ toast.success('Course deleted successfully')
+ router.refresh()
+ } catch (error) {
+ toast.error('Failed to delete course')
+ } finally {
+ toast.dismiss(toastId)
+ }
+ }
+
+ const thumbnailImage = course.thumbnail_image
+ ? getCourseThumbnailMediaDirectory(org?.org_uuid, course.course_uuid, course.thumbnail_image)
+ : '../empty_thumbnail.png'
+
+ return (
+
+
+
+
+
+
+
+
{course.name}
+
{course.description}
+
+
+
+ {course.update_date && (
+
+
+ Updated {new Date(course.update_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+
+
+ )}
+
+
+
+ Start Learning
+
+
+
+