Navbar React Component

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Link,
  Block,
  BlockTitle,
  BlockHeader,
  List,
  ListItem,
  Radio,
  Toggle,
} from 'konsta/react';

export default function NavbarPage() {
  const [size, setSize] = useState('Default');
  const [isTransparent, setIsTransparent] = useState(false);
  return (
    <Page>
      <Navbar
        title="Navbar"
        subtitle="Subtitle"
        className="top-0 sticky"
        medium={size === 'Medium'}
        large={size === 'Large'}
        transparent={isTransparent}
        right={<Link navbar>Right</Link>}
      />
      <div className="relative">
        <Block strong inset>
          <p>
            Navbar is a fixed area at the top of a screen that contains Page
            title and navigation elements.
          </p>
        </Block>

        <BlockTitle>Size</BlockTitle>
        <BlockHeader>
          Medium and Large will collapse to usual size on page scroll
        </BlockHeader>
        <List strong inset>
          {['Default', 'Medium', 'Large'].map((v) => (
            <ListItem
              key={v}
              label
              title={v}
              after={
                <Radio
                  component="div"
                  value={v}
                  checked={size === v}
                  onChange={() => setSize(v)}
                />
              }
            />
          ))}
        </List>

        <BlockTitle>Transparent</BlockTitle>

        <BlockHeader>
          When navbar is transparent, its title and background will become
          visible on page scroll
        </BlockHeader>
        <List strong inset>
          <ListItem
            label
            title="Transparent"
            after={
              <Toggle
                component="div"
                checked={isTransparent === true}
                onChange={() => setIsTransparent(!isTransparent)}
              />
            }
          />
        </List>

        <Block strong inset className="space-y-4">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto
            tempore ratione unde accusantium distinctio nulla quia numquam earum
            odio, optio, nisi rem deserunt. Molestiae delectus, ut assumenda
            numquam magni enim.
          </p>
          <p>
            Architecto molestias cum dolor dolorem provident consequuntur
            incidunt sunt fugiat tenetur odio, recusandae placeat rem veniam.
            Voluptates, repellendus odit, magni nesciunt, optio laborum
            asperiores repudiandae consectetur suscipit ab cupiditate eum.
          </p>
          <p>
            Aliquam, iste accusamus deleniti temporibus exercitationem neque
            perferendis optio, blanditiis quisquam molestias perspiciatis cumque
            harum tenetur veniam. Dolorum fugit doloribus est, deserunt,
            eligendi, quaerat quidem itaque tempore laborum non illum?
          </p>
          <p>
            Rerum magni sunt quis veniam, dolor ratione saepe ducimus tempore
            voluptatum porro quod commodi? Aperiam laudantium deleniti totam
            dolorum qui accusantium iste saepe facere optio, soluta maxime
            mollitia deserunt cumque.
          </p>
          <p>
            Iusto tempore quis provident, saepe illum ex ipsum cupiditate
            explicabo ratione unde facere nemo delectus harum, blanditiis eius
            sit asperiores nam. Aut cupiditate est tempore officia, perspiciatis
            esse asperiores repudiandae?
          </p>
          <p>
            Consequuntur itaque harum eos vero, reiciendis dolorum iure non
            earum molestias tenetur sint enim, maxime recusandae ad perferendis
            repudiandae! Sit, quos exercitationem beatae numquam laborum nobis
            natus. Obcaecati, ea inventore.
          </p>
          <p>
            Fugit culpa labore sapiente excepturi reiciendis, nulla, nihil neque
            ut veritatis quis quibusdam dolorum? Voluptatibus animi officia
            perspiciatis doloremque cum voluptatem, quia ratione modi vero,
            consequatur ipsum, praesentium quibusdam amet?
          </p>
          <p>
            Laudantium nihil sint nam placeat, nemo rerum ipsam explicabo iusto
            dolores molestiae expedita eos consequuntur ut architecto
            consequatur soluta ad maiores voluptatem tenetur in velit. Minima
            quia molestiae nobis voluptatibus.
          </p>
          <p>
            Expedita soluta quia inventore et placeat id exercitationem quisquam
            eligendi est eius sapiente quo, cum nesciunt mollitia, sit veniam
            ducimus tempora culpa adipisci commodi in autem nihil voluptatem
            corporis? Perspiciatis.
          </p>
          <p>
            Molestias, est? Eligendi vero distinctio voluptatem cumque id
            voluptatibus, officia minima repellendus sit illo tempora labore
            provident? Eum tenetur consectetur quae, in facilis autem ipsam
            doloribus voluptate vitae suscipit nobis.
          </p>
          <p>
            Obcaecati optio iste hic, soluta minus ullam, perferendis pariatur
            non possimus autem nostrum libero sapiente. Corporis quo cum iusto
            exercitationem velit. Non beatae eveniet asperiores ipsa
            consequuntur temporibus sapiente earum!
          </p>
          <p>
            Temporibus, omnis. Excepturi dolorum expedita laudantium quasi quod
            id adipisci, esse, nam atque in, incidunt ex ab distinctio
            repellendus beatae voluptatem alias odit illum quis. Illo numquam
            voluptatibus error voluptatum!
          </p>
        </Block>
      </div>
    </Page>
  );
}

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Block,
  Segmented,
  SegmentedButton,
} from 'konsta/react';

export default function SubnavbarPage() {
  return (
    <Page>
      <Navbar
        title="Subnavbar"
        subnavbar={
          <Segmented strong rounded>
            <SegmentedButton active>Button</SegmentedButton>
            <SegmentedButton>Button</SegmentedButton>
            <SegmentedButton>Button</SegmentedButton>
          </Segmented>
        }
      />
      <div className="relative">
        <Block strong inset>
          <p>
            Subnavbar is useful when you need to put any additional elements
            into Navbar, like Tab Links or Search Bar. It also remains visible
            when Navbar hidden.
          </p>
        </Block>
        <Block strong inset className="space-y-4">
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione
            consequuntur numquam quia labore eligendi asperiores obcaecati neque
            sapiente fugit vel praesentium accusantium, earum corporis officiis
            tempora est delectus fugiat laudantium?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure
            possimus, magni excepturi molestias consequatur commodi nihil velit
            quo odit adipisci voluptatibus quam fugit nesciunt repellat
            accusantium libero repudiandae consectetur alias!
          </p>
          <p>
            Nihil unde iusto ab animi eum? Quia natus provident fugit, molestias
            ea numquam qui distinctio ex perferendis fuga! Fugit voluptates
            obcaecati ipsa recusandae eos saepe ducimus repudiandae. Explicabo,
            fuga obcaecati!
          </p>
          <p>
            Neque voluptas eius, quod consequatur officia dolor sunt cupiditate,
            animi commodi cumque nam ex totam autem ipsum doloribus! Possimus
            eligendi unde provident, esse molestias amet minus! Laboriosam
            veniam alias eum.
          </p>
          <p>
            Dicta obcaecati, architecto at ducimus suscipit dolor ea praesentium
            sint? Deleniti ipsam magni dolorem amet quibusdam temporibus
            pariatur suscipit voluptas, quas harum nesciunt culpa facere
            consequuntur id et accusamus exercitationem!
          </p>
          <p>
            Officiis, quibusdam reprehenderit corporis non nisi debitis magnam.
            Deleniti, recusandae iusto repellendus dicta magni exercitationem
            labore natus reiciendis sapiente error dolorum necessitatibus maxime
            laborum esse suscipit praesentium ratione. Ex, in.
          </p>
        </Block>
      </div>
    </Page>
  );
}