Function SystemButtonItem

src/components/header/shared/SystemButtonGroup.tsx:8–27

({
  children,
  onClick,
})

import { useDocSearch, useSetDarkMode } from '@/providers'

const SystemButtonItem: FC<{ children: ReactNode; onClick?: () => void }> = ({
  children,
  onClick,
}) => {
  return (
    <div
      onClick={onClick}
      className={clsx(
        'flex h-8 w-8 items-center justify-center',
        'fill-nord-neutral cursor-pointer rounded-sm',
        'text-nord-neutral dark:text-nord-neutral-dark',
        'fill-nord-neutral dark:fill-nord-neutral-dark',
        'hover:bg-nord-outline/80 dark:hover:bg-nord-outline-dark/80',
        'hover:bg-nord-secondary-deep/[0.12] active:bg-nord-secondary-deep/20 dark:hover:bg-nord-secondary-deep/[0.12] dark:active:bg-nord-secondary-deep/20 transition'
      )}
    >
      {children}
    </div>
  )
}

export const SystemButtonGroup = () => {
  const setDarkMode = useSetDarkMode()