umami/components/layout/Header.js

import { Column, Icon, Row, Text } from 'react-basics';
import Link from 'next/link';
import LanguageButton from 'components/input/LanguageButton';
import ThemeButton from 'components/input/ThemeButton';
import SettingsButton from 'components/input/SettingsButton';
import Icons from 'components/icons';
import styles from './Header.module.css';

export default function Header() {
  return (
    <header className={styles.header}>
      <Row>
        <Column>
          <Link href="https://umami.is" target="_blank">
            <a className={styles.title}>
              <Icon size="lg">
                <Icons.Logo />
              </Icon>
              <Text>umami</Text>
            </a>
          </Link>
        </Column>
        <Column className={styles.buttons}>
          <ThemeButton tooltipPosition="bottom" />
          <LanguageButton tooltipPosition="bottom" menuPosition="bottom" />
          <SettingsButton />
        </Column>
      </Row>
    </header>
  );
}