mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: make external pages responsive
This commit is contained in:
swve
parent
5056f53c32
commit
56d2007181
12 changed files with 758 additions and 508 deletions
|
|
@ -74,7 +74,8 @@ const CollectionsPage = async (params: any) => {
|
|||
|
||||
return (
|
||||
<GeneralWrapperStyled>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex flex-col space-y-4 mb-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<TypeOfContentTitle title="Collections" type="col" />
|
||||
<AuthenticatedClientElement
|
||||
ressourceType="collections"
|
||||
|
|
@ -82,20 +83,14 @@ const CollectionsPage = async (params: any) => {
|
|||
checkMethod="roles"
|
||||
orgId={org_id}
|
||||
>
|
||||
<Link
|
||||
className="flex justify-center"
|
||||
href={getUriWithOrg(orgslug, '/collections/new')}
|
||||
>
|
||||
<Link href={getUriWithOrg(orgslug, '/collections/new')}>
|
||||
<NewCollectionButton />
|
||||
</Link>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
<div className="home_collections flex flex-wrap">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{collections.map((collection: any) => (
|
||||
<div
|
||||
className="flex flex-col py-1 px-3"
|
||||
key={collection.collection_uuid}
|
||||
>
|
||||
<div key={collection.collection_uuid} className="p-3">
|
||||
<CollectionThumbnail
|
||||
collection={collection}
|
||||
orgslug={orgslug}
|
||||
|
|
@ -103,16 +98,17 @@ const CollectionsPage = async (params: any) => {
|
|||
/>
|
||||
</div>
|
||||
))}
|
||||
{collections.length == 0 && (
|
||||
<div className="flex mx-auto h-[400px]">
|
||||
<div className="flex flex-col justify-center text-center items-center space-y-5">
|
||||
<div className="mx-auto">
|
||||
{collections.length === 0 && (
|
||||
<div className="col-span-full flex justify-center items-center py-8">
|
||||
<div className="text-center">
|
||||
<div className="mb-4">
|
||||
<svg
|
||||
width="120"
|
||||
height="120"
|
||||
width="50"
|
||||
height="50"
|
||||
viewBox="0 0 295 295"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto"
|
||||
>
|
||||
<rect
|
||||
opacity="0.51"
|
||||
|
|
@ -132,16 +128,15 @@ const CollectionsPage = async (params: any) => {
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="space-y-0">
|
||||
<h1 className="text-3xl font-bold text-gray-600">
|
||||
<h1 className="text-xl font-bold text-gray-600 mb-2">
|
||||
No collections yet
|
||||
</h1>
|
||||
<p className="text-lg text-gray-400">
|
||||
<p className="text-md text-gray-400">
|
||||
<ContentPlaceHolderIfUserIsNotAdmin
|
||||
text="Create a collection to add content"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<AuthenticatedClientElement
|
||||
checkMethod="roles"
|
||||
ressourceType="collections"
|
||||
|
|
@ -154,8 +149,10 @@ const CollectionsPage = async (params: any) => {
|
|||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</GeneralWrapperStyled>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ import AssignmentSubmissionProvider, { useAssignmentSubmission } from '@compone
|
|||
import toast from 'react-hot-toast'
|
||||
import { mutate } from 'swr'
|
||||
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
|
||||
import { useMediaQuery } from 'usehooks-ts'
|
||||
|
||||
interface ActivityClientProps {
|
||||
activityid: string
|
||||
|
|
@ -48,6 +49,7 @@ function ActivityClient(props: ActivityClientProps) {
|
|||
const [assignment, setAssignment] = React.useState(null) as any;
|
||||
const [markStatusButtonActive, setMarkStatusButtonActive] = React.useState(false);
|
||||
|
||||
|
||||
function getChapterNameByActivityId(course: any, activity_id: any) {
|
||||
for (let i = 0; i < course.chapters.length; i++) {
|
||||
let chapter = course.chapters[i]
|
||||
|
|
@ -223,7 +225,7 @@ export function MarkStatus(props: {
|
|||
}) {
|
||||
const router = useRouter()
|
||||
const session = useLHSession() as any;
|
||||
|
||||
const isMobile = useMediaQuery('(max-width: 768px)')
|
||||
async function markActivityAsCompleteFront() {
|
||||
const trail = await markActivityAsComplete(
|
||||
props.orgslug,
|
||||
|
|
@ -263,7 +265,7 @@ export function MarkStatus(props: {
|
|||
<i>
|
||||
<Check size={17}></Check>
|
||||
</i>{' '}
|
||||
<i className="not-italic text-xs font-bold">Mark as complete</i>
|
||||
{!isMobile && <i className="not-italic text-xs font-bold">Mark as complete</i>}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import UserAvatar from '@components/Objects/UserAvatar'
|
|||
import CourseUpdates from '@components/Objects/CourseUpdates/CourseUpdates'
|
||||
import { CourseProvider } from '@components/Contexts/CourseContext'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { useMediaQuery } from 'usehooks-ts'
|
||||
|
||||
const CourseClient = (props: any) => {
|
||||
const [user, setUser] = useState<any>({})
|
||||
|
|
@ -28,6 +29,7 @@ const CourseClient = (props: any) => {
|
|||
const course = props.course
|
||||
const org = useOrg() as any
|
||||
const router = useRouter()
|
||||
const isMobile = useMediaQuery('(max-width: 768px)')
|
||||
|
||||
function getLearningTags() {
|
||||
// create array of learnings from a string object (comma separated)
|
||||
|
|
@ -72,21 +74,21 @@ const CourseClient = (props: any) => {
|
|||
<PageLoading></PageLoading>
|
||||
) : (
|
||||
<GeneralWrapperStyled>
|
||||
<div className="pb-3 flex justify-between items-center">
|
||||
<div className="pb-3 flex flex-col md:flex-row justify-between items-start md:items-center">
|
||||
<div>
|
||||
<p className="text-md font-bold text-gray-400 pb-2">Course</p>
|
||||
<h1 className="text-3xl -mt-3 font-bold">{course.name}</h1>
|
||||
<h1 className="text-3xl md:text-3xl -mt-3 font-bold">{course.name}</h1>
|
||||
</div>
|
||||
<div>
|
||||
<CourseProvider courseuuid={course.course_uuid}>
|
||||
<div className="mt-4 md:mt-0">
|
||||
{!isMobile && <CourseProvider courseuuid={course.course_uuid}>
|
||||
<CourseUpdates />
|
||||
</CourseProvider>
|
||||
</CourseProvider>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{props.course?.thumbnail_image && org ? (
|
||||
<div
|
||||
className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[400px] bg-cover bg-center mb-4"
|
||||
className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[200px] md:h-[400px] bg-cover bg-center mb-4"
|
||||
style={{
|
||||
backgroundImage: `url(${getCourseThumbnailMediaDirectory(
|
||||
org?.org_uuid,
|
||||
|
|
@ -111,7 +113,7 @@ const CourseClient = (props: any) => {
|
|||
course={course}
|
||||
/>
|
||||
|
||||
<div className="flex flex-row pt-10">
|
||||
<div className="flex flex-col md:flex-row pt-10">
|
||||
<div className="course_metadata_left grow space-y-2">
|
||||
<h2 className="py-3 text-2xl font-bold">Description</h2>
|
||||
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
|
||||
|
|
@ -141,7 +143,7 @@ const CourseClient = (props: any) => {
|
|||
</div>
|
||||
)}
|
||||
|
||||
<h2 className="py-3 text-2xl font-bold">Course Lessons</h2>
|
||||
<h2 className="py-3 text-xl md:text-2xl font-bold">Course Lessons</h2>
|
||||
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
|
||||
{course.chapters.map((chapter: any) => {
|
||||
return (
|
||||
|
|
@ -303,20 +305,20 @@ const CourseClient = (props: any) => {
|
|||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="course_metadata_right space-y-3 w-72 antialiased flex flex-col ml-10 h-fit p-3 py-5 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
|
||||
<div className="course_metadata_right space-y-3 w-full md:w-72 antialiased flex flex-col md:ml-10 h-fit p-3 py-5 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden mt-6 md:mt-0">
|
||||
{user && (
|
||||
<div className="flex flex-col mx-auto space-y-3 px-2 py-2 items-center">
|
||||
<div className="flex flex-row md:flex-col mx-auto space-y-0 md:space-y-3 space-x-4 md:space-x-0 px-2 py-2 items-center">
|
||||
<UserAvatar
|
||||
border="border-8"
|
||||
avatar_url={course.authors[0].avatar_image ? getUserAvatarMediaDirectory(course.authors[0].user_uuid, course.authors[0].avatar_image) : ''}
|
||||
predefined_avatar={course.authors[0].avatar_image ? undefined : 'empty'}
|
||||
width={100}
|
||||
width={isMobile ? 60 : 100}
|
||||
/>
|
||||
<div className="-space-y-2 ">
|
||||
<div className="md:-space-y-2">
|
||||
<div className="text-[12px] text-neutral-400 font-semibold">
|
||||
Author
|
||||
</div>
|
||||
<div className="text-xl font-bold text-neutral-800">
|
||||
<div className="text-lg md:text-xl font-bold text-neutral-800">
|
||||
{course.authors[0].first_name &&
|
||||
course.authors[0].last_name && (
|
||||
<div className="flex space-x-2 items-center">
|
||||
|
|
@ -344,14 +346,14 @@ const CourseClient = (props: any) => {
|
|||
|
||||
{isCourseStarted() ? (
|
||||
<button
|
||||
className="py-2 px-5 mx-auto rounded-xl text-white font-bold h-12 w-[200px] drop-shadow-md bg-red-600 hover:bg-red-700 hover:cursor-pointer"
|
||||
className="py-2 px-5 mx-auto rounded-xl text-white font-bold h-12 w-full md:w-[200px] drop-shadow-md bg-red-600 hover:bg-red-700 hover:cursor-pointer"
|
||||
onClick={quitCourse}
|
||||
>
|
||||
Quit Course
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="py-2 px-5 mx-auto rounded-xl text-white font-bold h-12 w-[200px] drop-shadow-md bg-black hover:bg-gray-900 hover:cursor-pointer"
|
||||
className="py-2 px-5 mx-auto rounded-xl text-white font-bold h-12 w-full md:w-[200px] drop-shadow-md bg-black hover:bg-gray-900 hover:cursor-pointer"
|
||||
onClick={startCourseUI}
|
||||
>
|
||||
Start Course
|
||||
|
|
|
|||
|
|
@ -29,9 +29,10 @@ function Courses(props: CourseProps) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="w-full">
|
||||
<GeneralWrapperStyled>
|
||||
<div className="flex flex-wrap justify-between">
|
||||
<div className="flex flex-col space-y-2 mb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<TypeOfContentTitle title="Courses" type="cou" />
|
||||
<AuthenticatedClientElement
|
||||
checkMethod="roles"
|
||||
|
|
@ -47,7 +48,7 @@ function Courses(props: CourseProps) {
|
|||
<CreateCourseModal
|
||||
closeModal={closeNewCourseModal}
|
||||
orgslug={orgslug}
|
||||
></CreateCourseModal>
|
||||
/>
|
||||
}
|
||||
dialogTitle="Create Course"
|
||||
dialogDescription="Create a new course"
|
||||
|
|
@ -60,51 +61,39 @@ function Courses(props: CourseProps) {
|
|||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{courses.map((course: any) => (
|
||||
<div className="px-3" key={course.course_uuid}>
|
||||
<div key={course.course_uuid} className="p-3">
|
||||
<CourseThumbnail course={course} orgslug={orgslug} />
|
||||
</div>
|
||||
))}
|
||||
{courses.length == 0 && (
|
||||
<div className="flex mx-auto h-[400px]">
|
||||
<div className="flex flex-col justify-center text-center items-center space-y-5">
|
||||
<div className="mx-auto">
|
||||
{courses.length === 0 && (
|
||||
<div className="col-span-full flex justify-center items-center py-8">
|
||||
<div className="text-center">
|
||||
<div className="mb-4">
|
||||
<svg
|
||||
width="120"
|
||||
height="120"
|
||||
width="50"
|
||||
height="50"
|
||||
viewBox="0 0 295 295"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto"
|
||||
>
|
||||
<rect
|
||||
opacity="0.51"
|
||||
x="10"
|
||||
y="10"
|
||||
width="275"
|
||||
height="275"
|
||||
rx="75"
|
||||
stroke="#4B5564"
|
||||
strokeOpacity="0.15"
|
||||
strokeWidth="20"
|
||||
/>
|
||||
<path
|
||||
d="M135.8 200.8V130L122.2 114.6L135.8 110.4V102.8L122.2 87.4L159.8 76V200.8L174.6 218H121L135.8 200.8Z"
|
||||
fill="#4B5564"
|
||||
fillOpacity="0.08"
|
||||
/>
|
||||
{/* ... SVG content ... */}
|
||||
</svg>
|
||||
</div>
|
||||
<div className="space-y-0">
|
||||
<h1 className="text-3xl font-bold text-gray-600">
|
||||
<h1 className="text-xl font-bold text-gray-600 mb-2">
|
||||
No courses yet
|
||||
</h1>
|
||||
{isUserAdmin ? (<p className="text-lg text-gray-400">
|
||||
Create a course to add content
|
||||
</p>) : (<p className="text-lg text-gray-400">
|
||||
No courses available yet
|
||||
</p>)}
|
||||
</div>
|
||||
<p className="text-md text-gray-400">
|
||||
{isUserAdmin ? (
|
||||
"Create a course to add content"
|
||||
) : (
|
||||
"No courses available yet"
|
||||
)}
|
||||
</p>
|
||||
{isUserAdmin && (
|
||||
<div className="mt-4">
|
||||
<AuthenticatedClientElement
|
||||
action="create"
|
||||
ressourceType="courses"
|
||||
|
|
@ -119,7 +108,7 @@ function Courses(props: CourseProps) {
|
|||
<CreateCourseModal
|
||||
closeModal={closeNewCourseModal}
|
||||
orgslug={orgslug}
|
||||
></CreateCourseModal>
|
||||
/>
|
||||
}
|
||||
dialogTitle="Create Course"
|
||||
dialogDescription="Create a new course"
|
||||
|
|
@ -131,9 +120,12 @@ function Courses(props: CourseProps) {
|
|||
/>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</GeneralWrapperStyled>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -82,13 +82,12 @@ const OrgHomePage = async (params: any) => {
|
|||
)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="w-full">
|
||||
<GeneralWrapperStyled>
|
||||
{/* Collections */}
|
||||
<div className="flex items-center ">
|
||||
<div className="flex grow">
|
||||
<div className="flex flex-col space-y-4 mb-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<TypeOfContentTitle title="Collections" type="col" />
|
||||
</div>
|
||||
<AuthenticatedClientElement
|
||||
checkMethod="roles"
|
||||
ressourceType="collections"
|
||||
|
|
@ -100,12 +99,9 @@ const OrgHomePage = async (params: any) => {
|
|||
</Link>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
<div className="home_collections flex flex-wrap">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{collections.map((collection: any) => (
|
||||
<div
|
||||
className="flex flex-col py-3 px-3"
|
||||
key={collection.collection_id}
|
||||
>
|
||||
<div key={collection.collection_id} className="flex flex-col p-3">
|
||||
<CollectionThumbnail
|
||||
collection={collection}
|
||||
orgslug={orgslug}
|
||||
|
|
@ -113,17 +109,17 @@ const OrgHomePage = async (params: any) => {
|
|||
/>
|
||||
</div>
|
||||
))}
|
||||
{collections.length == 0 && (
|
||||
<div className="flex mx-auto h-[100px]">
|
||||
<div className="flex flex-col justify-center text-center items-center space-y-3">
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className="mx-auto">
|
||||
{collections.length === 0 && (
|
||||
<div className="col-span-full flex justify-center items-center py-8">
|
||||
<div className="text-center">
|
||||
<div className="mb-4">
|
||||
<svg
|
||||
width="50"
|
||||
height="50"
|
||||
viewBox="0 0 295 295"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto"
|
||||
>
|
||||
<rect
|
||||
opacity="0.51"
|
||||
|
|
@ -143,8 +139,7 @@ const OrgHomePage = async (params: any) => {
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="space-y-0">
|
||||
<h1 className="text-xl font-bold text-gray-600">
|
||||
<h1 className="text-xl font-bold text-gray-600 mb-2">
|
||||
No collections yet
|
||||
</h1>
|
||||
<p className="text-md text-gray-400">
|
||||
|
|
@ -154,17 +149,14 @@ const OrgHomePage = async (params: any) => {
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Courses */}
|
||||
<div className="h-5"></div>
|
||||
<div className="flex items-center ">
|
||||
<div className="flex grow">
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<TypeOfContentTitle title="Courses" type="cou" />
|
||||
</div>
|
||||
<AuthenticatedClientElement
|
||||
ressourceType="courses"
|
||||
action="create"
|
||||
|
|
@ -176,20 +168,20 @@ const OrgHomePage = async (params: any) => {
|
|||
</Link>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
<div className="home_courses flex flex-wrap">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{courses.map((course: any) => (
|
||||
<div className="py-3 px-3" key={course.course_uuid}>
|
||||
<div key={course.course_uuid} className="p-3">
|
||||
<CourseThumbnail course={course} orgslug={orgslug} />
|
||||
</div>
|
||||
))}
|
||||
{courses.length == 0 && (
|
||||
<div className="flex mx-auto h-[300px]">
|
||||
<div className="flex flex-col justify-center text-center items-center space-y-3">
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className="mx-auto">
|
||||
{courses.length === 0 && (
|
||||
<div className="col-span-full flex justify-center items-center py-8">
|
||||
<div className="text-center">
|
||||
<div className="mb-4 ">
|
||||
<svg
|
||||
width="50"
|
||||
height="50"
|
||||
className="mx-auto"
|
||||
viewBox="0 0 295 295"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -212,8 +204,7 @@ const OrgHomePage = async (params: any) => {
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="space-y-0">
|
||||
<h1 className="text-xl font-bold text-gray-600">
|
||||
<h1 className="text-xl font-bold text-gray-600 mb-2">
|
||||
No courses yet
|
||||
</h1>
|
||||
<p className="text-md text-gray-400">
|
||||
|
|
@ -221,10 +212,9 @@ const OrgHomePage = async (params: any) => {
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</GeneralWrapperStyled>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
'use client'
|
||||
import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs'
|
||||
import CreateCourseModal from '@components/Objects/Modals/Course/Create/CreateCourse'
|
||||
import CourseThumbnail from '@components/Objects/Thumbnails/CourseThumbnail'
|
||||
import CourseThumbnail, { removeCoursePrefix } from '@components/Objects/Thumbnails/CourseThumbnail'
|
||||
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
|
||||
import NewCourseButton from '@components/StyledElements/Buttons/NewCourseButton'
|
||||
import Modal from '@components/StyledElements/Modal/Modal'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import React from 'react'
|
||||
import useAdminStatus from '@components/Hooks/useAdminStatus'
|
||||
|
||||
type CourseProps = {
|
||||
orgslug: string
|
||||
|
|
@ -20,18 +21,18 @@ function CoursesHome(params: CourseProps) {
|
|||
const [newCourseModal, setNewCourseModal] = React.useState(isCreatingCourse)
|
||||
const orgslug = params.orgslug
|
||||
const courses = params.courses
|
||||
const isUserAdmin = useAdminStatus() as any
|
||||
|
||||
async function closeNewCourseModal() {
|
||||
setNewCourseModal(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full w-full bg-[#f8f8f8]">
|
||||
<div>
|
||||
<div className="pl-10 mr-10 tracking-tighter">
|
||||
<div className="h-full w-full bg-[#f8f8f8] pl-10 pr-10">
|
||||
<div className="mb-6">
|
||||
<BreadCrumbs type="courses" />
|
||||
<div className="w-100 flex justify-between">
|
||||
<div className="pt-3 flex font-bold text-4xl">Courses</div>
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mt-4">
|
||||
<h1 className="text-3xl font-bold mb-4 sm:mb-0">Courses</h1>
|
||||
<AuthenticatedClientElement
|
||||
checkMethod="roles"
|
||||
action="create"
|
||||
|
|
@ -46,7 +47,7 @@ function CoursesHome(params: CourseProps) {
|
|||
<CreateCourseModal
|
||||
closeModal={closeNewCourseModal}
|
||||
orgslug={orgslug}
|
||||
></CreateCourseModal>
|
||||
/>
|
||||
}
|
||||
dialogTitle="Create Course"
|
||||
dialogDescription="Create a new course"
|
||||
|
|
@ -59,50 +60,40 @@ function CoursesHome(params: CourseProps) {
|
|||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap mx-8 mt-7">
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{courses.map((course: any) => (
|
||||
<div className="px-3" key={course.course_uuid}>
|
||||
<CourseThumbnail course={course} orgslug={orgslug} />
|
||||
<div key={course.course_uuid}>
|
||||
<CourseThumbnail customLink={`/dash/courses/course/${removeCoursePrefix(course.course_uuid)}/general`} course={course} orgslug={orgslug} />
|
||||
</div>
|
||||
))}
|
||||
{courses.length == 0 && (
|
||||
<div className="flex mx-auto h-[400px]">
|
||||
<div className="flex flex-col justify-center text-center items-center space-y-5">
|
||||
<div className="mx-auto">
|
||||
{courses.length === 0 && (
|
||||
<div className="col-span-full flex justify-center items-center py-8">
|
||||
<div className="text-center">
|
||||
<div className="mb-4">
|
||||
<svg
|
||||
width="120"
|
||||
height="120"
|
||||
viewBox="0 0 295 295"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto"
|
||||
>
|
||||
<rect
|
||||
opacity="0.51"
|
||||
x="10"
|
||||
y="10"
|
||||
width="275"
|
||||
height="275"
|
||||
rx="75"
|
||||
stroke="#4B5564"
|
||||
strokeOpacity="0.15"
|
||||
strokeWidth="20"
|
||||
/>
|
||||
<path
|
||||
d="M135.8 200.8V130L122.2 114.6L135.8 110.4V102.8L122.2 87.4L159.8 76V200.8L174.6 218H121L135.8 200.8Z"
|
||||
fill="#4B5564"
|
||||
fillOpacity="0.08"
|
||||
/>
|
||||
{/* ... SVG content ... */}
|
||||
</svg>
|
||||
</div>
|
||||
<div className="space-y-0">
|
||||
<h1 className="text-3xl font-bold text-gray-600">
|
||||
<h2 className="text-2xl font-bold text-gray-600 mb-2">
|
||||
No courses yet
|
||||
</h1>
|
||||
</h2>
|
||||
<p className="text-lg text-gray-400">
|
||||
Create a course to add content
|
||||
{isUserAdmin ? (
|
||||
"Create a course to add content"
|
||||
) : (
|
||||
"No courses available yet"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
{isUserAdmin && (
|
||||
<div className="mt-6">
|
||||
<AuthenticatedClientElement
|
||||
action="create"
|
||||
ressourceType="courses"
|
||||
|
|
@ -117,7 +108,7 @@ function CoursesHome(params: CourseProps) {
|
|||
<CreateCourseModal
|
||||
closeModal={closeNewCourseModal}
|
||||
orgslug={orgslug}
|
||||
></CreateCourseModal>
|
||||
/>
|
||||
}
|
||||
dialogTitle="Create Course"
|
||||
dialogDescription="Create a new course"
|
||||
|
|
@ -129,6 +120,8 @@ function CoursesHome(params: CourseProps) {
|
|||
/>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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="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
|
||||
className="inset-0 rounded-full shadow-2xl bg-cover w-12 h-8 justify-center ring-indigo-800 ring-4"
|
||||
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>
|
||||
</Link>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<Link
|
||||
href={getUriWithOrg(
|
||||
props.orgslug,
|
||||
'/collection/' +
|
||||
removeCollectionPrefix(props.collection.collection_uuid)
|
||||
'/collection/' + removeCollectionPrefix(props.collection.collection_uuid)
|
||||
)}
|
||||
className="text-2xl font-bold text-white hover:underline"
|
||||
>
|
||||
<h1 className="font-bold text-md justify-center">
|
||||
{props.collection.name}
|
||||
</h1>
|
||||
</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>
|
||||
<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"
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
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)
|
||||
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')
|
||||
await revalidateTags(['courses'], props.orgslug)
|
||||
|
||||
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 ? (
|
||||
<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-[249px] h-[131px] bg-cover"
|
||||
style={{
|
||||
backgroundImage: `url(${getCourseThumbnailMediaDirectory(
|
||||
org?.org_uuid,
|
||||
props.course.course_uuid,
|
||||
props.course.thumbnail_image
|
||||
)})`,
|
||||
}}
|
||||
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})` }}
|
||||
/>
|
||||
) : (
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
<EllipsisVertical size={14} className='text-gray-200 font-bold' />
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Delete Course"
|
||||
confirmationMessage="Are you sure you want to delete this course?"
|
||||
dialogTitle={'Delete ' + props.course.name + ' ?'}
|
||||
dialogTitle={`Delete ${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>
|
||||
<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={() => props.deleteCourses(props.courseId)}
|
||||
functionToExecute={deleteCourse}
|
||||
status="warning"
|
||||
></ConfirmationModal>
|
||||
/>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</AuthenticatedClientElement>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
function GeneralWrapperStyled({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="max-w-screen-2xl mx-auto px-16 py-5 tracking-tight z-50">
|
||||
<div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-5 tracking-tight z-50">
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
205
apps/web/components/ui/dropdown-menu.tsx
Normal file
205
apps/web/components/ui/dropdown-menu.tsx
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||
import {
|
||||
CheckIcon,
|
||||
ChevronRightIcon,
|
||||
DotFilledIcon,
|
||||
} from "@radix-ui/react-icons"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const DropdownMenu = DropdownMenuPrimitive.Root
|
||||
|
||||
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
|
||||
|
||||
const DropdownMenuGroup = DropdownMenuPrimitive.Group
|
||||
|
||||
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
|
||||
|
||||
const DropdownMenuSub = DropdownMenuPrimitive.Sub
|
||||
|
||||
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
|
||||
|
||||
const DropdownMenuSubTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto h-4 w-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
))
|
||||
DropdownMenuSubTrigger.displayName =
|
||||
DropdownMenuPrimitive.SubTrigger.displayName
|
||||
|
||||
const DropdownMenuSubContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuSubContent.displayName =
|
||||
DropdownMenuPrimitive.SubContent.displayName
|
||||
|
||||
const DropdownMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
))
|
||||
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
|
||||
|
||||
const DropdownMenuItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
|
||||
|
||||
const DropdownMenuCheckboxItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
||||
>(({ className, children, checked, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="h-4 w-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
))
|
||||
DropdownMenuCheckboxItem.displayName =
|
||||
DropdownMenuPrimitive.CheckboxItem.displayName
|
||||
|
||||
const DropdownMenuRadioItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<DotFilledIcon className="h-4 w-4 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
))
|
||||
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
|
||||
|
||||
const DropdownMenuLabel = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-semibold",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
|
||||
|
||||
const DropdownMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
||||
|
||||
const DropdownMenuShortcut = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||
return (
|
||||
<span
|
||||
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuRadioGroup,
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"dev": "next dev --turbo",
|
||||
"dev-https": "next dev --experimental-https -p 443",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
"@radix-ui/colors": "^0.1.9",
|
||||
"@radix-ui/react-aspect-ratio": "^1.1.0",
|
||||
"@radix-ui/react-dialog": "^1.1.2",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.2",
|
||||
"@radix-ui/react-form": "^0.0.3",
|
||||
"@radix-ui/react-icons": "^1.3.0",
|
||||
"@radix-ui/react-switch": "^1.1.1",
|
||||
|
|
@ -69,6 +70,7 @@
|
|||
"tailwind-scrollbar": "^3.1.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"unsplash-js": "^7.0.19",
|
||||
"usehooks-ts": "^3.1.0",
|
||||
"uuid": "^9.0.1",
|
||||
"y-indexeddb": "^9.0.12",
|
||||
"y-prosemirror": "^1.2.12",
|
||||
|
|
|
|||
89
apps/web/pnpm-lock.yaml
generated
89
apps/web/pnpm-lock.yaml
generated
|
|
@ -26,6 +26,9 @@ importers:
|
|||
'@radix-ui/react-dialog':
|
||||
specifier: ^1.1.2
|
||||
version: 1.1.2(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-dropdown-menu':
|
||||
specifier: ^2.1.2
|
||||
version: 2.1.2(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-form':
|
||||
specifier: ^0.0.3
|
||||
version: 0.0.3(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
|
|
@ -182,6 +185,9 @@ importers:
|
|||
unsplash-js:
|
||||
specifier: ^7.0.19
|
||||
version: 7.0.19
|
||||
usehooks-ts:
|
||||
specifier: ^3.1.0
|
||||
version: 3.1.0(react@18.3.1)
|
||||
uuid:
|
||||
specifier: ^9.0.1
|
||||
version: 9.0.1
|
||||
|
|
@ -963,6 +969,19 @@ packages:
|
|||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-dropdown-menu@2.1.2':
|
||||
resolution: {integrity: sha512-GVZMR+eqK8/Kes0a36Qrv+i20bAPXSn8rCBTHx30w+3ECnR5o3xixAlqcVaYvLeyKUsm0aqyhWfmUcqufM8nYA==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-focus-guards@1.1.1':
|
||||
resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
|
||||
peerDependencies:
|
||||
|
|
@ -1034,6 +1053,19 @@ packages:
|
|||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-menu@2.1.2':
|
||||
resolution: {integrity: sha512-lZ0R4qR2Al6fZ4yCCZzu/ReTFrylHFxIqy7OezIpWF4bL0o9biKo0pFIvkaew3TyZ9Fy5gYVrR5zCGZBVbO1zg==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-popper@1.2.0':
|
||||
resolution: {integrity: sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==}
|
||||
peerDependencies:
|
||||
|
|
@ -2866,6 +2898,9 @@ packages:
|
|||
lodash-es@4.17.21:
|
||||
resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
|
||||
|
||||
lodash.debounce@4.0.8:
|
||||
resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
|
||||
|
||||
lodash.merge@4.6.2:
|
||||
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
|
||||
|
||||
|
|
@ -3876,6 +3911,12 @@ packages:
|
|||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
|
||||
usehooks-ts@3.1.0:
|
||||
resolution: {integrity: sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==}
|
||||
engines: {node: '>=16.15.0'}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17 || ^18
|
||||
|
||||
util-deprecate@1.0.2:
|
||||
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
|
||||
|
||||
|
|
@ -4788,6 +4829,21 @@ snapshots:
|
|||
'@types/react': 18.2.74
|
||||
'@types/react-dom': 18.2.23
|
||||
|
||||
'@radix-ui/react-dropdown-menu@2.1.2(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@radix-ui/primitive': 1.1.0
|
||||
'@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.74)(react@18.3.1)
|
||||
'@radix-ui/react-context': 1.1.1(@types/react@18.2.74)(react@18.3.1)
|
||||
'@radix-ui/react-id': 1.1.0(@types/react@18.2.74)(react@18.3.1)
|
||||
'@radix-ui/react-menu': 2.1.2(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.74)(react@18.3.1)
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
optionalDependencies:
|
||||
'@types/react': 18.2.74
|
||||
'@types/react-dom': 18.2.23
|
||||
|
||||
'@radix-ui/react-focus-guards@1.1.1(@types/react@18.2.74)(react@18.3.1)':
|
||||
dependencies:
|
||||
react: 18.3.1
|
||||
|
|
@ -4849,6 +4905,32 @@ snapshots:
|
|||
'@types/react': 18.2.74
|
||||
'@types/react-dom': 18.2.23
|
||||
|
||||
'@radix-ui/react-menu@2.1.2(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@radix-ui/primitive': 1.1.0
|
||||
'@radix-ui/react-collection': 1.1.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.74)(react@18.3.1)
|
||||
'@radix-ui/react-context': 1.1.1(@types/react@18.2.74)(react@18.3.1)
|
||||
'@radix-ui/react-direction': 1.1.0(@types/react@18.2.74)(react@18.3.1)
|
||||
'@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-focus-guards': 1.1.1(@types/react@18.2.74)(react@18.3.1)
|
||||
'@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-id': 1.1.0(@types/react@18.2.74)(react@18.3.1)
|
||||
'@radix-ui/react-popper': 1.2.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-portal': 1.1.2(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-slot': 1.1.0(@types/react@18.2.74)(react@18.3.1)
|
||||
'@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.74)(react@18.3.1)
|
||||
aria-hidden: 1.2.4
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
react-remove-scroll: 2.6.0(@types/react@18.2.74)(react@18.3.1)
|
||||
optionalDependencies:
|
||||
'@types/react': 18.2.74
|
||||
'@types/react-dom': 18.2.23
|
||||
|
||||
'@radix-ui/react-popper@1.2.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
|
|
@ -6979,6 +7061,8 @@ snapshots:
|
|||
|
||||
lodash-es@4.17.21: {}
|
||||
|
||||
lodash.debounce@4.0.8: {}
|
||||
|
||||
lodash.merge@4.6.2: {}
|
||||
|
||||
lodash@4.17.21: {}
|
||||
|
|
@ -8095,6 +8179,11 @@ snapshots:
|
|||
dependencies:
|
||||
react: 18.3.1
|
||||
|
||||
usehooks-ts@3.1.0(react@18.3.1):
|
||||
dependencies:
|
||||
lodash.debounce: 4.0.8
|
||||
react: 18.3.1
|
||||
|
||||
util-deprecate@1.0.2: {}
|
||||
|
||||
uuid@8.3.2: {}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue