Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 4,369 Bytes
df83860 f27679f df83860 f27679f df83860 f27679f df83860 f27679f df83860 f27679f 93f8352 f27679f d160b97 f27679f 761239a 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 |
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'
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") {
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-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",
pathway.className,
isNormalSize
? "scale-125 ml-4 mb-4" : "scale-100 mb-2"
)}
onClick={() => {
setView("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(
`w-5 h-5`
)} />
</div>
</div>
<div className="font-semibold">
AiTube
</div>
</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 ?
<div className={cn(
`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>
)
}
|