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

feat: courses dashboard

Browse source
This commit is contained in:
swve 2023-12-13 15:56:12 +01:00
parent 8d35085908
commit c39d9d5340
22 changed files with 611 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

3
apps/web/components/Dashboard/CourseContext.tsx → apps/web/components/DashboardPages/CourseContext.tsx
View file

@ -1,4 +1,5 @@
'use client';
import PageLoading from '@components/Objects/Loaders/PageLoading';
import { getAPIUrl } from '@services/config/config';
import { swrFetcher } from '@services/utils/ts/requests';
import React, { createContext, useContext, useEffect, useReducer } from 'react'
@ -26,7 +27,7 @@ export function CourseProvider({ children, courseuuid }: { children: React.React
}, [courseStructureData]);
if (!courseStructureData) return <div>Loading...</div>
if (!courseStructureData) return <PageLoading></PageLoading>
return (

156
apps/web/components/DashboardPages/EditCourseGeneral/EditCourseGeneral.tsx Normal file
View file

@ -0,0 +1,156 @@
import FormLayout, { FormField, FormLabelAndMessage, Input, Textarea } from '@components/StyledElements/Form/Form';
import { useFormik } from 'formik';
import { AlertTriangle } from 'lucide-react'
import * as Switch from '@radix-ui/react-switch';
import * as Form from '@radix-ui/react-form';
import React from 'react'
import { useCourse, useCourseDispatch } from '../CourseContext';
type EditCourseStructureProps = {
orgslug: string,
course_uuid?: string,
}
const validate = (values: any) => {
const errors: any = {};
if (!values.name) {
errors.name = 'Required';
}
if (values.name.length > 100) {
errors.name = 'Must be 100 characters or less';
}
if (!values.description) {
errors.description = 'Required';
}
if (values.description.length > 1000) {
errors.description = 'Must be 1000 characters or less';
}
if (!values.learnings) {
errors.learnings = 'Required';
}
return errors;
};
function EditCourseGeneral(props: EditCourseStructureProps) {
const [error, setError] = React.useState('');
const course = useCourse() as any;
const dispatchCourse = useCourseDispatch() as any;
const courseStructure = course.courseStructure;
const formik = useFormik({
initialValues: {
name: String(courseStructure.name),
description: String(courseStructure.description),
about: String(courseStructure.about),
learnings: String(courseStructure.learnings),
tags: String(courseStructure.tags),
public: String(courseStructure.public),
},
validate,
onSubmit: async values => {
},
enableReinitialize: true,
});
React.useEffect(() => {
// This code will run whenever form values are updated
if (formik.values !== formik.initialValues) {
dispatchCourse({ type: 'setIsNotSaved' });
const updatedCourse = {
...courseStructure,
name: formik.values.name,
description: formik.values.description,
about: formik.values.about,
learnings: formik.values.learnings,
tags: formik.values.tags,
public: formik.values.public,
}
dispatchCourse({ type: 'setCourseStructure', payload: updatedCourse });
}
}, [course, formik.values, formik.initialValues]);
return (
<div className='ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5'>
{course.courseStructure && (
<div className="editcourse-form">
{error && (
<div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-sm">
<AlertTriangle size={18} />
<div className="font-bold text-sm">{error}</div>
</div>
)}
<FormLayout onSubmit={formik.handleSubmit}>
<FormField name="name">
<FormLabelAndMessage label='Name' message={formik.errors.name} />
<Form.Control asChild>
<Input style={{ backgroundColor: "white" }} onChange={formik.handleChange} value={formik.values.name} type="text" required />
</Form.Control>
</FormField>
<FormField name="description">
<FormLabelAndMessage label='Description' message={formik.errors.description} />
<Form.Control asChild>
<Textarea style={{ backgroundColor: "white" }} onChange={formik.handleChange} value={formik.values.description} required />
</Form.Control>
</FormField>
<FormField name="about">
<FormLabelAndMessage label='About' message={formik.errors.about} />
<Form.Control asChild>
<Textarea style={{ backgroundColor: "white" }} onChange={formik.handleChange} value={formik.values.about} required />
</Form.Control>
</FormField>
<FormField name="learnings">
<FormLabelAndMessage label='Learnings' message={formik.errors.learnings} />
<Form.Control asChild>
<Textarea style={{ backgroundColor: "white" }} onChange={formik.handleChange} value={formik.values.learnings} required />
</Form.Control>
</FormField>
<FormField name="tags">
<FormLabelAndMessage label='Tags' message={formik.errors.tags} />
<Form.Control asChild>
<Textarea style={{ backgroundColor: "white" }} onChange={formik.handleChange} value={formik.values.tags} required />
</Form.Control>
</FormField>
<FormField className="flex items-center h-10" name="public">
<div className='flex my-auto items-center'>
<label className="text-black text-[15px] leading-none pr-[15px]" htmlFor="public-course">
Public Course
</label>
<Switch.Root
className="w-[42px] h-[25px] bg-neutral-200 rounded-full relative data-[state=checked]:bg-neutral-500 outline-none cursor-default"
id="public-course"
onCheckedChange={checked => formik.setFieldValue('public', checked)}
checked={formik.values.public === 'true'}
>
<Switch.Thumb className="block w-[21px] h-[21px] bg-white rounded-full shadow-[0_2px_2px] shadow-neutral-300 transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]" />
</Switch.Root>
</div>
</FormField>
</FormLayout>
</div>
)}
</div>
)
}
export default EditCourseGeneral

12
apps/web/components/Dashboard/EditCourseStructure/Buttons/NewActivityButton.tsx → apps/web/components/DashboardPages/EditCourseStructure/Buttons/NewActivityButton.tsx
View file

@ -1,11 +1,11 @@
import { useCourse } from '@components/Dashboard/CourseContext';
import { useCourse } from '@components/DashboardPages/CourseContext';
import NewActivityModal from '@components/Objects/Modals/Activities/Create/NewActivity';
import Modal from '@components/StyledElements/Modal/Modal';
import { getAPIUrl } from '@services/config/config';
import { createActivity, createExternalVideoActivity, createFileActivity } from '@services/courses/activities';
import { getOrganizationContextInfoWithoutCredentials } from '@services/organizations/orgs';
import { revalidateTags } from '@services/utils/ts/requests';
import { Sparkles } from 'lucide-react'
import { Layers, Sparkles } from 'lucide-react'
import { useRouter } from 'next/navigation';
import React, { use, useEffect } from 'react'
import { mutate } from 'swr';
@ -62,7 +62,7 @@ function NewActivityButton(props: NewActivityButtonProps) {
, [course])
return (
<div>
<div className='flex justify-center'>
<Modal
isDialogOpen={newActivityModal}
onOpenChange={setNewActivityModal}
@ -82,9 +82,9 @@ function NewActivityButton(props: NewActivityButtonProps) {
/>
<div onClick={() => {
openNewActivityModal(props.chapterId)
}} className="flex space-x-2 items-center py-2 my-3 rounded-md justify-center text-white bg-black hover:cursor-pointer">
<Sparkles className="" size={17} />
<div className="text-sm mx-auto my-auto items-center font-bold">Add Activity + </div>
}} className="flex w-44 h-10 space-x-2 items-center py-2 my-3 rounded-xl justify-center text-white bg-black hover:cursor-pointer">
<Layers className="" size={17} />
<div className="text-sm mx-auto my-auto items-center font-bold">Add Activity</div>
</div>
</div>
)

