mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
chore: refactor frontend components folder
This commit is contained in:
swve
parent
46f016f661
commit
5a746a946d
106 changed files with 159 additions and 164 deletions
205
apps/web/components/Dashboard/Menus/DashLeftMenu.tsx
Normal file
205
apps/web/components/Dashboard/Menus/DashLeftMenu.tsx
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
'use client'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import { signOut } from 'next-auth/react'
|
||||
import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
|
||||
import LearnHouseDashboardLogo from '@public/dashLogo.png'
|
||||
import { Backpack, BadgeDollarSign, BookCopy, Home, LogOut, Package2, School, Settings, Users, Vault } from 'lucide-react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import React, { useEffect } from 'react'
|
||||
import UserAvatar from '../../Objects/UserAvatar'
|
||||
import AdminAuthorization from '@components/Security/AdminAuthorization'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { getUriWithOrg, getUriWithoutOrg } from '@services/config/config'
|
||||
|
||||
function DashLeftMenu() {
|
||||
const org = useOrg() as any
|
||||
const session = useLHSession() as any
|
||||
const [loading, setLoading] = React.useState(true)
|
||||
|
||||
function waitForEverythingToLoad() {
|
||||
if (org && session) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
async function logOutUI() {
|
||||
const res = await signOut({ redirect: true, callbackUrl: getUriWithoutOrg('/login?orgslug=' + org.slug) })
|
||||
if (res) {
|
||||
getUriWithOrg(org.slug, '/')
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (waitForEverythingToLoad()) {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [loading])
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), radial-gradient(271.56% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 100%), rgb(20 19 19)',
|
||||
}}
|
||||
className="flex flex-col w-[90px] bg-black text-white shadow-xl h-screen sticky top-0"
|
||||
>
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex h-20 mt-6">
|
||||
<Link
|
||||
className="flex flex-col items-center mx-auto space-y-3"
|
||||
href={'/'}
|
||||
>
|
||||
<ToolTip
|
||||
content={'Back to Home'}
|
||||
slateBlack
|
||||
sideOffset={8}
|
||||
side="right"
|
||||
>
|
||||
<Image
|
||||
alt="Learnhouse logo"
|
||||
width={40}
|
||||
src={LearnHouseDashboardLogo}
|
||||
/>
|
||||
</ToolTip>
|
||||
<ToolTip
|
||||
content={'Your Organization'}
|
||||
slateBlack
|
||||
sideOffset={8}
|
||||
side="right"
|
||||
>
|
||||
<div className="py-1 px-3 bg-black/40 opacity-40 rounded-md text-[10px] justify-center text-center">
|
||||
{org?.name}
|
||||
</div>
|
||||
</ToolTip>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex grow flex-col justify-center space-y-5 items-center mx-auto">
|
||||
{/* <ToolTip content={"Back to " + org?.name + "'s Home"} slateBlack sideOffset={8} side='right' >
|
||||
<Link className='bg-white text-black hover:text-white rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/`} ><ArrowLeft className='hover:text-white' size={18} /></Link>
|
||||
</ToolTip> */}
|
||||
<AdminAuthorization authorizationMode="component">
|
||||
<ToolTip content={'Home'} slateBlack sideOffset={8} side="right">
|
||||
<Link
|
||||
className="bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear"
|
||||
href={`/dash`}
|
||||
>
|
||||
<Home size={18} />
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<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`}
|
||||
>
|
||||
<BookCopy size={18} />
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<ToolTip content={'Assignments'} slateBlack sideOffset={8} side="right">
|
||||
<Link
|
||||
className="bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear"
|
||||
href={`/dash/assignments`}
|
||||
>
|
||||
<Backpack size={18} />
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<ToolTip content={'Users'} slateBlack sideOffset={8} side="right">
|
||||
<Link
|
||||
className="bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear"
|
||||
href={`/dash/users/settings/users`}
|
||||
>
|
||||
<Users size={18} />
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<ToolTip content={'Payments'} slateBlack sideOffset={8} side="right">
|
||||
<Link
|
||||
className="bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear"
|
||||
href={`/dash/payments/customers`}
|
||||
>
|
||||
<BadgeDollarSign size={18} />
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<ToolTip
|
||||
content={'Organization'}
|
||||
slateBlack
|
||||
sideOffset={8}
|
||||
side="right"
|
||||
>
|
||||
<Link
|
||||
className="bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear"
|
||||
href={`/dash/org/settings/general`}
|
||||
>
|
||||
<School size={18} />
|
||||
</Link>
|
||||
</ToolTip>
|
||||
</AdminAuthorization>
|
||||
</div>
|
||||
<div className="flex flex-col mx-auto pb-7 space-y-2">
|
||||
<div className="flex items-center flex-col space-y-2">
|
||||
<ToolTip
|
||||
content={'@' + session.data.user.username}
|
||||
slateBlack
|
||||
sideOffset={8}
|
||||
side="right"
|
||||
>
|
||||
<div className="mx-auto">
|
||||
<UserAvatar border="border-4" width={35} />
|
||||
</div>
|
||||
</ToolTip>
|
||||
<div className="flex items-center flex-col space-y-3">
|
||||
<div className="flex flex-col space-y-1 py-1">
|
||||
<ToolTip
|
||||
content={session.data.user.username + "'s Owned Courses"}
|
||||
slateBlack
|
||||
sideOffset={8}
|
||||
side="right"
|
||||
>
|
||||
<Link
|
||||
href={'/dash/user-account/owned'}
|
||||
className="py-1"
|
||||
>
|
||||
<Package2
|
||||
className="mx-auto text-neutral-400 cursor-pointer"
|
||||
size={18}
|
||||
/>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<ToolTip
|
||||
content={session.data.user.username + "'s Settings"}
|
||||
slateBlack
|
||||
sideOffset={8}
|
||||
side="right"
|
||||
>
|
||||
<Link
|
||||
href={'/dash/user-account/settings/general'}
|
||||
className="py-1"
|
||||
>
|
||||
<Settings
|
||||
className="mx-auto text-neutral-400 cursor-pointer"
|
||||
size={18}
|
||||
/>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
</div>
|
||||
<ToolTip
|
||||
content={'Logout'}
|
||||
slateBlack
|
||||
sideOffset={8}
|
||||
side="right"
|
||||
>
|
||||
<LogOut
|
||||
onClick={() => logOutUI()}
|
||||
className="mx-auto text-neutral-400 cursor-pointer"
|
||||
size={14}
|
||||
/>
|
||||
</ToolTip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DashLeftMenu
|
||||
75
apps/web/components/Dashboard/Menus/DashMobileMenu.tsx
Normal file
75
apps/web/components/Dashboard/Menus/DashMobileMenu.tsx
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
'use client'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import { signOut } from 'next-auth/react'
|
||||
import { Backpack, BadgeDollarSign, BookCopy, Home, LogOut, School, Settings, Users } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
import AdminAuthorization from '@components/Security/AdminAuthorization'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { getUriWithOrg, getUriWithoutOrg } from '@services/config/config'
|
||||
import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
|
||||
|
||||
function DashMobileMenu() {
|
||||
const org = useOrg() as any
|
||||
const session = useLHSession() as any
|
||||
|
||||
async function logOutUI() {
|
||||
const res = await signOut({ redirect: true, callbackUrl: getUriWithoutOrg('/login?orgslug=' + org.slug) })
|
||||
if (res) {
|
||||
getUriWithOrg(org.slug, '/')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-black/90 backdrop-blur-lg text-white shadow-xl">
|
||||
<div className="flex justify-around items-center h-16 px-2">
|
||||
<AdminAuthorization authorizationMode="component">
|
||||
<ToolTip content={'Home'} slateBlack sideOffset={8} side="top">
|
||||
<Link href={`/`} className="flex flex-col items-center p-2">
|
||||
<Home size={20} />
|
||||
<span className="text-xs mt-1">Home</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<ToolTip content={'Courses'} slateBlack sideOffset={8} side="top">
|
||||
<Link href={`/dash/courses`} className="flex flex-col items-center p-2">
|
||||
<BookCopy size={20} />
|
||||
<span className="text-xs mt-1">Courses</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<ToolTip content={'Assignments'} slateBlack sideOffset={8} side="top">
|
||||
<Link href={`/dash/assignments`} className="flex flex-col items-center p-2">
|
||||
<Backpack size={20} />
|
||||
<span className="text-xs mt-1">Assignments</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<ToolTip content={'Payments'} slateBlack sideOffset={8} side="top">
|
||||
<Link href={`/dash/payments/customers`} className="flex flex-col items-center p-2">
|
||||
<BadgeDollarSign size={20} />
|
||||
<span className="text-xs mt-1">Payments</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<ToolTip content={'Users'} slateBlack sideOffset={8} side="top">
|
||||
<Link href={`/dash/users/settings/users`} className="flex flex-col items-center p-2">
|
||||
<Users size={20} />
|
||||
<span className="text-xs mt-1">Users</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<ToolTip content={'Organization'} slateBlack sideOffset={8} side="top">
|
||||
<Link href={`/dash/org/settings/general`} className="flex flex-col items-center p-2">
|
||||
<School size={20} />
|
||||
<span className="text-xs mt-1">Org</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
</AdminAuthorization>
|
||||
<ToolTip content={session.data.user.username + "'s Settings"} slateBlack sideOffset={8} side="top">
|
||||
<Link href={'/dash/user-account/settings/general'} className="flex flex-col items-center p-2">
|
||||
<Settings size={20} />
|
||||
<span className="text-xs mt-1">Settings</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DashMobileMenu
|
||||
Loading…
Add table
Add a link
Reference in a new issue