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: refactor + home improvements

Browse source
This commit is contained in:
swve 2023-09-21 17:55:28 +02:00
parent 832394777e
commit ebb8c64fd7
8 changed files with 187 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

35
front/app/orgs/[orgslug]/(withmenu)/collections/page.tsx
View file

@ -1,15 +1,15 @@
import AuthenticatedClientElement from "@components/Security/AuthenticatedClientElement";
import TypeOfContentTitle from "@components/StyledElements/Titles/TypeOfContentTitle";
import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper";
import { getBackendUrl, getUriWithOrg } from "@services/config/config";
import { deleteCollection, getOrgCollectionsWithAuthHeader } from "@services/courses/collections";
import { getUriWithOrg } from "@services/config/config";
import { getOrgCollectionsWithAuthHeader } from "@services/courses/collections";
import { getOrganizationContextInfo } from "@services/organizations/orgs";
import { Metadata } from "next";
import { cookies } from "next/headers";
import Link from "next/link";
import { getCourseThumbnailMediaDirectory } from "@services/media/media";
import { getAccessTokenFromRefreshTokenCookie, getNewAccessTokenUsingRefreshTokenServer } from "@services/auth/auth";
import { getAccessTokenFromRefreshTokenCookie } from "@services/auth/auth";
import CollectionThumbnail from "@components/Objects/Other/CollectionThumbnail";
import NewCollectionButton from "@components/StyledElements/Buttons/NewCollectionButton";
type MetadataProps = {
params: { orgslug: string, courseid: string };
@ -19,7 +19,6 @@ type MetadataProps = {
export async function generateMetadata(
{ params }: MetadataProps,
): Promise<Metadata> {
const cookieStore = cookies();
// Get Org context information
const org = await getOrganizationContextInfo(params.orgslug, { revalidate: 1800, tags: ['organizations'] });
@ -45,7 +44,6 @@ export async function generateMetadata(
};
}
const CollectionsPage = async (params: any) => {
const cookieStore = cookies();
const access_token = await getAccessTokenFromRefreshTokenCookie(cookieStore)
@ -60,16 +58,37 @@ const CollectionsPage = async (params: any) => {
<TypeOfContentTitle title="Collections" type="col" />
<AuthenticatedClientElement checkMethod='roles' orgId={org_id}>
<Link className="flex justify-center" href={getUriWithOrg(orgslug, "/collections/new")}>
<button className="rounded-md bg-black antialiased ring-offset-purple-800 p-2 px-5 my-auto font text-sm font-bold text-white drop-shadow-lg">Add Collection + </button>
<NewCollectionButton />
</Link>
</AuthenticatedClientElement>
</div>
<div className="home_collections flex flex-wrap">
{collections.map((collection: any) => (
<div className="flex flex-col py-3 px-3" key={collection.collection_id}>
<div className="flex flex-col py-1 px-3" key={collection.collection_id}>
<CollectionThumbnail collection={collection} orgslug={orgslug} org_id={org_id} />
</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'>
<svg width="120" height="120" viewBox="0 0 295 295" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.51" x="10" y="10" width="275" height="275" rx="75" stroke="#4B5564" stroke-opacity="0.15" stroke-width="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" fill-opacity="0.08" />
</svg>
</div>
<div className="space-y-0">
<h1 className="text-3xl font-bold text-gray-600">No collections yet</h1>
<p className="text-lg text-gray-400">Create a collection to group courses together</p>
</div>
<AuthenticatedClientElement checkMethod='roles' orgId={org_id}>
<Link href={getUriWithOrg(orgslug, "/collections/new")}>
<NewCollectionButton />
</Link>
</AuthenticatedClientElement>
</div>
</div>
}
</div>
</GeneralWrapperStyled>
);

100
front/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx
View file

@ -1,23 +1,13 @@
'use client';
import CreateCourseModal from '@components/Objects/Modals/Course/Create/CreateCourse';
import Modal from '@components/StyledElements/Modal/Modal';
import { getBackendUrl, getUriWithOrg } from '@services/config/config';
import CoursesLogo from "public/svg/courses.svg";
import CollectionsLogo from "public/svg/collections.svg";
import { deleteCourseFromBackend } from '@services/courses/courses';
import Link from 'next/link';
import React from 'react'
import Image from 'next/image';
import { AuthContext } from '@components/Security/AuthProvider';
import { revalidateTags } from '@services/utils/ts/requests';
import { useRouter } from 'next/navigation';
import { useSearchParams } from 'next/navigation';
import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper';
import TypeOfContentTitle from '@components/StyledElements/Titles/TypeOfContentTitle';
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement';
import { getCourseThumbnailMediaDirectory } from '@services/media/media';
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal';
import { Pencil, X } from 'lucide-react';
import CourseThumbnail from '@components/Objects/Other/CourseThumbnail';
import NewCourseButton from '@components/StyledElements/Buttons/NewCourseButton';
interface CourseProps {
orgslug: string;
@ -25,23 +15,12 @@ interface CourseProps {
org_id: string;
}
// function to remove "course_" from the course_id
function removeCoursePrefix(course_id: string) {
return course_id.replace("course_", "");
}
function Courses(props: CourseProps) {
const orgslug = props.orgslug;
const courses = props.courses;
const [newCourseModal, setNewCourseModal] = React.useState(false);
const router = useRouter();
async function deleteCourses(course_id: any) {
await deleteCourseFromBackend(course_id);
await revalidateTags(['courses'], orgslug);
router.refresh();
}
const searchParams = useSearchParams();
const isCreatingCourse = searchParams.get('new') ? true : false;
const [newCourseModal, setNewCourseModal] = React.useState(isCreatingCourse);
async function closeNewCourseModal() {
setNewCourseModal(false);
@ -65,8 +44,10 @@ function Courses(props: CourseProps) {
dialogTitle="Create Course"
dialogDescription="Create a new course"
dialogTrigger={
<button className="rounded-md bg-black antialiased ring-offset-purple-800 p-2 px-5 my-auto font text-sm font-bold text-white drop-shadow-lg">Add Course + </button>
}
<button>
<NewCourseButton />
</button>}
/>
</AuthenticatedClientElement>
</div>
@ -79,39 +60,48 @@ function Courses(props: CourseProps) {
<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'>
<svg width="120" height="120" viewBox="0 0 295 295" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.51" x="10" y="10" width="275" height="275" rx="75" stroke="#4B5564" stroke-opacity="0.15" stroke-width="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" fill-opacity="0.08" />
</svg>
</div>
<div className="space-y-0">
<h1 className="text-3xl font-bold text-gray-600">No courses yet</h1>
<p className="text-lg text-gray-400">Create a course to add content</p>
</div>
<AuthenticatedClientElement checkMethod='roles' orgId={props.org_id}>
<Modal
isDialogOpen={newCourseModal}
onOpenChange={setNewCourseModal}
minHeight="md"
dialogContent={<CreateCourseModal
closeModal={closeNewCourseModal}
orgslug={orgslug}
></CreateCourseModal>}
dialogTitle="Create Course"
dialogDescription="Create a new course"
dialogTrigger={
<button>
<NewCourseButton />
</button>}
/>
</AuthenticatedClientElement>
</div>
</div>
}
</div>
</GeneralWrapperStyled>
</div>
)
}
const AdminEditsArea = (props: { orgSlug: string, courseId: string, course: any, deleteCourses: any }) => {
return (
<AuthenticatedClientElement checkMethod='roles' orgId={props.course.org_id}><div className="flex space-x-1 relative top-8 z-20 left-2">
<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-red-600 rounded-md"
rel="noopener noreferrer">
<X size={15} className="text-rose-200 font-bold" />
</div>}
functionToExecute={() => props.deleteCourses(props.courseId)}
status='warning'
></ConfirmationModal>
<Link href={getUriWithOrg(props.orgSlug, "/course/" + removeCoursePrefix(props.courseId) + "/edit")}>
<div
className=" hover:cursor-pointer p-1 px-4 bg-orange-600 rounded-md"
rel="noopener noreferrer">
<Pencil size={15} className="text-orange-200 font-bold" />
</div>
</Link>
</div>
</AuthenticatedClientElement>
)
}
export default Courses

87
front/app/orgs/[orgslug]/(withmenu)/page.tsx
View file

@ -1,20 +1,20 @@
export const dynamic = 'force-dynamic';
import { Metadata, ResolvingMetadata } from 'next';
import { getBackendUrl, getUriWithOrg } from "@services/config/config";
import { getCourse, getOrgCourses, getOrgCoursesWithAuthHeader } from "@services/courses/courses";
import { Metadata } from 'next';
import { getUriWithOrg } from "@services/config/config";
import { getOrgCoursesWithAuthHeader } from "@services/courses/courses";
import Link from "next/link";
import Image from "next/image";
import { getOrgCollections, getOrgCollectionsWithAuthHeader } from "@services/courses/collections";
import { getOrgCollectionsWithAuthHeader } from "@services/courses/collections";
import { getOrganizationContextInfo } from '@services/organizations/orgs';
import { cookies } from 'next/headers';
import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper';
import TypeOfContentTitle from '@components/StyledElements/Titles/TypeOfContentTitle';
import { getCourseThumbnailMediaDirectory } from '@services/media/media';
import { getAccessTokenFromRefreshTokenCookie, getNewAccessTokenUsingRefreshTokenServer } from '@services/auth/auth';
import { getAccessTokenFromRefreshTokenCookie } from '@services/auth/auth';
import CourseThumbnail from '@components/Objects/Other/CourseThumbnail';
import CollectionThumbnail from '@components/Objects/Other/CollectionThumbnail';
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement';
import { Plus, PlusCircle } from 'lucide-react';
import NewCourseButton from '@components/StyledElements/Buttons/NewCourseButton';
import NewCollectionButton from '@components/StyledElements/Buttons/NewCollectionButton';
type MetadataProps = {
params: { orgslug: string };
@ -56,40 +56,85 @@ const OrgHomePage = async (params: any) => {
const access_token = await getAccessTokenFromRefreshTokenCookie(cookieStore)
const courses = await getOrgCoursesWithAuthHeader(orgslug, { revalidate: 0, tags: ['courses'] }, access_token ? access_token : null);
const org = await getOrganizationContextInfo(orgslug, { revalidate: 1800, tags: ['organizations'] });
const org_id = org.org_id;
const collections = await getOrgCollectionsWithAuthHeader(org.org_id, access_token ? access_token : null, { revalidate: 0, tags: ['courses'] });
// function to remove "course_" from the course_id
function removeCoursePrefix(course_id: string) {
return course_id.replace("course_", "");
}
function removeCollectionPrefix(collection_id: string) {
return collection_id.replace("collection_", "");
}
return (
<div>
<GeneralWrapperStyled>
{/* Collections */}
<TypeOfContentTitle title="Collections" type="col" />
<div className='flex items-center '>
<div className='flex grow'>
<TypeOfContentTitle title="Collections" type="col" />
</div>
<AuthenticatedClientElement checkMethod='roles' orgId={org_id}>
<Link href={getUriWithOrg(orgslug, "/collections/new")}>
<NewCollectionButton />
</Link>
</AuthenticatedClientElement>
</div>
<div className="home_collections flex flex-wrap">
{collections.map((collection: any) => (
<div className="flex flex-col py-3 px-3" key={collection.collection_id}>
<CollectionThumbnail collection={collection} orgslug={orgslug} org_id={org.org_id} />
</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'>
<svg width="50" height="50" viewBox="0 0 295 295" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.51" x="10" y="10" width="275" height="275" rx="75" stroke="#4B5564" stroke-opacity="0.15" stroke-width="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" fill-opacity="0.08" />
</svg>
</div>
<div className="space-y-0">
<h1 className="text-xl font-bold text-gray-600">No collections yet</h1>
<p className="text-md text-gray-400">Create a collection to group courses together</p>
</div>
</div>
</div>
</div>
}
</div>
{/* Courses */}
<div className='h-5'></div>
<TypeOfContentTitle title="Courses" type="cou" />
<div className='flex items-center '>
<div className='flex grow'>
<TypeOfContentTitle title="Courses" type="cou" />
</div>
<AuthenticatedClientElement checkMethod='roles' orgId={org_id}>
<Link href={getUriWithOrg(orgslug, "/courses?new=true")}>
<NewCourseButton />
</Link>
</AuthenticatedClientElement>
</div>
<div className="home_courses flex flex-wrap">
{courses.map((course: any) => (
<div className="py-3 px-3" key={course.course_id}>
<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'>
<svg width="50" height="50" viewBox="0 0 295 295" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.51" x="10" y="10" width="275" height="275" rx="75" stroke="#4B5564" stroke-opacity="0.15" stroke-width="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" fill-opacity="0.08" />
</svg>
</div>
<div className="space-y-0">
<h1 className="text-xl font-bold text-gray-600">No courses yet</h1>
<p className="text-md text-gray-400">Create a course to add content</p>
</div>
</div>
</div>
</div>
}
</div>
</GeneralWrapperStyled>
</div>

6
front/components/Objects/Modals/Course/Create/CreateCourse.tsx
View file

@ -1,12 +1,10 @@
import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, Input, Textarea } from '@components/StyledElements/Form/Form'
import * as Form from '@radix-ui/react-form'
import { getAPIUrl, getUriWithOrg } from '@services/config/config';
import { FormMessage } from "@radix-ui/react-form";
import { createNewCourse } from '@services/courses/courses';
import { getOrganizationContextInfo, getOrganizationContextInfoWithoutCredentials } from '@services/organizations/orgs';
import { getOrganizationContextInfoWithoutCredentials } from '@services/organizations/orgs';
import React, { useState } from 'react'
import { BarLoader } from 'react-spinners'
import { mutate } from 'swr';
import { revalidateTags } from '@services/utils/ts/requests';
import { useRouter } from 'next/navigation';
@ -96,7 +94,7 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
</FormField>
<FormField name="course-learnings">
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
<FormLabel>Course Learnings</FormLabel>
<FormLabel>Course keywords</FormLabel>
<FormMessage match="valueMissing">Please provide learning elements, separated by comma (,)</FormMessage>
</Flex>
<Form.Control asChild>

38
front/components/Objects/Other/CollectionThumbnail.tsx
View file

@ -22,23 +22,23 @@ const removeCollectionPrefix = (collectionid: string) => {
function CollectionThumbnail(props: PropsType) {
return (
<div className='relative'>
<CollectionAdminEditsArea orgslug={props.orgslug} org_id={props.org_id} collection_id={props.collection.collection_id} collection={props.collection} />
<Link href={getUriWithOrg(props.orgslug, "/collection/" + removeCollectionPrefix(props.collection.collection_id))}>
<div className="space-y-2 inset-0 ring-1 ring-inset my-auto ring-black/10 rounded-xl shadow-xl relative w-[249px] h-[180px] bg-cover flex flex-col items-center justify-center bg-indigo-600 font-bold text-zinc-50" >
<div className="flex -space-x-5">
{props.collection.courses.slice(0, 3).map((course: any) => (
<Link key={course.course_id} href={getUriWithOrg(props.orgslug, "/course/" + course.course_id.substring(7))}>
<div className="inset-0 rounded-xl shadow-xl bg-cover w-24 h-12 justify-center ring-indigo-800 ring-4" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(props.collection.org_id, course.course_id, course.thumbnail)})` }}>
<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_id))}>
<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(props.collection.org_id, course.course_id, course.thumbnail)})` }}>
</div>
</Link>
))}
</div>
<h1 className="font-bold text-lg justify-center">{props.collection.name}</h1>
</>
))}
</div>
</Link>
<Link href={getUriWithOrg(props.orgslug, "/collection/" + removeCollectionPrefix(props.collection.collection_id))}>
<h1 className="font-bold text-md justify-center">{props.collection.name}</h1>
</Link>
<CollectionAdminEditsArea orgslug={props.orgslug} org_id={props.org_id} collection_id={props.collection.collection_id} collection={props.collection} />
</div>
</div>
)
}
@ -51,24 +51,20 @@ const CollectionAdminEditsArea = (props: any) => {
await revalidateTags(["collections"], props.orgslug);
// reload the page
router.refresh();
router.push(getUriWithOrg(props.orgslug, "/collections"));
// refresh page (FIX for Next.js BUG)
//window.location.reload();
}
return (
<AuthenticatedClientElement orgId={props.org_id} checkMethod='roles'>
<div className="flex space-x-1 absolute justify-center mx-auto z-20 bottom-4 left-1/2 transform -translate-x-1/2">
<div className="flex space-x-1 justify-center mx-auto z-20 ">
<ConfirmationModal
confirmationMessage="Are you sure you want to delete this collection?"
confirmationButtonText="Delete Collection"
dialogTitle={"Delete " + props.collection.name + " ?"}
dialogTrigger={
<div
className="hover:cursor-pointer p-1 px-4 bg-red-600 rounded-xl items-center justify-center flex shadow-lg"
className="hover:cursor-pointer p-1 px-2 bg-red-600 rounded-xl items-center justify-center flex shadow-xl"
rel="noopener noreferrer">
<X size={15} className="text-rose-200 font-bold" />
<X size={10} className="text-rose-200 font-bold" />
</div>}
functionToExecute={() => deleteCollectionUI(props.collection_id)}
status='warning'

11
front/components/Objects/Other/CourseThumbnail.tsx
View file

@ -5,7 +5,7 @@ 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 { FileEdit, Pencil, X } from 'lucide-react';
import { FileEdit, X } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import React from 'react'
@ -34,8 +34,8 @@ function CourseThumbnail(props: PropsType) {
<div className='relative'>
<AdminEditsArea course={props.course} orgSlug={props.orgslug} courseId={props.course.course_id} deleteCourses={deleteCourses} />
<Link href={getUriWithOrg(props.orgslug, "/course/" + removeCoursePrefix(props.course.course_id))}>
<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(props.course.org_id, props.course.course_id, props.course.thumbnail)})` }}>
<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(props.course.org_id, props.course.course_id, props.course.thumbnail)})` }}>
</div>
</Link>
<h2 className="font-bold text-lg w-[250px] py-2">{props.course.name}</h2>
@ -49,7 +49,7 @@ const AdminEditsArea = (props: { orgSlug: string, courseId: string, course: any,
<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")}>
<div
className=" hover:cursor-pointer p-1 px-4 bg-orange-600 rounded-xl items-center justify-center flex shadow-lg"
className=" hover:cursor-pointer p-1 px-4 bg-orange-600 rounded-xl items-center justify-center flex shadow-xl"
rel="noopener noreferrer">
<FileEdit size={14} className="text-orange-200 font-bold" />
</div>
@ -60,14 +60,13 @@ const AdminEditsArea = (props: { orgSlug: string, courseId: string, course: any,
dialogTitle={'Delete ' + props.course.name + ' ?'}
dialogTrigger={
<div
className=" hover:cursor-pointer p-1 px-4 bg-red-600 rounded-xl items-center justify-center flex shadow-lg"
className=" hover:cursor-pointer p-1 px-4 bg-red-600 rounded-xl items-center justify-center flex shadow-xl"
rel="noopener noreferrer">
<X size={14} className="text-rose-200 font-bold" />
</div>}
functionToExecute={() => props.deleteCourses(props.courseId)}
status='warning'
></ConfirmationModal>
</div>
</AuthenticatedClientElement>
)

13
front/components/StyledElements/Buttons/NewCollectionButton.tsx Normal file
View file

@ -0,0 +1,13 @@
"use client";
function NewCollectionButton() {
return (
<button className="rounded-lg bg-black hover:scale-105 transition-all duration-100 ease-linear antialiased ring-offset-purple-800 p-2 px-5 my-auto font text-xs font-bold text-white drop-shadow-lg flex space-x-2 items-center">
<div>New Collection </div>
<div className='text-md bg-neutral-800 px-1 rounded-full'>+</div>
</button>
)
}
export default NewCollectionButton

12
front/components/StyledElements/Buttons/NewCourseButton.tsx Normal file
View file

@ -0,0 +1,12 @@
"use client";
function NewCourseButton() {
return (
<button className="rounded-lg bg-black hover:scale-105 transition-all duration-100 ease-linear antialiased ring-offset-purple-800 p-2 px-5 my-auto font text-xs font-bold text-white drop-shadow-lg flex space-x-2 items-center">
<div>New Course </div>
<div className='text-md bg-neutral-800 px-1 rounded-full'>+</div>
</button>
)
}
export default NewCourseButton