77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
|
"use client"
|
||
|
|
import React, { useEffect, useState } from "react"
|
||
|
|
import { cn } from "@/lib/utils"
|
||
|
|
import Image from "next/image"
|
||
|
|
import { Button } from "../ui/button"
|
||
|
|
import { useCurrentUser } from "@/hooks/auth"
|
||
|
|
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar"
|
||
|
|
import Link from "next/link"
|
||
|
|
import { usePathname, useSearchParams, useRouter } from "next/navigation"
|
||
|
|
import { useMainLayout } from "@/context/mainLayout"
|
||
|
|
|
||
|
|
function Topbar () {
|
||
|
|
const [isBlur, setIsBlur] = useState(false)
|
||
|
|
const { data: user } = useCurrentUser()
|
||
|
|
const router = useRouter()
|
||
|
|
const pathname = usePathname();
|
||
|
|
const searchParams = useSearchParams();
|
||
|
|
const { isSidebarExpanded } = useMainLayout();
|
||
|
|
|
||
|
|
const searchParamsString = searchParams.toString()
|
||
|
|
const redirectURL = `${pathname}${searchParamsString ? `?${searchParamsString}` : ''}`
|
||
|
|
|
||
|
|
const isImageCreatePage = ['/generate/image', '/generate/image-2-image', '/generate/image-edit', '/generate/image-2-background'].includes(pathname);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
function handleScroll (event: Event) {
|
||
|
|
const dom = event.target as HTMLElement
|
||
|
|
setIsBlur(dom.scrollTop > 0)
|
||
|
|
}
|
||
|
|
const dom = document.getElementById("main-content")
|
||
|
|
if (dom) {
|
||
|
|
dom.addEventListener("scroll", handleScroll, { passive: true })
|
||
|
|
}
|
||
|
|
return () => {
|
||
|
|
if (dom) {
|
||
|
|
dom.removeEventListener("scroll", handleScroll)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (user && user.cpUserInfo) {
|
||
|
|
router.push("/login/fields?redirect=" + encodeURIComponent(redirectURL))
|
||
|
|
}
|
||
|
|
}, [user])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<header className={cn("fixed top-0 left-20 right-0 z-40 flex h-16 items-center justify-between px-8 transition-all", {
|
||
|
|
"backdrop-blur-[10px]": isBlur,
|
||
|
|
"left-80": isSidebarExpanded,
|
||
|
|
"left-0": isImageCreatePage,
|
||
|
|
})}>
|
||
|
|
{isBlur && <div className="absolute inset-0 bg-background-default opacity-85" />}
|
||
|
|
<div className="relative inset-0 flex items-center justify-between w-full">
|
||
|
|
<div className="w-[103.6px] h-8">
|
||
|
|
<Link href="/">
|
||
|
|
<Image src="/logo.svg" alt="logo" width={103.6} height={32} />
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
{user ? (
|
||
|
|
<Link href="/profile">
|
||
|
|
<Avatar className="cursor-pointer size-8">
|
||
|
|
<AvatarImage className="object-cover" src={user.headImage} alt={user.nickname} width={32} height={32} />
|
||
|
|
<AvatarFallback>{user.nickname?.slice(0, 1)}</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
</Link>
|
||
|
|
) : (
|
||
|
|
<Link href={`/login?redirect=${encodeURIComponent(redirectURL)}`}>
|
||
|
|
<Button size="small">Login in or Sign up</Button>
|
||
|
|
</Link>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Topbar
|