AppHeader.tsx raw

   1  import { ReactElement } from "react";
   2  import { Separator } from "src/components/ui/separator";
   3  import { SidebarTrigger } from "src/components/ui/sidebar";
   4  
   5  type Props = {
   6    icon?: React.ReactElement;
   7    title: string | ReactElement;
   8    description?: string | ReactElement;
   9    contentRight?: React.ReactNode;
  10    breadcrumb?: boolean;
  11    addSidebarTrigger?: boolean;
  12    pageTitle?: string;
  13  };
  14  
  15  function AppHeader({
  16    icon,
  17    title,
  18    description = "",
  19    contentRight,
  20    addSidebarTrigger = true,
  21    pageTitle,
  22  }: Props) {
  23    return (
  24      <>
  25        {pageTitle && <title>{`${pageTitle} · Alby Hub`}</title>}
  26        <header className="flex flex-row flex-wrap items-center border-b border-border pb-4 gap-2">
  27          {addSidebarTrigger && <SidebarTrigger className="-ml-1 md:hidden" />}
  28          <Separator orientation="vertical" className="mr-2 h-4 md:hidden" />
  29          {icon}
  30          <div className="flex flex-col flex-1 min-w-0">
  31            <div className="flex justify-between items-start sm:items-center flex-wrap gap-2">
  32              <div className="flex-1 min-w-0">
  33                <h1 className="text-2xl lg:text-3xl font-semibold">{title}</h1>
  34                {description && (
  35                  <p className="text-xs sm:text-base text-muted-foreground">
  36                    {description}
  37                  </p>
  38                )}
  39              </div>
  40              {contentRight && (
  41                <div className="flex gap-3 h-full shrink-0">{contentRight}</div>
  42              )}
  43            </div>
  44          </div>
  45        </header>
  46      </>
  47    );
  48  }
  49  
  50  export default AppHeader;
  51