BlocksHeader Block

1import * as React from "react"
2import { Icon } from "reflexjs"
3
4export default function Block({ branding, links, buttonLink, ...props }) {
5  const [showMenu, setShowMenu] = React.useState(false)
6
7  return (
8    <header py="6" {...props}>
9      <div variant="container">
10        <div display="flex" alignItems="center">
11          {branding && (
12            <a
13              href="/"
14              display="flex"
15              alignItems="center"
16              _hover={{
17                color: "primary",
18              }}
19            >
20              {branding.icon && <Icon name={branding.icon} size="5" mr="2" />}
21              <span fontWeight="semibold" fontSize="3xl|2xl">
22                {branding.name}
23              </span>
24            </a>
25          )}
26          <NavLinks links={links} display="none|grid" />
27          {buttonLink && (
28            <a
29              href={buttonLink.href}
30              variant="button.accent.sm"
31              ml="auto"
32              display="none|flex"
33            >
34              {buttonLink.title}
35            </a>
36          )}
37          <button
38            display="flex|none"
39            p="2"
40            size="14"
41            ml="auto"
42            onClick={() => setShowMenu(!showMenu)}
43          >
44            <Icon name="menu-alt" size="10" />
45          </button>
46        </div>
47      </div>
48      <div
49        position="absolute"
50        zIndex="1000"
51        bg="background"
52        top="24"
53        left="4"
54        right="4"
55        rounded="xl"
56        overflow="scroll"
57        boxShadow="3xl"
58        border="1px solid"
59        borderColor="border"
60        transform={`scale(${showMenu ? 1 : 0.95})`}
61        visibility={showMenu ? "visible" : "hidden"}
62        opacity={showMenu ? 1 : 0}
63        transition="all .25s ease-in"
64        transformOrigin="100% 0"
65        maxHeight="95vh"
66        display="block|none"
67      >
68        <NavLinks links={links} py="8" px="2" />
69        {buttonLink && (
70          <div p="4" bg="muted">
71            <a
72              href={buttonLink.href}
73              variant="button.accent"
74              ml="auto"
75              w="full"
76            >
77              {buttonLink.title}
78            </a>
79          </div>
80        )}
81      </div>
82    </header>
83  )
84}
85
86export function NavLinks({ links, ...props }) {
87  return links.length ? (
88    <div
89      display="grid"
90      col={`1|repeat(${links.length}, auto)`}
91      gap="8|10|12"
92      ml="0|10"
93      {...props}
94    >
95      {links.map((link, index) => (
96        <a
97          key={index}
98          variant="text"
99          href={link.href}
100          textAlign="left|center"
101          fontSize="xl|md"
102          px="4|0"
103          _hover={{
104            color: "primary",
105          }}
106        >
107          {link.title}
108        </a>
109      ))}
110    </div>
111  ) : null
112}

1import * as React from "react"
2import Block from "../src/components/header-002"
3
4export default function Example() {
5  return (
6    <Block
7      minH="500|0"
8      branding={{
9        name: "Reflex",
10      }}
11      links={[
12        {
13          title: "Features",
14          href: "#",
15        },
16        {
17          title: "Pricing",
18          href: "#",
19        },
20        {
21          title: "Learn",
22          href: "#",
23        },
24        {
25          title: "Support",
26          href: "#",
27        },
28      ]}
29      buttonLink={{
30        title: "Get Started",
31        href: "#",
32      }}
33    />
34  )
35}