chore: merge with dev

2025-12-19 04:19:25 +00:00 · 2024-10-23 20:06:17 -07:00 · 2024-10-23 20:06:17 -07:00 · 3430cfdb3a
commit 3430cfdb3a
parent b678ac86e8
34 changed files with 3515 additions and 2600 deletions
--- a/apps/web/components/Objects/Editor/Editor.tsx
+++ b/apps/web/components/Objects/Editor/Editor.tsx
@ -21,10 +21,14 @@ import WarningCallout from './Extensions/Callout/Warning/WarningCallout'
 import ImageBlock from './Extensions/Image/ImageBlock'
 import Youtube from '@tiptap/extension-youtube'
 import VideoBlock from './Extensions/Video/VideoBlock'
-import { Eye } from 'lucide-react'
+import { ComputerIcon, Eye, Monitor } from 'lucide-react'
 import MathEquationBlock from './Extensions/MathEquation/MathEquationBlock'
 import PDFBlock from './Extensions/PDF/PDFBlock'
 import QuizBlock from './Extensions/Quiz/QuizBlock'
+import Table from '@tiptap/extension-table'
+import TableCell from '@tiptap/extension-table-cell'
+import TableHeader from '@tiptap/extension-table-header'
+import TableRow from '@tiptap/extension-table-row'
 import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
 import Link from 'next/link'
 import { getCourseThumbnailMediaDirectory } from '@services/media/media'
@ -51,6 +55,7 @@ import { getUriWithOrg } from '@services/config/config'
 import EmbedObjects from './Extensions/EmbedObjects/EmbedObjects'
 import Badges from './Extensions/Badges/Badges'
 import Buttons from './Extensions/Buttons/Buttons'
+import { useMediaQuery } from 'usehooks-ts'

 interface Editor {
  content: string
@ -148,6 +153,12 @@ function Editor(props: Editor) {
        editable: true,
        activity: props.activity,
      }),
