From 320f64946235411f836cb2a589e117388a026364 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Tue, 4 Mar 2025 11:07:10 +0100
Subject: [PATCH] feat: landing ui improvements

---
 .../web/components/Landings/LandingCustom.tsx |  34 ++--
 .../Thumbnails/CourseThumbnailLanding.tsx     | 156 ++++++++++++++++++
 2 files changed, 174 insertions(+), 16 deletions(-)
 create mode 100644 apps/web/components/Objects/Thumbnails/CourseThumbnailLanding.tsx

diff --git a/apps/web/components/Landings/LandingCustom.tsx b/apps/web/components/Landings/LandingCustom.tsx
index 839280a9..2985739c 100644
--- a/apps/web/components/Landings/LandingCustom.tsx
+++ b/apps/web/components/Landings/LandingCustom.tsx
@@ -6,6 +6,7 @@ import CourseThumbnail from '@components/Objects/Thumbnails/CourseThumbnail'
 import useSWR from 'swr'
 import { getOrgCourses } from '@services/courses/courses'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
+import CourseThumbnailLanding from '@components/Objects/Thumbnails/CourseThumbnailLanding'
 
 interface LandingCustomProps {
   landing: {
@@ -104,12 +105,14 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
                 </div>
               </div>
               <div className="flex-1 w-full md:w-auto">
-                <div className="relative w-full aspect-[4/3] max-w-[500px] mx-auto">
-                  <img
-                    src={section.image.url}
-                    alt={section.image.alt}
-                    className="object-cover w-full h-full"
-                  />
+                <div className="relative w-full max-w-[500px] mx-auto px-4 md:px-8">
+                  <div className="relative w-full aspect-[4/3]">
+                    <img
+                      src={section.image.url}
+                      alt={section.image.alt}
+                      className="object-contain w-full h-full rounded-lg"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
@@ -125,13 +128,13 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
               <h2 className="text-2xl md:text-3xl font-bold text-left mb-16 text-gray-900">{section.title}</h2>
             )}
             <div className="flex justify-center w-full">
-              <div className="flex flex-wrap justify-center gap-16 max-w-6xl">
+              <div className="flex flex-wrap justify-center gap-16 max-w-7xl">
                 {section.logos.map((logo, index) => (
-                  <div key={index} className="flex items-center justify-center w-[140px] h-[80px]">
+                  <div key={index} className="flex items-center justify-center w-[220px] h-[120px]">
                     <img
                       src={logo.url}
                       alt={logo.alt}
-                      className="max-h-16 max-w-[120px] object-contain hover:opacity-80 transition-opacity"
+                      className="max-h-24 max-w-[200px] object-contain hover:opacity-80 transition-opacity"
                     />
                   </div>
                 ))}
@@ -186,14 +189,13 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
             className="py-16 mx-2 sm:mx-4 lg:mx-16 w-full"
           >
             <h2 className="text-2xl md:text-3xl font-bold text-left mb-6 text-gray-900">{section.title}</h2>
-            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 sm:gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
               {featuredCourses.map((course: any) => (
-                <div key={course.course_uuid} >
-                  <CourseThumbnail
-                    course={course}
-                    orgslug={orgslug}
-                  />
-                </div>
+                <CourseThumbnailLanding
+                  key={course.course_uuid}
+                  course={course}
+                  orgslug={orgslug}
+                />
               ))}
               {featuredCourses.length === 0 && (
                 <div className="col-span-full text-center py-6 text-gray-500">
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<void>
+}
+
+export const removeCoursePrefix = (course_uuid: string) => course_uuid.replace('course_', '')
+
+const AdminEditOptions: React.FC<AdminEditOptionsProps> = ({ course, orgslug, deleteCourse }) => {
+  return (
+    <AuthenticatedClientElement
+      action="update"
+      ressourceType="courses"
+      checkMethod="roles"
+      orgId={course.org_id}
+    >
+      <div className="absolute top-2 right-2 z-20">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button className="p-1 bg-white rounded-full hover:bg-gray-100 transition-colors shadow-md">
+              <MoreVertical size={20} className="text-gray-700" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuItem asChild>
+              <Link prefetch href={getUriWithOrg(orgslug, `/dash/courses/course/${removeCoursePrefix(course.course_uuid)}/content`)}>
+                <FilePenLine className="mr-2 h-4 w-4" /> Edit Content
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem asChild>
+              <Link prefetch href={getUriWithOrg(orgslug, `/dash/courses/course/${removeCoursePrefix(course.course_uuid)}/general`)}>
+                <Settings2 className="mr-2 h-4 w-4" /> Settings
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem asChild>
+              <ConfirmationModal
+                confirmationButtonText="Delete Course"
+                confirmationMessage="Are you sure you want to delete this course?"
+                dialogTitle={`Delete ${course.name}?`}
+                dialogTrigger={
+                  <button className="w-full text-left flex items-center px-2 py-1 rounded-md text-sm bg-rose-500/10 hover:bg-rose-500/20 transition-colors text-red-600">
+                    <BookMinus className="mr-4 h-4 w-4" /> Delete Course
+                  </button>
+                }
+                functionToExecute={deleteCourse}
+                status="warning"
+              />
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </AuthenticatedClientElement>
+  )
+}
+
+const CourseThumbnailLanding: React.FC<PropsType> = ({ 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 (
+    <div className="relative flex flex-col bg-white rounded-xl nice-shadow overflow-hidden min-w-[280px] w-full max-w-sm flex-shrink-0 m-2">
+      <AdminEditOptions
+        course={course}
+        orgslug={orgslug}
+        deleteCourse={deleteCourse}
+      />
+      <Link prefetch href={customLink ? customLink : getUriWithOrg(orgslug, `/course/${removeCoursePrefix(course.course_uuid)}`)}>
+        <div
+          className="inset-0 ring-1 ring-inset ring-black/10 rounded-t-xl w-full aspect-video bg-cover bg-center"
+          style={{ backgroundImage: `url(${thumbnailImage})` }}
+        />
+      </Link>
+      <div className='flex flex-col w-full p-4 space-y-3'>
+        <div className="space-y-2">
+          <h2 className="font-bold text-gray-800 leading-tight text-base min-h-[2.75rem] line-clamp-2">{course.name}</h2>
+          <p className='text-xs text-gray-700 leading-normal min-h-[3.75rem] line-clamp-3'>{course.description}</p>
+        </div>
+        
+        <div className="flex flex-wrap items-center gap-2">
+          {course.update_date && (
+            <div className="inline-flex h-5 min-w-[140px] items-center justify-center px-2 rounded-md bg-gray-100/80 border border-gray-200">
+              <span className="text-[10px] font-medium text-gray-600 truncate">
+                Updated {new Date(course.update_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+              </span>
+            </div>
+          )}
+        </div>
+
+        <Link 
+          prefetch 
+          href={customLink ? customLink : getUriWithOrg(orgslug, `/course/${removeCoursePrefix(course.course_uuid)}`)}
+          className="inline-flex items-center justify-center w-full px-3 py-1.5 bg-black text-white text-xs font-medium rounded-lg hover:bg-gray-800 transition-colors"
+        >
+          Start Learning
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default CourseThumbnailLanding