|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import {Icon} from "@iconify/react/dist/offline"; |
| 4 | +import arrowRightIcon from "@iconify/icons-solar/arrow-right-linear"; |
| 5 | +import {usePathname} from "next/navigation"; |
| 6 | +import {useEffect} from "react"; |
| 7 | +import {usePostHog} from "posthog-js/react"; |
| 8 | + |
| 9 | +import emitter from "@/libs/emitter"; |
| 10 | + |
| 11 | +const hideOnPaths = ["examples"]; |
| 12 | + |
| 13 | +export const HeroUIChatBanner = () => { |
| 14 | + const posthog = usePostHog(); |
| 15 | + |
| 16 | + const handleClick = () => { |
| 17 | + posthog.capture("HeroUI Chat Banner", { |
| 18 | + action: "click", |
| 19 | + category: "landing-page", |
| 20 | + }); |
| 21 | + }; |
| 22 | + |
| 23 | + const pathname = usePathname(); |
| 24 | + const shouldBeVisible = !hideOnPaths.some((path) => pathname.includes(path)); |
| 25 | + |
| 26 | + useEffect(() => { |
| 27 | + if (!shouldBeVisible) return; |
| 28 | + |
| 29 | + // listen to scroll event, dispatch an event when scroll is at the top < 48 px |
| 30 | + const handleScroll = () => { |
| 31 | + if (window.scrollY < 48) { |
| 32 | + emitter.emit("proBannerVisibilityChange", "visible"); |
| 33 | + } else { |
| 34 | + emitter.emit("proBannerVisibilityChange", "hidden"); |
| 35 | + } |
| 36 | + }; |
| 37 | + |
| 38 | + window.addEventListener("scroll", handleScroll); |
| 39 | + |
| 40 | + return () => { |
| 41 | + window.removeEventListener("scroll", handleScroll); |
| 42 | + }; |
| 43 | + }, [shouldBeVisible]); |
| 44 | + |
| 45 | + if (!shouldBeVisible) return null; |
| 46 | + |
| 47 | + return ( |
| 48 | + <div className="relative z-50 isolate flex items-center gap-x-6 overflow-hidden bg-background border-b-1 border-divider px-6 py-2 sm:px-3.5 sm:before:flex-1"> |
| 49 | + <div className="flex w-full items-center justify-between md:justify-center gap-x-3"> |
| 50 | + <a |
| 51 | + className="text-small flex items-end sm:text-[0.93rem] text-foreground hover:opacity-80 transition-opacity" |
| 52 | + href="https://heroui.pro?utm_source=heroui.com&utm_medium=top-banner" |
| 53 | + rel="noopener noreferrer" |
| 54 | + target="_blank" |
| 55 | + onClick={handleClick} |
| 56 | + > |
| 57 | + <span aria-label="rocket" className="hidden md:block" role="img"> |
| 58 | + 🚀 |
| 59 | + </span> |
| 60 | + <span |
| 61 | + className="inline-flex md:ml-1 animate-text-gradient font-medium bg-clip-text text-transparent bg-[linear-gradient(90deg,#27272A_0%,#52525B_50%,#52525B_100%)] dark:bg-[linear-gradient(90deg,#E5E5E5_0%,#A1A1AA_50%,#E5E5E5_100%)]" |
| 62 | + style={{ |
| 63 | + fontSize: "inherit", |
| 64 | + backgroundSize: "200%", |
| 65 | + backgroundClip: "text", |
| 66 | + WebkitBackgroundClip: "text", |
| 67 | + color: "transparent", |
| 68 | + }} |
| 69 | + > |
| 70 | + Generate, edit and deploy beautiful apps |
| 71 | + </span> |
| 72 | + </a> |
| 73 | + <a |
| 74 | + className="flex group min-w-[120px] items-center font-semibold text-background bg-foreground shadow-sm gap-1.5 relative overflow-hidden rounded-full p-[1px] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" |
| 75 | + href="https://heroui.chat?utm_source=heroui.com&utm_medium=top-banner" |
| 76 | + rel="noopener noreferrer" |
| 77 | + onClick={handleClick} |
| 78 | + > |
| 79 | + <div className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-foreground group-hover:bg-foreground/70 transition-background px-3 py-1 text-sm font-medium text-background"> |
| 80 | + HeroUI Chat |
| 81 | + <Icon |
| 82 | + aria-hidden="true" |
| 83 | + className="outline-none transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]" |
| 84 | + icon={arrowRightIcon} |
| 85 | + width={16} |
| 86 | + /> |
| 87 | + </div> |
| 88 | + </a> |
| 89 | + </div> |
| 90 | + </div> |
| 91 | + ); |
| 92 | +}; |
0 commit comments