+      Table.configure({
+        resizable: true,
+      }),
+      TableRow,
+      TableHeader,
+      TableCell,

      // Add Collaboration and CollaborationCursor only if isCollabEnabledOnThisOrg is true
      ...(props.isCollabEnabledOnThisOrg ? [
@ -170,6 +181,21 @@ function Editor(props: Editor) {
    content: props.isCollabEnabledOnThisOrg ? null : props.content,
  })

+  const isMobile = useMediaQuery('(max-width: 767px)')
+  if (isMobile) {
+    // TODO: Work on a better editor mobile experience
+    return (
+      <div className="h-screen w-full bg-[#f8f8f8] flex items-center justify-center p-4">
+        <div className="bg-white p-6 rounded-lg shadow-md text-center">
+          <h2 className="text-xl font-bold mb-4">Desktop Only</h2>
+          <Monitor className='mx-auto my-5' size={60} />
+          <p>The editor is only accessible from a desktop device.</p>
+          <p>Please switch to a desktop to view.</p>
+        </div>
+      </div>
+    )
+  }
+
  return (
    <Page>
      <CourseProvider courseuuid={props.course.course_uuid}>
@ -535,6 +561,16 @@ export const EditorContentWrapper = styled.div`
        font-weight: 700;
      }
    }
+
+    &.resize-cursor {
+      cursor: ew-resize;
+      cursor: col-resize;
+    }
+
+    .tableWrapper {
+      margin: 1.5rem 0;
+      overflow-x: auto;
+    }
  }

  iframe {
@ -554,6 +590,53 @@ export const EditorContentWrapper = styled.div`
    padding-left: 20px;
    list-style-type: decimal;
  }
+
+  table {
+    border-collapse: collapse;
+    margin: 0;
+    overflow: hidden;
+    table-layout: fixed;
+    width: 100%;
+
+    td,
+    th {
+      border: 1px solid rgba(139, 139, 139, 0.4);
+      box-sizing: border-box;
+      min-width: 1em;
+      padding: 6px 8px;
+      position: relative;
+      vertical-align: top;
+
+      > * {
+        margin-bottom: 0;
+      }
+    }
+
+    th {
+      background-color: rgba(217, 217, 217, 0.4);
+      font-weight: bold;
+      text-align: left;
+    }
+
+    .selectedCell:after {
+      background: rgba(139, 139, 139, 0.2);
+      content: "";
+      left: 0; right: 0; top: 0; bottom: 0;
+      pointer-events: none;
+      position: absolute;
+      z-index: 2;
+    }
+
+    .column-resize-handle {
+      background-color: #8d78eb;
+      bottom: -2px;
+      pointer-events: none;
+      position: absolute;
+      right: -2px;
+      top: 0;
+      width: 4px;
+    }
+  }
 `

 export default Editor
--- a/apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx
+++ b/apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx
@ -7,6 +7,11 @@ import {
  ArrowRightIcon,
  DividerVerticalIcon,
  ListBulletIcon,
+  TableIcon,
+  RowsIcon,
+  ColumnsIcon,
+  SectionIcon,
+  ContainerIcon,
 } from '@radix-ui/react-icons'
 import {
  AlertCircle,
@ -92,6 +97,34 @@ export const ToolbarButtons = ({ editor, props }: any) => {
        <option value="5">Heading 5</option>
        <option value="6">Heading 6</option>
      </ToolSelect>
+      <DividerVerticalIcon
+        style={{ marginTop: 'auto', marginBottom: 'auto', color: 'grey' }}
+      />
+      <ToolBtn content={'Create table'}
+        onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}
+      >
+        <TableIcon/>
+      </ToolBtn>
+      <ToolBtn content={'Insert row'}
+        onClick={() => editor.chain().focus().addRowAfter().run()}
+      >
+        <RowsIcon/>
+      </ToolBtn>
+      <ToolBtn content={'Insert column'}
+        onClick={() => editor.chain().focus().addColumnAfter().run()}
+      >
+        <ColumnsIcon/>
+      </ToolBtn>
+      <ToolBtn content={'Remove column'}
+        onClick={() => editor.chain().focus().deleteColumn().run()}
+      >
+        <ContainerIcon/>
+      </ToolBtn>
+      <ToolBtn content={'Remove row'}
+        onClick={() => editor.chain().focus().deleteRow().run()}
+      >
+        <SectionIcon/>
+      </ToolBtn>
      {/* TODO: fix this : toggling only works one-way */}
      <DividerVerticalIcon
        style={{ marginTop: 'auto', marginBottom: 'auto', color: 'grey' }}
--- a/apps/web/components/Objects/Menu/Menu.tsx
+++ b/apps/web/components/Objects/Menu/Menu.tsx
@ -14,54 +14,73 @@ export const Menu = (props: any) => {
  const access_token = session?.data?.tokens?.access_token;
  const [feedbackModal, setFeedbackModal] = React.useState(false)
  const org = useOrg() as any;
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false)

  function closeFeedbackModal() {
    setFeedbackModal(false)
  }

+  function toggleMenu() {
+    setIsMenuOpen(!isMenuOpen)
+  }
+
  return (
    <>
-      <div className="backdrop-blur-lg h-[60px] blur-3xl -z-10" style={{}}>
-        
-      </div>
-      <div className="backdrop-blur-lg bg-white/90 fixed flex top-0 left-0 right-0 h-[60px] ring-1 ring-inset ring-gray-500/10 items-center space-x-5 shadow-[0px_4px_16px_rgba(0,0,0,0.03)] z-50">
-        <div className="flex items-center space-x-5 w-full max-w-screen-2xl mx-auto px-16">
-          <div className="logo flex ">
-            <Link href={getUriWithOrg(orgslug, '/')}>
-              <div className="flex w-auto h-9 rounded-md items-center m-auto py-1 justify-center">
-                {org?.logo_image ? (
-                  <img
-                    src={`${getOrgLogoMediaDirectory(
-                      org.org_uuid,
-                      org?.logo_image
-                    )}`}
-                    alt="Learnhouse"
-                    style={{ width: 'auto', height: '100%' }}
-                    className="rounded-md"
-                  />
-                ) : (
-                  <LearnHouseLogo></LearnHouseLogo>
-                )}
-              </div>
-            </Link>
+      <div className="backdrop-blur-lg h-[60px] blur-3xl -z-10"></div>
+      <div className="backdrop-blur-lg bg-white/90 fixed top-0 left-0 right-0 h-[60px] ring-1 ring-inset ring-gray-500/10 shadow-[0px_4px_16px_rgba(0,0,0,0.03)] z-50">
+        <div className="flex items-center justify-between w-full max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-16 h-full">
+          <div className="flex items-center space-x-5 md:w-auto w-full">
+            <div className="logo flex md:w-auto w-full justify-center">
+              <Link href={getUriWithOrg(orgslug, '/')}>
+                <div className="flex w-auto h-9 rounded-md items-center m-auto py-1 justify-center">
+                  {org?.logo_image ? (
+                    <img
+                      src={`${getOrgLogoMediaDirectory(org.org_uuid, org?.logo_image)}`}
+                      alt="Learnhouse"
+                      style={{ width: 'auto', height: '100%' }}
+                      className="rounded-md"
+                    />
+                  ) : (
+                    <LearnHouseLogo />
+                  )}
+                </div>
+              </Link>
+            </div>
+            <div className="hidden md:flex">
+              <MenuLinks orgslug={orgslug} />
+            </div>
          </div>
-          <div className="links flex grow">
+          <div className="flex items-center space-x-4">
+            <div className="hidden md:flex">
+              <HeaderProfileBox />
+            </div>
+            <button
+              className="md:hidden text-gray-600 focus:outline-none"
+              onClick={toggleMenu}
+            >
+              {isMenuOpen ? (
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              ) : (
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        className={`fixed inset-x-0 z-40 bg-white/80 backdrop-blur-lg md:hidden shadow-lg transition-all duration-300 ease-in-out ${
+          isMenuOpen ? 'top-[60px] opacity-100' : '-top-full opacity-0'
+        }`}
+      >
+        <div className="flex flex-col px-4 py-3 space-y-4 justify-center items-center">
+          <div className='py-4'>
            <MenuLinks orgslug={orgslug} />
          </div>
-          <div className="profile flex items-center">
-            {/* <Modal
-                            isDialogOpen={feedbackModal}
-                            onOpenChange={setFeedbackModal}
-                            minHeight="sm"
-                            dialogContent={<FeedbackModal></FeedbackModal>}
-                            dialogTitle="Feedback"
-                            dialogDescription="An issue? A suggestion? a bug ? Let us know!"
-                            dialogTrigger={
-                                <div className="feedback cursor-pointer block items-center h-fit p-2 rounded-2xl bg-orange-800 hover:bg-orange-900 text-orange-300 shadow">
-                                    <MessageSquareIcon size={12} />
-                                </div>
-                            }
-                        /> */}
+          <div className="border-t border-gray-200">
            <HeaderProfileBox />
          </div>
        </div>
--- a/apps/web/components/Objects/Modals/Dash/OrgUserGroups/EditUserGroup.tsx
+++ b/apps/web/components/Objects/Modals/Dash/OrgUserGroups/EditUserGroup.tsx
@ -0,0 +1,104 @@
+'use client'
+import FormLayout, {
+    FormField,
+    FormLabelAndMessage,
+    Input,
+} from '@components/StyledElements/Form/Form'
+import * as Form from '@radix-ui/react-form'
+import { useOrg } from '@components/Contexts/OrgContext'
+import React from 'react'
+import { updateUserGroup } from '@services/usergroups/usergroups'
+import { mutate } from 'swr'
+import { getAPIUrl } from '@services/config/config'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
+import { useFormik } from 'formik'
+import toast from 'react-hot-toast'
+
+type EditUserGroupProps = {
+    usergroup: {
+        id: number,
+        name: string,
+        description: string,
+    }
+}
+
+const validate = (values: any) => {
+    const errors: any = {}
+
+    if (!values.name) {
+        errors.name = 'Name is Required'
+    }
+
+    return errors
+}
+
+function EditUserGroup(props: EditUserGroupProps) {
+    const org = useOrg() as any;
+    const session = useLHSession() as any
+    const access_token = session?.data?.tokens?.access_token;
+    const [isSubmitting, setIsSubmitting] = React.useState(false)
+
+    const formik = useFormik({
+        initialValues: {
+            name: props.usergroup.name,
+            description: props.usergroup.description,
+        },
+        validate,
+        onSubmit: async (values) => {
+            setIsSubmitting(true)
+            const res = await updateUserGroup(props.usergroup.id, access_token, values)
+
+            if (res.status == 200) {
+                setIsSubmitting(false)
+                toast.success(`UserGroup saved successfully`)
+                mutate(`${getAPIUrl()}usergroups/org/${org.id}`)
+            } else {
+                toast.error(`Error saving UserGroup, please retry later.`)
+                setIsSubmitting(false)
+            }
+        },
+    })
+
+    console.log(formik.errors.name)
+
+    return (
+        <FormLayout onSubmit={formik.handleSubmit}>
+            <FormField name="name">
+                <FormLabelAndMessage
+                    label="Name"
+                    message={formik.errors.name}
+                />
+                <Form.Control asChild>
+                    <Input
+                        onChange={formik.handleChange}
+                        value={formik.values.name}
+                        type="name"
+                        required
+                    />
+                </Form.Control>
+            </FormField>
+            <FormField name="description">
+                <FormLabelAndMessage
+                    label="Description"
+                    message={formik.errors.description}
+                />
+                <Form.Control asChild>
+                    <Input
+                        onChange={formik.handleChange}
+                        value={formik.values.description}
+                        type="description"
+                    />
+                </Form.Control>
+            </FormField>
+            <div className="flex py-4">
+                <Form.Submit asChild>
+                    <button className="w-full bg-black text-white font-bold text-center p-2 rounded-md shadow-md hover:cursor-pointer">
+                        {isSubmitting ? 'Loading...' : 'Save UserGroup'}
+                    </button>
+                </Form.Submit>
+            </div>
+        </FormLayout>
+    )
+}
+
+export default EditUserGroup
--- a/apps/web/components/Objects/Thumbnails/CollectionThumbnail.tsx
+++ b/apps/web/components/Objects/Thumbnails/CollectionThumbnail.tsx
@ -25,43 +25,42 @@ const removeCollectionPrefix = (collectionid: string) => {
 function CollectionThumbnail(props: PropsType) {
  const org = useOrg() as any
  return (
-    <div className="">
-      <div className="flex flex-row space-x-4 inset-0 ring-1 ring-inset my-auto ring-black/10 rounded-xl shadow-xl relative w-[300px] h-[80px] bg-cover items-center justify-center bg-indigo-600 font-bold text-zinc-50">
-        <div className="flex -space-x-5">
-          {props.collection.courses.slice(0, 2).map((course: any) => (
-            <>
-              <Link
-                href={getUriWithOrg(
-                  props.orgslug,
-                  '/collection/' +
-                  removeCollectionPrefix(props.collection.collection_uuid)
-                )}
-              >
-                <div
-                  className="inset-0 rounded-full shadow-2xl bg-cover w-12 h-8 justify-center ring-indigo-800 ring-4"
-                  style={{
-                    backgroundImage: `url(${getCourseThumbnailMediaDirectory(
-                      org?.org_uuid,
-                      course.course_uuid,
-                      course.thumbnail_image
-                    )})`,
-                  }}
-                ></div>
-              </Link>
-            </>
-          ))}
+    <div className="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 hover:shadow-xl">
+      <div className="flex h-full w-full items-center justify-between bg-indigo-600 p-4">
+        <div className="flex items-center space-x-5">
+          <div className="flex -space-x-3">
+            {props.collection.courses.slice(0, 3).map((course: any, index: number) => (
+              <div
+                key={course.course_uuid}
+                className="relative h-12 w-12 overflow-hidden rounded-full border-2 border-white shadow-md transition-all duration-300 hover:z-10 hover:scale-110"
+                style={{
+                  backgroundImage: `url(${getCourseThumbnailMediaDirectory(
+                    org?.org_uuid,
+                    course.course_uuid,
+                    course.thumbnail_image
+                  )})`,
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                  zIndex: 3 - index,
+                }}
+              ></div>
+            ))}
+          </div>
+          <div className="flex flex-col">
+            <Link
+              href={getUriWithOrg(
+                props.orgslug,
+                '/collection/' + removeCollectionPrefix(props.collection.collection_uuid)
+              )}
+              className="text-2xl font-bold text-white hover:underline"
+            >
+              {props.collection.name}
+            </Link>
+            <span className="mt-1 text-sm font-medium text-indigo-200">
+              {props.collection.courses.length} course{props.collection.courses.length !== 1 ? 's' : ''}
+            </span>
+          </div>
        </div>
-        <Link
-          href={getUriWithOrg(
-            props.orgslug,
-            '/collection/' +
-            removeCollectionPrefix(props.collection.collection_uuid)
-          )}
-        >
-          <h1 className="font-bold text-md justify-center">
-            {props.collection.name}
-          </h1>
-        </Link>
        <CollectionAdminEditsArea
          orgslug={props.orgslug}
          org_id={props.org_id}
@ -91,18 +90,18 @@ const CollectionAdminEditsArea = (props: any) => {
      orgId={props.org_id}
      checkMethod="roles"
    >
-      <div className="flex space-x-1  justify-center mx-auto z-20 ">
+      <div className="z-20">
        <ConfirmationModal
          confirmationMessage="Are you sure you want to delete this collection?"
          confirmationButtonText="Delete Collection"
-          dialogTitle={'Delete ' + props.collection.name + ' ?'}
+          dialogTitle={'Delete ' + props.collection.name + '?'}
          dialogTrigger={
-            <div
-              className="hover:cursor-pointer p-1 px-2 bg-red-600 rounded-xl items-center justify-center flex shadow-xl"
+            <button
+              className="absolute right-2 top-2 rounded-full bg-red-500 p-2 text-white transition-colors duration-300 hover:bg-red-600"
              rel="noopener noreferrer"
            >
-              <X size={10} className="text-rose-200 font-bold" />
-            </div>
+              <X size={18} />
+            </button>
          }
          functionToExecute={() => deleteCollectionUI(props.collection_uuid)}
          status="warning"
--- a/apps/web/components/Objects/Thumbnails/CourseThumbnail.tsx
+++ b/apps/web/components/Objects/Thumbnails/CourseThumbnail.tsx
@ -6,146 +6,125 @@ 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, EllipsisVertical } from 'lucide-react'
+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, { useEffect } from 'react'
+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
+}

 type PropsType = {
-  course: any
+  course: Course
  orgslug: string
+  customLink?: string
 }

-// function to remove "course_" from the course_uuid
-function removeCoursePrefix(course_uuid: string) {
-  return course_uuid.replace('course_', '')
-}
+export const removeCoursePrefix = (course_uuid: string) => course_uuid.replace('course_', '')

-function CourseThumbnail(props: PropsType) {
-  const router = useRouter()
+function CourseThumbnail({ course, orgslug, customLink }: PropsType) {
+  const router = useRouter() 
  const org = useOrg() as any
-  const session = useLHSession() as any;
+  const session = useLHSession() as any

-  async function deleteCourses(course_uuid: any) {
-    const toast_loading = toast.loading('Deleting course...')
-    await deleteCourseFromBackend(course_uuid, session.data?.tokens?.access_token)
-    toast.dismiss(toast_loading)
-    toast.success('Course deleted successfully')
-    await revalidateTags(['courses'], props.orgslug)
-
-    router.refresh()
+  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)
+    }
  }

-  useEffect(() => { }, [org])
+  const thumbnailImage = course.thumbnail_image
+    ? getCourseThumbnailMediaDirectory(org?.org_uuid, course.course_uuid, course.thumbnail_image)
+    : '../empty_thumbnail.png'

  return (
    <div className="relative">
-      <AdminEditsArea
-        course={props.course}
-        orgSlug={props.orgslug}
-        courseId={props.course.course_uuid}
-        deleteCourses={deleteCourses}
+      <AdminEditOptions
+        course={course}
+        orgSlug={orgslug}
+        deleteCourse={deleteCourse}
      />
-      <Link
-        href={getUriWithOrg(
-          props.orgslug,
-          '/course/' + removeCoursePrefix(props.course.course_uuid)
-        )}
-      >
-        {props.course.thumbnail_image ? (
-          <div
-            className="inset-0 ring-1 ring-inset ring-black/10 rounded-xl shadow-xl w-[249px] h-[131px] bg-cover"
-            style={{
-              backgroundImage: `url(${getCourseThumbnailMediaDirectory(
-                org?.org_uuid,
-                props.course.course_uuid,
-                props.course.thumbnail_image
-              )})`,
-            }}
-          />
-        ) : (
-          <div
-            className="inset-0 ring-1 ring-inset ring-black/10 rounded-xl shadow-xl w-[249px] h-[131px] bg-cover"
-            style={{
-              backgroundImage: `url('../empty_thumbnail.png')`,
-              backgroundSize: 'contain',
-            }}
-          />
-        )}
+      <Link prefetch href={customLink ? customLink : getUriWithOrg(orgslug, `/course/${removeCoursePrefix(course.course_uuid)}`)}>
+        <div
+          className="inset-0 ring-1 ring-inset ring-black/10 rounded-xl shadow-xl w-full aspect-video bg-cover bg-center"
+          style={{ backgroundImage: `url(${thumbnailImage})` }}
+        />
      </Link>
-      <div className='flex flex-col w-[250px] pt-3 space-y-2'>
-        <h2 className="font-bold text-gray-800 max-h-[80px] h-fit line-clamp-2 leading-tight text-lg capitalize">{props.course.name}</h2>
-        <h3 className='text-sm text-gray-700 leading-normal line-clamp-3'>{props.course.description}</h3>
+      <div className='flex flex-col w-full pt-3 space-y-2'>
+        <h2 className="font-bold text-gray-800 line-clamp-2 leading-tight text-lg capitalize">{course.name}</h2>
+        <p className='text-sm text-gray-700 leading-normal line-clamp-3'>{course.description}</p>
      </div>
    </div>
  )
 }

-const AdminEditsArea = (props: {
+const AdminEditOptions = ({ course, orgSlug, deleteCourse }: {
+  course: Course
  orgSlug: string
-  courseId: string
-  course: any
-  deleteCourses: any
+  deleteCourse: () => Promise<void>
 }) => {
  return (
    <AuthenticatedClientElement
      action="update"
      ressourceType="courses"
      checkMethod="roles"
-      orgId={props.course.org_id}
+      orgId={course.org_id}
    >
-      <div
-        className="flex items-center space-x-2 absolute z-20 overflow-hidden rounded-xl pt-0 mx-auto justify-center transform w-full h-[60px] bg-gradient-to-t from-transparent from-10% to-gray-900/60">
-        <Link
-          href={getUriWithOrg(
-            props.orgSlug,
-            '/dash/courses/course/' +
-            removeCoursePrefix(props.courseId) +
-            '/content'
-          )}
-          prefetch
-        >
-          <div
-            className="hover:cursor-pointer p-1 px-4 bg-blue-600 rounded-xl items-center flex shadow-2xl"
-            rel="noopener noreferrer"
-          >
-            <FilePenLine size={14} className="text-blue-200 font-bold" />
-          </div>
-        </Link>
-        <Link
-          href={getUriWithOrg(
-            props.orgSlug,
-            '/dash/courses/course/' +
-            removeCoursePrefix(props.courseId) +
-            '/general'
-          )}
-          prefetch
-        >
-          <div
-            className=" hover:cursor-pointer p-1 px-4 bg-gray-800 rounded-xl items-center  flex shadow-2xl"
-            rel="noopener noreferrer"
-          >
-            <Settings2 size={14} className="text-gray-200 font-bold" />
-          </div>
-        </Link>
-        <EllipsisVertical size={14} className='text-gray-200 font-bold' />
-        <ConfirmationModal
-          confirmationButtonText="Delete Course"
-          confirmationMessage="Are you sure you want to delete this course?"
-          dialogTitle={'Delete ' + props.course.name + ' ?'}
-          dialogTrigger={
-            <div
-              className="hover:cursor-pointer p-1 px-4 bg-rose-600 h-fit rounded-xl items-center flex shadow-2xl"
-              rel="noopener noreferrer"
-            >
-              <BookMinus size={14} className="text-rose-200 font-bold" />
-            </div>
-          }
-          functionToExecute={() => props.deleteCourses(props.courseId)}
-          status="warning"
-        ></ConfirmationModal>
+      <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>
  )