eolas-app/src/components/AppHeader.tsx

import { SidebarTrigger } from "./ui/sidebar"
import { Separator } from "./ui/separator"
import Search from "@/containers/Search"
import { Button } from "./ui/button"
import { useState } from "react"
import History from "./History"
import { HistoryIcon } from "lucide-react"

export default function AppHeader({
   pageTitle,
   historyOpen,
   setHistoryOpen,
}: {
   pageTitle: string
}) {
   return (
      <header className="sticky top-0 z-10 flex h-12 shrink-0 items-center gap-2 border-b bg-background transition-[width,height] ease-linear">
         <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
            <SidebarTrigger className="-ml-1" />
            <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
            <Search />
            <Button
               variant="outline"
               size="icon"
               className="rounded-none"
               onClick={() => setHistoryOpen(true)}
            >
               <HistoryIcon />
            </Button>

            <History sheetOpen={historyOpen} setSheetOpen={setHistoryOpen} error={false} />
         </div>
      </header>
   )
}