Function HeaderLogo

packages/devtools-ui/src/components/header.tsx:21–46

({
  children,
  flavor,
  onClick,
}: {
  children: JSX.Element
  flavor: {
    light: string
    dark: string
  }
  onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>
})

    </header>
  )
}

export function HeaderLogo({
  children,
  flavor,
  onClick,
}: {
  children: JSX.Element
  flavor: {
    light: string
    dark: string
  }
  onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>
}) {
  const styles = createStyles()
  return (
    <div class={styles().header.logoAndToggleContainer}>
      <button
        data-tsd-control
        class={clsx(styles().header.logo)}
        onClick={onClick}
      >
        <span class={clsx(styles().header.tanstackLogo)}>TANSTACK</span>
        <span
          class={clsx(styles().header.flavorLogo(flavor.light, flavor.dark))}
        >
          {children}
        </span>
      </button>