diff --git a/src/components/home-next/HomeNext.scss b/src/components/home-next/HomeNext.scss index 1627a0451a701..4e9ed5807f0a1 100644 --- a/src/components/home-next/HomeNext.scss +++ b/src/components/home-next/HomeNext.scss @@ -23,47 +23,3 @@ overflow-x: clip; } -.home-next-preview-banner { - position: sticky; - top: 0; - z-index: 110; - width: 100%; - background: #FFD23F; - color: #0F1A14; - text-align: center; - padding: 8px 16px; - font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; - font-size: 13px; - font-weight: 500; - line-height: 1.4; - letter-spacing: 0.01em; - border-bottom: 1px solid rgba(15, 26, 20, 0.12); - - &__text { - display: inline-block; - max-width: 1180px; - } - - &__link { - background: none; - border: none; - padding: 0; - margin: 0; - font: inherit; - color: inherit; - text-decoration: underline; - text-underline-offset: 2px; - cursor: pointer; - - &:hover { - text-decoration: none; - } - } -} - -@media (max-width: 640px) { - .home-next-preview-banner { - font-size: 12px; - padding: 8px 12px; - } -} diff --git a/src/components/home-next/LayoutNext.tsx b/src/components/home-next/LayoutNext.tsx index 158b53400b629..fe125b3fb72cb 100644 --- a/src/components/home-next/LayoutNext.tsx +++ b/src/components/home-next/LayoutNext.tsx @@ -1,9 +1,10 @@ -import React, { JSX, useEffect, useRef } from 'react'; +import React, { JSX } from 'react'; import { PageMetadata } from '@docusaurus/theme-common'; import LayoutProvider from '@theme/Layout/Provider'; import Footer from '@theme/Footer'; import AnnouncementBar from '@theme/AnnouncementBar'; import { NavbarNext } from './NavbarNext'; +import { PreviewBanner } from './PreviewBanner'; interface LayoutNextProps { title?: string; @@ -14,57 +15,11 @@ interface LayoutNextProps { } export function LayoutNext({ title, description, onSwitchBack, children }: LayoutNextProps): JSX.Element { - const bannerRef = useRef(null); - - useEffect(() => { - const el = bannerRef.current; - if (!el) return; - const update = () => { - document.documentElement.style.setProperty( - '--home-next-banner-height', - `${el.offsetHeight}px`, - ); - }; - update(); - const ro = new ResizeObserver(update); - ro.observe(el); - return () => { - ro.disconnect(); - document.documentElement.style.removeProperty('--home-next-banner-height'); - }; - }, []); - return ( -
- - You're viewing the preview version of this page. For the full experience, please return to the - {' '} - - . - -
+
{children}