88 lines
2.3 KiB
JavaScript
88 lines
2.3 KiB
JavaScript
import Link from 'next/link'
|
|
|
|
import { Icons, BoxLink, Logout, Orders, Person } from 'components'
|
|
|
|
import { useUserInfo } from 'hooks'
|
|
|
|
function ProfileAside() {
|
|
const { userInfo, isLoading } = useUserInfo()
|
|
|
|
const profilePaths = [
|
|
{
|
|
name: '我的订单',
|
|
Icon: Icons.Bag,
|
|
path: '/profile/orders',
|
|
},
|
|
{
|
|
name: '我的收藏',
|
|
Icon: Icons.Heart,
|
|
path: '/profile/lists',
|
|
},
|
|
{
|
|
name: '我的评价',
|
|
Icon: Icons.Comment,
|
|
path: '/profile/reviews',
|
|
},
|
|
{
|
|
name: '地址管理',
|
|
Icon: Icons.Location,
|
|
path: '/profile/addresses',
|
|
},
|
|
{
|
|
name: '最近访问',
|
|
Icon: Icons.Clock,
|
|
path: '/profile/user-history',
|
|
},
|
|
{
|
|
name: '账户信息',
|
|
Icon: Icons.User,
|
|
path: '/profile/personal-info',
|
|
},
|
|
]
|
|
|
|
//? Render(s)
|
|
return (
|
|
<aside className="sticky mt-6 lg:border lg:border-gray-200 lg:rounded-md lg:pt-4 lg:top-6 xl:top-[136px]">
|
|
<div className="flex items-center justify-between px-5 py-2 ">
|
|
<Person className="w-12 h-12 mr-3" />
|
|
<div className="flex flex-col ml-auto mr-3 gap-y-1">
|
|
{isLoading ? (
|
|
<>
|
|
<div className="w-32 h-5 bg-red-200 rounded-md animate-pulse lg:w-28 lg:h-6" />
|
|
<div className="w-24 h-5 bg-red-200 rounded-md animate-pulse lg:w-20 lg:h-6" />
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="text-sm font-medium lg:text-base">{userInfo?.name}</span>
|
|
<span className="text-[11px] text-gray-400">{userInfo?.mobile}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
<Link href="/profile/personal-info">
|
|
<Icons.Edit className="w-6 h-6 text-blue-400" />
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="lg:hidden">
|
|
<Orders />
|
|
</div>
|
|
|
|
<div className="mt-7">
|
|
<div className="hidden lg:block">
|
|
<BoxLink name="看板" path="/profile">
|
|
<Icons.Home className="text-black icon" />
|
|
</BoxLink>
|
|
</div>
|
|
{profilePaths.map((item, index) => (
|
|
<BoxLink key={index} path={item.path} name={item.name}>
|
|
<item.Icon className="icon text-black" />
|
|
</BoxLink>
|
|
))}
|
|
<Logout />
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|
|
|
|
export default ProfileAside
|