67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import AccountSidebar from '@/components/AccountSidebar'
|
|
import Loader from '@/components/ui/Loader'
|
|
import { RiUser3Line } from 'react-icons/ri'
|
|
import { FaRoute } from 'react-icons/fa'
|
|
import { GoPackageDependents, GoPackageDependencies } from 'react-icons/go'
|
|
import { MdOutlinePayments } from 'react-icons/md'
|
|
import { CgNotes } from 'react-icons/cg'
|
|
import useUserStore from '@/app/store/userStore'
|
|
|
|
export default function AccountLayout({ children }: { children: React.ReactNode }) {
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const router = useRouter()
|
|
const { isAuthenticated, user } = useUserStore()
|
|
|
|
useEffect(() => {
|
|
if (!isAuthenticated || !user) {
|
|
router.replace('/login')
|
|
return
|
|
}
|
|
|
|
const timer = setTimeout(() => {
|
|
setIsLoading(false)
|
|
}, 300)
|
|
|
|
return () => clearTimeout(timer)
|
|
}, [isAuthenticated, user, router])
|
|
|
|
if (!isAuthenticated || !user || isLoading) {
|
|
return <Loader />
|
|
}
|
|
|
|
const userNavigation = [
|
|
{ name: 'Профиль', href: '/account', icon: RiUser3Line },
|
|
{ name: 'Мои маршруты', href: '/account/routes', icon: FaRoute },
|
|
{
|
|
name: 'Отправить посылку',
|
|
href: '/account/create-as-sender',
|
|
icon: GoPackageDependents,
|
|
},
|
|
{
|
|
name: 'Перевезти посылку',
|
|
href: '/account/create-as-deliveler',
|
|
icon: GoPackageDependencies,
|
|
},
|
|
{ name: 'Тарифы', href: '/account/payments', icon: MdOutlinePayments },
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-full">
|
|
<div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
|
|
<div className="flex flex-col gap-6 md:flex-row">
|
|
<div className="w-full flex-shrink-0 md:w-64">
|
|
<div className="sticky top-8">
|
|
<AccountSidebar user={user} navigation={userNavigation} />
|
|
</div>
|
|
</div>
|
|
<main className="min-w-0 flex-1">{children}</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|