diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx index e31a5b79b..c90ee397d 100644 --- a/apps/docs/app/layout.tsx +++ b/apps/docs/app/layout.tsx @@ -12,7 +12,7 @@ import {siteConfig} from "@/config/site"; import {fonts} from "@/config/fonts"; import {Navbar} from "@/components/navbar"; import {Footer} from "@/components/footer"; -import {ProBanner} from "@/components/pro-banner"; +import {HeroUIChatBanner} from "@/components/heroui-chat-banner"; export const metadata: Metadata = { title: { @@ -82,7 +82,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) { >
- + {children} diff --git a/apps/docs/app/providers.tsx b/apps/docs/app/providers.tsx index fd981ace4..f31a0fd05 100644 --- a/apps/docs/app/providers.tsx +++ b/apps/docs/app/providers.tsx @@ -1,7 +1,7 @@ "use client"; import * as React from "react"; -import {HeroUIProvider, ToastProvider} from "@heroui/react"; +import {HeroUIProvider} from "@heroui/react"; import {ThemeProvider as NextThemesProvider} from "next-themes"; import {ThemeProviderProps} from "next-themes"; import {useRouter} from "next/navigation"; @@ -44,7 +44,6 @@ export function Providers({children, themeProps}: ProvidersProps) { return ( - {children} diff --git a/apps/docs/components/heroui-chat-banner.tsx b/apps/docs/components/heroui-chat-banner.tsx new file mode 100644 index 000000000..db1456386 --- /dev/null +++ b/apps/docs/components/heroui-chat-banner.tsx @@ -0,0 +1,92 @@ +"use client"; + +import {Icon} from "@iconify/react/dist/offline"; +import arrowRightIcon from "@iconify/icons-solar/arrow-right-linear"; +import {usePathname} from "next/navigation"; +import {useEffect} from "react"; +import {usePostHog} from "posthog-js/react"; + +import emitter from "@/libs/emitter"; + +const hideOnPaths = ["examples"]; + +export const HeroUIChatBanner = () => { + const posthog = usePostHog(); + + const handleClick = () => { + posthog.capture("HeroUI Chat Banner", { + action: "click", + category: "landing-page", + }); + }; + + const pathname = usePathname(); + const shouldBeVisible = !hideOnPaths.some((path) => pathname.includes(path)); + + useEffect(() => { + if (!shouldBeVisible) return; + + // listen to scroll event, dispatch an event when scroll is at the top < 48 px + const handleScroll = () => { + if (window.scrollY < 48) { + emitter.emit("proBannerVisibilityChange", "visible"); + } else { + emitter.emit("proBannerVisibilityChange", "hidden"); + } + }; + + window.addEventListener("scroll", handleScroll); + + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, [shouldBeVisible]); + + if (!shouldBeVisible) return null; + + return ( + + ); +}; diff --git a/apps/docs/components/icons/circle-info.tsx b/apps/docs/components/icons/circle-info.tsx new file mode 100644 index 000000000..649dcaabd --- /dev/null +++ b/apps/docs/components/icons/circle-info.tsx @@ -0,0 +1,20 @@ +import {IconSvgProps} from "@/types"; + +export const CircleInfo = ({size = 24, width, height, ...props}: IconSvgProps) => ( + + + +); diff --git a/apps/docs/components/icons/index.ts b/apps/docs/components/icons/index.ts index 550ad3786..cb35df678 100644 --- a/apps/docs/components/icons/index.ts +++ b/apps/docs/components/icons/index.ts @@ -17,3 +17,4 @@ export * from "./mirror-left"; export * from "./palette-round"; export * from "./filters"; export * from "./scaling"; +export * from "./circle-info"; diff --git a/apps/docs/components/icons/sponsors.tsx b/apps/docs/components/icons/sponsors.tsx index 518222a74..d229b545d 100644 --- a/apps/docs/components/icons/sponsors.tsx +++ b/apps/docs/components/icons/sponsors.tsx @@ -89,3 +89,23 @@ export const CodeRabbitLogo = () => ( /> ); + +export const MochiiAILogo = () => ( + + + + + +); diff --git a/apps/docs/components/marketing/sponsors.tsx b/apps/docs/components/marketing/sponsors.tsx index c3cdb017f..90dac8dfb 100644 --- a/apps/docs/components/marketing/sponsors.tsx +++ b/apps/docs/components/marketing/sponsors.tsx @@ -1,7 +1,7 @@ import {Button, Link} from "@heroui/react"; import {sectionWrapper} from "@/components/primitives"; -import {Story2DesignLogo, CodeRabbitLogo} from "@/components/icons/sponsors"; +import {Story2DesignLogo, CodeRabbitLogo, MochiiAILogo} from "@/components/icons/sponsors"; import {HeartFilledIcon} from "@/components/icons"; import {siteConfig} from "@/config/site"; import {Sponsor, SponsorItem} from "@/components/marketing/sponsor-item"; @@ -17,6 +17,11 @@ const sponsors: Sponsor[] = [ href: "https://coderabbit.ai/?utm_source=heroui&utm_marketing=oss", logo: , }, + { + name: "Mochii.AI", + href: "https://www.mochii.ai/?utm_source=heroui&utm_marketing=oss", + logo: , + }, ]; export const Sponsors = () => { diff --git a/apps/docs/components/themes/components/config-section.tsx b/apps/docs/components/themes/components/config-section.tsx index 93b0fe3df..b39eb1c1b 100644 --- a/apps/docs/components/themes/components/config-section.tsx +++ b/apps/docs/components/themes/components/config-section.tsx @@ -1,18 +1,39 @@ +import {Tooltip} from "@heroui/react"; import {clsx} from "@heroui/shared-utils"; +import {CircleInfo} from "@/components/icons"; + interface ConfigurationSectionProps { children: React.ReactNode; id?: string; title: string; icon?: React.ReactNode; + visualPurposeOnly?: boolean; } -export function ConfigSection({children, id, title, icon}: ConfigurationSectionProps) { +export function ConfigSection({ + children, + id, + title, + icon, + visualPurposeOnly, +}: ConfigurationSectionProps) { return (
{icon}
{title}
+ {visualPurposeOnly && ( + +
+ +
+ + )}
{children}
diff --git a/apps/docs/components/themes/components/configuration/border-widths.tsx b/apps/docs/components/themes/components/configuration/border-widths.tsx index 72326c93f..6b4c62799 100644 --- a/apps/docs/components/themes/components/configuration/border-widths.tsx +++ b/apps/docs/components/themes/components/configuration/border-widths.tsx @@ -15,7 +15,7 @@ export function BorderWidths() { const {borderWidthValue, setBorderWidthValue} = useThemeBuilder(); return ( - } title="Border width"> + } title="Border width"> {BORDER_WIDTHS.map(({title, className}) => ( } title="Font Family"> + } title="Font Family"> diff --git a/apps/docs/components/themes/components/configuration/index.tsx b/apps/docs/components/themes/components/configuration/index.tsx index 1f2bce6b8..2bc902431 100644 --- a/apps/docs/components/themes/components/configuration/index.tsx +++ b/apps/docs/components/themes/components/configuration/index.tsx @@ -10,6 +10,7 @@ import { ScrollShadow, Drawer, DrawerContent, + cn, } from "@heroui/react"; import {useTheme} from "next-themes"; import {useLocalStorage} from "usehooks-ts"; @@ -54,7 +55,11 @@ export default function Configuration() { setRadiusValue, setBorderWidthValue, } = useThemeBuilder(); - const [selectedTemplate, setSelectedTemplate] = useState