BlocksHeader Block

import * as React from "react"
import { Icon } from "reflexjs"

export default function Block({ branding, links, buttonLink, ...props }) {
  const [showMenu, setShowMenu] = React.useState(false)

  return (
    <header py="6" {...props}>
      <div variant="container">
        <div display="flex" alignItems="center">
          {branding && (
            <a
              href="/"
              display="flex"
              alignItems="center"
              _hover={{
                color: "primary",
              }}
            >
              {branding.icon && <Icon name={branding.icon} size="5" mr="2" />}
              <span fontWeight="semibold" fontSize="3xl|2xl">
                {branding.name}
              </span>
            </a>
          )}
          <NavLinks links={links} display="none|grid" />
          {buttonLink && (
            <a
              href={buttonLink.href}
              variant="button.accent.sm"
              ml="auto"
              display="none|flex"
            >
              {buttonLink.title}
            </a>
          )}
          <button
            display="flex|none"
            p="2"
            size="14"
            ml="auto"
            onClick={() => setShowMenu(!showMenu)}
          >
            <Icon name="menu-alt" size="10" />
          </button>
        </div>
      </div>
      <div
        position="absolute"
        zIndex="1000"
        bg="background"
        top="24"
        left="4"
        right="4"
        rounded="xl"
        overflow="scroll"
        boxShadow="3xl"
        border="1px solid"
        borderColor="border"
        transform={`scale(${showMenu ? 1 : 0.95})`}
        visibility={showMenu ? "visible" : "hidden"}
        opacity={showMenu ? 1 : 0}
        transition="all .25s ease-in"
        transformOrigin="100% 0"
        maxHeight="95vh"
        display="block|none"
      >
        <NavLinks links={links} py="8" px="2" />
        {buttonLink && (
          <div p="4" bg="muted">
            <a
              href={buttonLink.href}
              variant="button.accent"
              ml="auto"
              w="full"
            >
              {buttonLink.title}
            </a>
          </div>
        )}
      </div>
    </header>
  )
}

export function NavLinks({ links, ...props }) {
  return links.length ? (
    <div
      display="grid"
      col={`1|repeat(${links.length}, auto)`}
      gap="8|10|12"
      ml="0|10"
      {...props}
    >
      {links.map((link, index) => (
        <a
          key={index}
          variant="text"
          href={link.href}
          textAlign="left|center"
          fontSize="xl|md"
          px="4|0"
          _hover={{
            color: "primary",
          }}
        >
          {link.title}
        </a>
      ))}
    </div>
  ) : null
}

import * as React from "react"
import Block from "../src/components/header-002"

export default function Example() {
  return (
    <Block
      minH="500|0"
      branding={{
        name: "Reflex",
      }}
      links={[
        {
          title: "Features",
          href: "#",
        },
        {
          title: "Pricing",
          href: "#",
        },
        {
          title: "Learn",
          href: "#",
        },
        {
          title: "Support",
          href: "#",
        },
      ]}
      buttonLink={{
        title: "Get Started",
        href: "#",
      }}
    />
  )
}