checktheroads-hyperglass/hyperglass/ui/components/Title.js

/** @jsx jsx */
import { jsx } from "@emotion/core";
import { forwardRef } from "react";
import { Button, Heading, Image, Stack, useColorMode } from "@chakra-ui/core";
import useConfig from "~/components/HyperglassProvider";
import useMedia from "~/components/MediaProvider";

const titleSize = { true: ["2xl", "2xl", "5xl", "5xl"], false: "2xl" };
const titleMargin = { true: 2, false: 0 };
const textAlignment = { false: ["right", "center"], true: ["left", "center"] };
const logoName = { light: "dark", dark: "light" };
const justifyMap = {
  true: ["flex-end", "center", "center", "center"],
  false: ["flex-start", "center", "center", "center"]
};

const logoFallback = {
  light:
    "https://res.cloudinary.com/hyperglass/image/upload/v1593916013/logo-dark.svg",
  dark:
    "https://res.cloudinary.com/hyperglass/image/upload/v1593916013/logo-light.svg"
};

const TitleOnly = ({ text, showSubtitle }) => (
  <Heading
    as="h1"
    mb={titleMargin[showSubtitle]}
    fontSize={titleSize[showSubtitle]}
  >
    {text}
  </Heading>
);

const SubtitleOnly = ({ text, mediaSize, ...props }) => (
  <Heading
    as="h3"
    fontSize={["md", "md", "xl", "xl"]}
    whiteSpace="break-spaces"
    textAlign={["left", "left", "center", "center"]}
    {...props}
  >
    {text}
  </Heading>
);

const TextOnly = ({ text, mediaSize, showSubtitle, ...props }) => (
  <Stack
    spacing={2}
    maxW="100%"
    textAlign={textAlignment[showSubtitle]}
    {...props}
  >
    <TitleOnly text={text.title} showSubtitle={showSubtitle} />
    {showSubtitle && (
      <SubtitleOnly text={text.subtitle} mediaSize={mediaSize} />
    )}
  </Stack>
);

const Logo = ({ text, logo }) => {
  const { colorMode } = useColorMode();
  const { width, dark_format, light_format } = logo;
  const logoExt = { light: dark_format, dark: light_format };
  return (
    <Image
      css={{
        userDrag: "none",
        userSelect: "none",
        msUserSelect: "none",
        MozUserSelect: "none",
        WebkitUserDrag: "none",
        WebkitUserSelect: "none"
      }}
      alt={text.title}
      width={width ?? "auto"}
      fallbackSrc={logoFallback[colorMode]}
      src={`/images/${logoName[colorMode]}${logoExt[colorMode]}`}
    />
  );
};

const LogoSubtitle = ({ text, logo, mediaSize }) => (
  <>
    <Logo text={text} logo={logo} mediaSize={mediaSize} />
    <SubtitleOnly mt={6} text={text.subtitle} />
  </>
);

const All = ({ text, logo, mediaSize, showSubtitle }) => (
  <>
    <Logo text={text} logo={logo} />
    <TextOnly
      mediaSize={mediaSize}
      showSubtitle={showSubtitle}
      mt={2}
      text={text}
    />
  </>
);

const modeMap = {
  text_only: TextOnly,
  logo_only: Logo,
  logo_subtitle: LogoSubtitle,
  all: All
};

const Title = forwardRef(({ onClick, isSubmitting, ...props }, ref) => {
  const { web } = useConfig();
  const { mediaSize } = useMedia();
  const titleMode = web.text.title_mode;
  const MatchedMode = modeMap[titleMode];
  return (
    <Button
      px={0}
      w="100%"
      ref={ref}
      variant="link"
      flexWrap="wrap"
      flexDir="column"
      onClick={onClick}
      _focus={{ boxShadow: "none" }}
      _hover={{ textDecoration: "none" }}
      justifyContent={justifyMap[isSubmitting]}
      alignItems={["flex-start", "flex-start", "center"]}
      {...props}
    >
      <MatchedMode
        mediaSize={mediaSize}
        showSubtitle={!isSubmitting}
        text={web.text}
        logo={web.logo}
      />
    </Button>
  );
});

export default Title;