notesnook/packages/editor-mobile/src/components/header.tsx

import ArrowBackIcon from "mdi-react/ArrowBackIcon";
import CloudUploadOutlineIcon from "mdi-react/CloudUploadOutlineIcon";
import CrownIcon from "mdi-react/CrownIcon";
import DotsHorizontalIcon from "mdi-react/DotsHorizontalIcon";
import MagnifyIcon from "mdi-react/MagnifyIcon";
import React from "react";
import { EditorController } from "../hooks/useEditorController";
import { useSafeArea } from "../hooks/useSafeArea";
import { useSettings } from "../hooks/useSettings";
import { EventTypes } from "../utils";
import styles from "./styles.module.css";

const Button = ({
  onPress,
  children,
  style,
}: {
  onPress: () => void;
  children: React.ReactNode;
  style: React.CSSProperties;
}) => {
  return (
    <button
      className={styles.btn_header}
      style={style}
      onMouseUp={(e) => {
        e.preventDefault();
      }}
      onMouseDown={(e) => e.preventDefault()}
      onTouchEnd={(e) => {
        e.preventDefault();
        e.stopPropagation();
        onPress();
      }}
      onTouchStart={(e) => {
        editor?.commands.blur();
        e.preventDefault();
      }}
    >
      {children}
    </button>
  );
};

export default function Header({
  controller,
}: {
  controller: EditorController;
}) {
  const insets = useSafeArea();
  const settings = useSettings();

  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        height: `${50 + insets.top}px`,
        backgroundColor: "var(--nn_bg)",
        position: "sticky",
        width: "100vw",
      }}
    >
      <div
        style={{
          display: "flex",
          width: "100%",
          justifyContent: "space-between",
          flexDirection: "row",
          paddingTop: insets.top,
        }}
      >
        <Button
          onPress={() => {
            post(EventTypes.back);
          }}
          style={{
            borderWidth: 0,
            borderRadius: 100,
            color: "var(--nn_icon)",
            marginLeft: 6,
            width: 40,
            height: 40,
            display: "flex",
            justifyContent: "center",
            alignItems: "start",
            flexDirection: "column",
          }}
        >
          <ArrowBackIcon size={28} color="var(--nn_pri)" />
        </Button>

        <div
          style={{
            display: "flex",
            alignItems: "center",
            flexDirection: "row",
          }}
        >
          {!settings.premium && (
            <Button
              onPress={() => {
                post(EventTypes.pro);
              }}
              style={{
                borderWidth: 0,
                borderRadius: 100,
                color: "var(--nn_icon)",
                marginRight: 10,
                width: 39,
                height: 39,
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <CrownIcon size={28} color="orange" />
            </Button>
          )}
          <Button
            onPress={() => {
              //
            }}
            style={{
              borderWidth: 0,
              borderRadius: 100,
              color: "var(--nn_icon)",
              marginRight: 10,

              width: 39,
              height: 39,
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <MagnifyIcon size={28} color="var(--nn_pri)" />
          </Button>
          <Button
            onPress={() => {
              post(EventTypes.monograph);
            }}
            style={{
              borderWidth: 0,
              borderRadius: 100,
              color: "var(--nn_icon)",
              marginRight: 10,
              width: 39,
              height: 39,
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <CloudUploadOutlineIcon size={28} color="var(--nn_pri)" />
          </Button>

          <Button
            onPress={() => {
              post(EventTypes.properties);
            }}
            style={{
              borderWidth: 0,
              borderRadius: 100,
              color: "var(--nn_icon)",
              marginRight: 12,
              width: 39,
              height: 39,
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <DotsHorizontalIcon size={28} color="var(--nn_pri)" />
          </Button>
        </div>
      </div>
    </div>
  );
}