62
apps/web/components/Dashboard/EditCourseStructure/DraggableElements/ActivityElement.tsx → apps/web/components/DashboardPages/EditCourseStructure/DraggableElements/ActivityElement.tsx
View file

@ -1,6 +1,6 @@
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
import { getAPIUrl, getUriWithOrg } from '@services/config/config'
import { deleteActivity } from '@services/courses/activities'
import { deleteActivity, updateActivity } from '@services/courses/activities'
import { revalidateTags } from '@services/utils/ts/requests'
import { Eye, File, MoreVertical, Pencil, Save, Sparkles, Video, X } from 'lucide-react'
import Link from 'next/link'
@ -16,8 +16,15 @@ type ActivitiyElementProps = {
course_uuid: string
}
interface ModifiedActivityInterface {
activityId: string;
activityName: string;
}
function ActivityElement(props: ActivitiyElementProps) {
const router = useRouter();
const [modifiedActivity, setModifiedActivity] = React.useState<ModifiedActivityInterface | undefined>(undefined);
const [selectedActivity, setSelectedActivity] = React.useState<string | undefined>(undefined);
async function deleteActivityUI() {
await deleteActivity(props.activity.id);
@ -26,6 +33,23 @@ function ActivityElement(props: ActivitiyElementProps) {
router.refresh();
}
async function updateActivityName(activityId: string) {
if ((modifiedActivity?.activityId === activityId) && selectedActivity !== undefined) {
setSelectedActivity(undefined);
let modifiedActivityCopy = {
name: modifiedActivity.activityName,
description: '',
type: props.activity.type,
content: props.activity.content,
}
await updateActivity(modifiedActivityCopy, activityId)
mutate(`${getAPIUrl()}courses/${props.course_uuid}/meta`);
await revalidateTags(['courses'], props.orgslug)
router.refresh();
}
}
return (
<Draggable key={props.activity.activity_uuid} draggableId={props.activity.activity_uuid} index={props.activityIndex}>
{(provided, snapshot) => (
@ -38,21 +62,19 @@ function ActivityElement(props: ActivitiyElementProps) {
>
{/* Activity Type Icon */}
<div className="px-3 text-gray-300 space-x-1 w-28" >
{props.activity.activity_type === "video" &&
<>
<div className="flex space-x-2 items-center">
<Video size={16} />
<div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full mx-auto justify-center align-middle">Video</div>
</div>
</>}
</div>
<ActivityTypeIndicator activityType={props.activity.activity_type} />
{/* Centered Activity Name */}
<div className="grow items-center space-x-2 flex mx-auto justify-center">
{(<p className="first-letter:uppercase"> {props.activity.name} </p>)}
<Pencil size={12} className="text-neutral-400 hover:cursor-pointer" />
{selectedActivity === props.activity.id ?
(<div className="chapter-modification-zone text-[7px] text-gray-600 shadow-inner bg-gray-200/60 py-1 px-4 rounded-lg space-x-3">
<input type="text" className="bg-transparent outline-none text-xs text-gray-500" placeholder="Activity name" value={modifiedActivity ? modifiedActivity?.activityName : props.activity.name} onChange={(e) => setModifiedActivity({ activityId: props.activity.id, activityName: e.target.value })} />
<button onClick={() => updateActivityName(props.activity.id)} className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900">
<Save size={11} onClick={() => updateActivityName(props.activity.id)} />
</button>
</div>) : (<p className="first-letter:uppercase"> {props.activity.name} </p>)}
<Pencil onClick={() => setSelectedActivity(props.activity.id)}
size={12} className="text-neutral-400 hover:cursor-pointer" />
</div>
{/* Edit and View Button */}
<div className="flex flex-row space-x-2">
@ -93,4 +115,18 @@ function ActivityElement(props: ActivitiyElementProps) {
)
}
const ActivityTypeIndicator = (props: { activityType: string }) => {
return (
<div className="px-3 text-gray-300 space-x-1 w-28" >
{props.activityType === "TYPE_VIDEO" && <>
<div className="flex space-x-2 items-center"><Video size={16} /> <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full mx-auto justify-center align-middle">Video</div> </div></>}
{props.activityType === "TYPE_DOCUMENT" && <><div className="flex space-x-2 items-center"><div className="w-[30px]"><File size={16} /> </div><div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full">Document</div> </div></>}
{props.activityType === "TYPE_DYNAMIC" && <><div className="flex space-x-2 items-center"><Sparkles size={16} /> <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full">Dynamic</div> </div></>}
</div>
)
}
export default ActivityElement

35
apps/web/components/Dashboard/EditCourseStructure/DraggableElements/ChapterElement.tsx → apps/web/components/DashboardPages/EditCourseStructure/DraggableElements/ChapterElement.tsx
View file

@ -6,7 +6,7 @@ import { Draggable, Droppable } from 'react-beautiful-dnd';
import ActivityElement from './ActivityElement';
import NewActivity from '../Buttons/NewActivityButton';
import NewActivityButton from '../Buttons/NewActivityButton';
import { deleteChapter } from '@services/courses/chapters';
import { deleteChapter, updateChapter } from '@services/courses/chapters';
import { revalidateTags } from '@services/utils/ts/requests';
import { useRouter } from 'next/navigation';
import { getAPIUrl } from '@services/config/config';
@ -19,8 +19,16 @@ type ChapterElementProps = {
course_uuid: string
}
interface ModifiedChapterInterface {
chapterId: string;
chapterName: string;
}
function ChapterElement(props: ChapterElementProps) {
const activities = props.chapter.activities || [];
const [modifiedChapter, setModifiedChapter] = React.useState<ModifiedChapterInterface | undefined>(undefined);
const [selectedChapter, setSelectedChapter] = React.useState<string | undefined>(undefined);
const router = useRouter();
const deleteChapterUI = async () => {
@ -30,6 +38,19 @@ function ChapterElement(props: ChapterElementProps) {
router.refresh();
};
async function updateChapterName(chapterId: string) {
if (modifiedChapter?.chapterId === chapterId) {
setSelectedChapter(undefined);
let modifiedChapterCopy = {
name: modifiedChapter.chapterName,
}
await updateChapter(chapterId, modifiedChapterCopy)
mutate(`${getAPIUrl()}courses/${props.course_uuid}/meta`);
await revalidateTags(['courses'], props.orgslug)
router.refresh();
}
}
return (
<Draggable
key={props.chapter.chapter_uuid}
@ -38,7 +59,7 @@ function ChapterElement(props: ChapterElementProps) {
>
{(provided, snapshot) => (
<div
className="max-w-screen-2xl mx-auto bg-white rounded-xl shadow-sm px-6 pt-6"
className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 pt-6"
key={props.chapter.chapter_uuid}
{...provided.draggableProps}
{...provided.dragHandleProps}
@ -50,8 +71,14 @@ function ChapterElement(props: ChapterElementProps) {
<Hexagon strokeWidth={3} size={16} className="text-neutral-600 " />
</div>
<div className="flex space-x-2 items-center">
<p className="text-neutral-700 first-letter:uppercase">{props.chapter.name} </p>
<Pencil size={15} className="text-neutral-600 hover:cursor-pointer" />
{selectedChapter === props.chapter.id ?
(<div className="chapter-modification-zone bg-neutral-100 py-1 px-4 rounded-lg space-x-3">
<input type="text" className="bg-transparent outline-none text-sm text-neutral-700" placeholder="Chapter name" value={modifiedChapter ? modifiedChapter?.chapterName : props.chapter.name} onChange={(e) => setModifiedChapter({ chapterId: props.chapter.id, chapterName: e.target.value })} />
<button onClick={() => updateChapterName(props.chapter.id)} className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900">
<Save size={15} onClick={() => updateChapterName(props.chapter.id)} />
</button>
</div>) : (<p className="text-neutral-700 first-letter:uppercase">{props.chapter.name}</p>)}
<Pencil size={15} onClick={() => setSelectedChapter(props.chapter.id)} className="text-neutral-600 hover:cursor-pointer" />
</div>
</div>
<MoreVertical size={15} className="text-gray-300" />

42
apps/web/components/Dashboard/EditCourseStructure/EditCourseStructure.tsx → apps/web/components/DashboardPages/EditCourseStructure/EditCourseStructure.tsx
View file

@ -6,10 +6,13 @@ import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import useSWR, { mutate } from 'swr';
import ChapterElement from './DraggableElements/ChapterElement';
import PageLoading from '@components/Objects/Loaders/PageLoading';
import { updateCourseOrderStructure } from '@services/courses/chapters';
import { createChapter, updateCourseOrderStructure } from '@services/courses/chapters';
import { useRouter } from 'next/navigation';
import { CourseStructureContext } from 'app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page';
import { useCourse, useCourseDispatch } from '@components/Dashboard/CourseContext';
import { useCourse, useCourseDispatch } from '@components/DashboardPages/CourseContext';
import { Hexagon } from 'lucide-react';
import Modal from '@components/StyledElements/Modal/Modal';
import NewChapterModal from '@components/Objects/Modals/Chapters/NewChapter';
type EditCourseStructureProps = {
orgslug: string,
@ -41,7 +44,21 @@ const EditCourseStructure = (props: EditCourseStructureProps) => {
const course_structure = course ? course.courseStructure : {};
const course_uuid = course ? course.courseStructure.course_uuid : '';
// New Chapter creation
const [newChapterModal, setNewChapterModal] = useState(false);
const closeNewChapterModal = async () => {
setNewChapterModal(false);
};
// Submit new chapter
const submitChapter = async (chapter: any) => {
await createChapter(chapter);
mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`);
await revalidateTags(['courses'], props.orgslug);
router.refresh();
setNewChapterModal(false);
};
const updateStructure = (result: any) => {
const { destination, source, draggableId, type } = result;
@ -99,6 +116,27 @@ const EditCourseStructure = (props: EditCourseStructureProps) => {
</div>
)}
</Droppable>
{/* New Chapter Modal */}
<Modal
isDialogOpen={newChapterModal}
onOpenChange={setNewChapterModal}
minHeight="sm"
dialogContent={<NewChapterModal
course={course ? course.courseStructure : null}
closeModal={closeNewChapterModal}
submitChapter={submitChapter}
></NewChapterModal>}
dialogTitle="Create chapter"
dialogDescription="Add a new chapter to the course"
dialogTrigger={
<div className="mt-4 w-44 max-w-screen-2xl mx-auto bg-cyan-800 text-white rounded-xl shadow-sm px-6 items-center flex flex-row h-10">
<div className='mx-auto flex space-x-2 items-center hover:cursor-pointer'>
<Hexagon strokeWidth={3} size={16} className="text-white text-sm " />
<div className='font-bold text-sm'>Add Chapter</div></div>
</div>
}
/>
</DragDropContext>
: <></>}

2
apps/web/components/Dashboard/UI/BreadCrumbs.tsx → apps/web/components/DashboardPages/UI/BreadCrumbs.tsx
View file

@ -1,4 +1,4 @@
import { useCourse } from '@components/Dashboard/CourseContext'
import { useCourse } from '@components/DashboardPages/CourseContext'
import { Book, ChevronRight, User } from 'lucide-react'
import Link from 'next/link'
import React, { use, useEffect } from 'react'

2
apps/web/components/Dashboard/UI/CourseOverviewTop.tsx → apps/web/components/DashboardPages/UI/CourseOverviewTop.tsx
View file

@ -1,4 +1,4 @@
import { useCourse } from "@components/Dashboard/CourseContext";
import { useCourse } from "@components/DashboardPages/CourseContext";
import { useEffect } from "react";
import BreadCrumbs from "./BreadCrumbs";
import SaveState from "./SaveState";

5
apps/web/components/Dashboard/UI/LeftMenu.tsx → apps/web/components/DashboardPages/UI/LeftMenu.tsx
View file

@ -1,4 +1,5 @@
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
import { Book } from 'lucide-react'
import Link from 'next/link'
import React from 'react'
@ -10,7 +11,9 @@ function LeftMenu() {
className='flex flex-col w-20 justifiy-center bg-black h-screen justify-center text-white'>
<div className='flex items-center mx-auto'>
<Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash/courses`} ><Book size={18}/></Link>
<ToolTip content={"Courses"} slateBlack sideOffset={8} side='right' >
<Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash/courses`} ><Book size={18} /></Link>
</ToolTip>
</div>

18
apps/web/components/Dashboard/UI/SaveState.tsx → apps/web/components/DashboardPages/UI/SaveState.tsx
View file

@ -2,11 +2,12 @@
import { getAPIUrl } from '@services/config/config';
import { updateCourseOrderStructure } from '@services/courses/chapters';
import { revalidateTags } from '@services/utils/ts/requests';
import { useCourse, useCourseDispatch } from '@components/Dashboard/CourseContext'
import { useCourse, useCourseDispatch } from '@components/DashboardPages/CourseContext'
import { Check, SaveAllIcon, Timer } from 'lucide-react'
import { useRouter } from 'next/navigation';
import React, { useEffect } from 'react'
import { mutate } from 'swr';
import { updateCourse } from '@services/courses/courses';
function SaveState(props: { orgslug: string }) {
const course = useCourse() as any;
@ -16,10 +17,14 @@ function SaveState(props: { orgslug: string }) {
const course_structure = course.courseStructure;
const saveCourseState = async () => {
// Course structure & order
// Course order
if (saved) return;
await changeOrderBackend();
mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`);
// Course metadata
await changeMetadataBackend();
mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`);
await revalidateTags(['courses'], props.orgslug)
dispatchCourse({ type: 'setIsSaved' })
}
@ -34,6 +39,15 @@ function SaveState(props: { orgslug: string }) {
dispatchCourse({ type: 'setIsSaved' })
}
// Course metadata
const changeMetadataBackend = async () => {
mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`);
await updateCourse(course.courseStructure.course_uuid, course.courseStructure);
await revalidateTags(['courses'], props.orgslug)
router.refresh();
dispatchCourse({ type: 'setIsSaved' })
}
const handleCourseOrder = (course_structure: any) => {

4
apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx
View file

@ -14,7 +14,7 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
const [name, setName] = React.useState("");
const [description, setDescription] = React.useState("");
const [learnings, setLearnings] = React.useState("");
const [visibility, setVisibility] = React.useState("");
const [visibility, setVisibility] = React.useState(true);
const [tags, setTags] = React.useState("");
const [isLoading, setIsLoading] = React.useState(false);
const [thumbnail, setThumbnail] = React.useState(null) as any;
@ -45,7 +45,7 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
const handleVisibilityChange = (event: React.ChangeEvent<any>) => {
setVisibility(event.target.value);
console.log(event.target.value);
console.log(visibility);
}
const handleTagsChange = (event: React.ChangeEvent<any>) => {

2
apps/web/components/Objects/Other/CourseThumbnail.tsx
View file

@ -50,7 +50,7 @@ const AdminEditsArea = (props: { orgSlug: string, courseId: string, course: any,
ressourceType="course"
checkMethod='roles' orgId={props.course.org_id}>
<div className="flex space-x-1 absolute justify-center mx-auto z-20 bottom-14 left-1/2 transform -translate-x-1/2">
<Link href={getUriWithOrg(props.orgSlug, "/course/" + removeCoursePrefix(props.courseId) + "/edit")}>
<Link href={getUriWithOrg(props.orgSlug, "/dash/courses/course/" + removeCoursePrefix(props.courseId) + "/general")}>
<div
className=" hover:cursor-pointer p-1 px-4 bg-orange-600 rounded-xl items-center justify-center flex shadow-xl"
rel="noopener noreferrer">

3
apps/web/components/StyledElements/Tooltip/Tooltip.tsx
View file

@ -8,6 +8,7 @@ type TooltipProps = {
sideOffset?: number;
content: React.ReactNode;
children: React.ReactNode;
side?: 'top' | 'right' | 'bottom' | 'left'; // default is bottom
slateBlack?: boolean;
};
@ -20,7 +21,7 @@ const ToolTip = (props: TooltipProps) => {
{props.children}
</Tooltip.Trigger>
<Tooltip.Portal>
<TooltipContent slateBlack={props.slateBlack} side="bottom" sideOffset={props.sideOffset}>
<TooltipContent slateBlack={props.slateBlack} side={props.side ? props.side : 'bottom'} sideOffset={props.sideOffset}>
{props.content}
</TooltipContent>
</Tooltip.Portal>