Spaces:
Running
Running
File size: 4,788 Bytes
df83860 f27679f df83860 139ef57 f27679f df83860 f27679f df83860 f27679f f8ca042 f27679f df83860 f27679f 2ed75c8 f27679f 8f2b05f f27679f 8f2b05f f27679f 2ed75c8 f27679f 8f2b05f f27679f 8f2b05f f27679f 8f2b05f f27679f f8ca042 f27679f 139ef57 f27679f d160b97 f27679f 761239a f27679f 29f166e f27679f 2ed75c8 f27679f df83860 f27679f df83860 f27679f df83860 f27679f df83860 f27679f df83860 f27679f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 |
import { useEffect, useTransition } from 'react'
import { Pathway_Gothic_One } from 'next/font/google'
import { PiPopcornBold } from "react-icons/pi"
const pathway = Pathway_Gothic_One({
weight: "400",
style: "normal",
subsets: ["latin"],
display: "swap"
})
import { useStore } from "@/app/state/useStore"
import { cn } from "@/lib/utils"
import { getTags } from '@/app/server/actions/ai-tube-hf/getTags'
import Link from 'next/link'
export function TopHeader() {
const [_pending, startTransition] = useTransition()
const view = useStore(s => s.view)
const setView = useStore(s => s.setView)
const displayMode = useStore(s => s.displayMode)
const setDisplayMode = useStore(s => s.setDisplayMode)
const headerMode = useStore(s => s.headerMode)
const setHeaderMode = useStore(s => s.setHeaderMode)
const setMenuMode = useStore(s => s.setMenuMode)
const currentTag = useStore(s => s.currentTag)
const setCurrentTag = useStore(s => s.setCurrentTag)
const currentTags = useStore(s => s.currentTags)
const setCurrentTags = useStore(s => s.setCurrentTags)
const isNormalSize = headerMode === "normal"
useEffect(() => {
if (view === "public_video" || view === "public_channel" || view === "public_music_videos") {
setHeaderMode("compact")
setMenuMode("slider_hidden")
} else {
setHeaderMode("normal")
setMenuMode("normal_icon")
}
}, [view])
useEffect(() => {
startTransition(async () => {
const tags = await getTags()
setCurrentTags(tags)
})
}, [])
return (
<div className={cn(
`flex flex-col`,
`overflow-hidden`,
`transition-all duration-200 ease-in-out`,
`w-full`,
)}>
<div className={cn(
`flex flex-row justify-between`,
`w-full`
)}>
<div className={cn(
`flex flex-col items-start justify-center`,
`w-full sm:w-64`,
)}>
<div className={cn(
`flex flex-row items-center justify-start`,
`transition-all duration-200 ease-in-out`,
// `cursor-pointer`,
"pt-2 text-3xl space-x-1",
view === "public_music_videos" ? "pl-1" : "",
pathway.className,
isNormalSize
? "sm:scale-125 sm:ml-4 sm:mb-4" : "sm:scale-100 sm:mb-2"
)}
/*
onClick={() => {
setView(view === "public_music_videos" ? "public_music_videos" : "home")
}}
*/
>
<div className="mr-1">
<div className={cn(
`flex flex-col items-center justify-center`,
`bg-yellow-300 text-neutral-950`,
`rounded-lg w-6 h-7`
)}>
<PiPopcornBold className={cn(
`size-5`
)} />
</div>
</div>
<Link href="/">
<div className="font-semibold">
{view === "public_music_videos" ? "AiTube Music" : "AiTube"}
</div>
</Link>
</div>
</div>
<div className={cn(
// TODO: show the disclaimer on mobile too, maybe with a modal or something
`hidden sm:flex`,
`flex-col`,
`items-center justify-center`,
`transition-all duration-200 ease-in-out`,
`px-4 py-2 w-max-64`,
`text-neutral-400 text-2xs sm:text-xs lg:text-sm italic`
)}>
All the videos are generated using AI, for research purposes only. Some models might produce factually incorrect or biased outputs.
</div>
<div className={cn()}>
{/* more buttons? unused for now */}
</div>
</div>
{
isNormalSize && view !== "public_music_videos" ?
<div className={cn(
`hidden sm:flex flex-row space-x-3`,
`text-[13px] font-semibold`,
`mb-4`
)}>
{currentTags.slice(0, 9).map(tag => (
<div
key={tag}
className={cn(
`flex flex-col items-center justify-center`,
`rounded-lg px-3 py-1 h-8`,
`cursor-pointer`,
`transition-all duration-200 ease-in-out`,
currentTag === tag
? `bg-neutral-100 text-neutral-800`
: `bg-neutral-800 text-neutral-50/90 hover:bg-neutral-700 hover:text-neutral-50/90`,
// `text-clip`
)}
onClick={() => {
setCurrentTag(currentTag === tag ? undefined : tag)
}}
>
<span className={cn(
`text-center`,
`capitalize`,
)}>{tag}</span>
</div>
))}
</div> : null}
</div>
)
}
|