Merge branch 'main' into audrey/pushed-only-changesets

Author: Audrey Sage Lorberfeld

src/components/Layout.tsx

@@ -1,17 +1,17 @@
 'use client';
 
-import {Hero} from '@/components/Hero';
-import {Logo} from '@/components/Logo';
-import {MobileNavigation} from '@/components/MobileNavigation';
-import {Navigation} from '@/components/Navigation';
-import {ThemeSelector} from '@/components/ThemeSelector';
+import { Hero } from '@/components/Hero';
+import { Logo } from '@/components/Logo';
+import { MobileNavigation } from '@/components/MobileNavigation';
+import { Navigation } from '@/components/Navigation';
+import { ThemeSelector } from '@/components/ThemeSelector';
 import clsx from 'clsx';
 import Link from 'next/link';
-import {usePathname} from 'next/navigation';
-import {useEffect, useState} from 'react';
-import {LogoMark} from './LogoMark';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { LogoMark } from './LogoMark';
+import { Search } from './search/Search';
 import VersionSelector from './VersionSelector';
-import {Search} from './search/Search';
 
 function GitHubIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 	return (
@@ -29,7 +29,7 @@ function Header() {
 			setIsScrolled(window.scrollY > 0);
 		}
 		onScroll();
-		window.addEventListener('scroll', onScroll, {passive: true});
+		window.addEventListener('scroll', onScroll, { passive: true });
 		return () => {
 			window.removeEventListener('scroll', onScroll);
 		};
@@ -99,7 +99,7 @@ function Header() {
 	);
 }
 
-export function Layout({children}: {children: React.ReactNode}) {
+export function Layout({ children }: { children: React.ReactNode }) {
 	let pathname = usePathname();
 	let isHomePage = pathname === '/';
 	let isCodyDocs = pathname.includes('/cody');
@@ -110,13 +110,14 @@ export function Layout({children}: {children: React.ReactNode}) {
 			<Header />
 
 			{/* Cody docs banner */}
-			{/* {isCodyDocs && !isopenCtxDocs && <TopBanner
+			{/*isCodyDocs && !isopenCtxDocs && <TopBanner
 				text="NEW: Introducing chat and search in a single input with Sourcegraph 6.0."
 				link="https://sourcegraph.com/blog/combining-chat-and-search"
 				linkText="Read here"
 				textColor="#ffffff"
 				backgroundColor="#F34E3F"
-			/>} */}
+				opacity='0.80'
+			/>/*}
 
 			{/* Openctx docs banner */}
 			{/* {isopenCtxDocs && <TopBanner

src/components/TopBanner.tsx

@@ -9,6 +9,16 @@ interface TopBannerProps {
   backgroundColor?: string;
   textColor?: string;
   linkText?: string;
+  opacity?: string;
+}
+
+const hexToRgb = (hex: string) => {
+  hex = hex.replace(/^#/, '');
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+
+  return `${r}, ${g}, ${b}`;
 }
 
 export function TopBanner({
@@ -17,14 +27,15 @@ export function TopBanner({
   backgroundColor = "#F34E3F",
   textColor = "white",
   linkText = 'new docs',
+  opacity = '1'
 }: TopBannerProps) {
   const [isVisible, setIsVisible] = useState(true);
 
   if (!isVisible) return null;
 
   return (
     <div
-      style={{ backgroundColor, color: textColor }}
+      style={{ backgroundColor: `rgba(${hexToRgb(backgroundColor)}, ${opacity})`, color: textColor }}
       className="fixed top-0 z-[100] min-h-[42px] w-full flex items-center justify-center px-4 py-2 md:py-0 md:h-[42px]"
     >
       <div className="flex items-center gap-2 text-xs sm:text-sm max-w-[90%] md:max-w-none text-center">