kitchen-sink-server/src/pages/categories/navigation/index.tsx

import { NextPage } from 'next';
import { ButtonSize, ButtonVariant } from '@tesseract-design/web-base-button';
import * as Navigation from '@tesseract-design/web-navigation-react';
import * as Info from '@tesseract-design/web-info-react';

const ActionPage: NextPage = () => {
  return (
    <main className="my-16 md:my-32">
      <section>
        <div className="container mx-auto px-4">
          <h1>
            Navigation
          </h1>
          <div>
            <section>
              <h2>
                LinkButton
              </h2>
              <div>
                <section>
                  <h3>Variants</h3>
                  <div>
                    <div className="grid md:grid-cols-2 gap-4 my-4">
                      <div>
                        <Navigation.LinkButton
                          block
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          variant={ButtonVariant.FILLED}
                          block
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          border
                          block
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          border
                          variant={ButtonVariant.FILLED}
                          block
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          disabled
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          variant={ButtonVariant.FILLED}
                          block
                          disabled
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          border
                          block
                          disabled
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          border
                          variant={ButtonVariant.FILLED}
                          block
                          disabled
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                    </div>
                  </div>
                </section>
                <section>
                  <h3>Sizes</h3>
                  <div>
                    <div className="grid md:grid-cols-2 gap-4 my-4">
                      <div>
                        <Navigation.LinkButton
                          block
                          border
                          size={ButtonSize.SMALL}
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          border
                          variant={ButtonVariant.FILLED}
                          size={ButtonSize.SMALL}
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          border
                          size={ButtonSize.MEDIUM}
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          border
                          variant={ButtonVariant.FILLED}
                          size={ButtonSize.MEDIUM}
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          border
                          size={ButtonSize.LARGE}
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          border
                          variant={ButtonVariant.FILLED}
                          size={ButtonSize.LARGE}
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                    </div>
                  </div>
                </section>
                <section>
                  <h3>Compact</h3>
                  <div>
                    <div className="grid md:grid-cols-2 gap-4 my-4">
                      <div>
                        <Navigation.LinkButton
                          block
                          compact
                          border
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          compact
                          border
                          variant={ButtonVariant.FILLED}
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          border
                          compact
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          compact
                          border
                          variant={ButtonVariant.FILLED}
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          border
                          compact
                          size={ButtonSize.SMALL}
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          compact
                          border
                          variant={ButtonVariant.FILLED}
                          size={ButtonSize.SMALL}
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          border
                          compact
                          size={ButtonSize.LARGE}
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          compact
                          border
                          variant={ButtonVariant.FILLED}
                          size={ButtonSize.LARGE}
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          border
                          compact
                          menuItem
                          size={ButtonSize.SMALL}
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          compact
                          border
                          size={ButtonSize.SMALL}
                          variant={ButtonVariant.FILLED}
                          menuItem
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          border
                          compact
                          menuItem
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          compact
                          border
                          variant={ButtonVariant.FILLED}
                          menuItem
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          border
                          compact
                          menuItem
                          size={ButtonSize.LARGE}
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          compact
                          border
                          size={ButtonSize.LARGE}
                          variant={ButtonVariant.FILLED}
                          menuItem
                          subtext={
                            <>
                              Very Long Line of Subtext That Spans More Than The Component Width For Testing Overflow
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Very Long Line of Text That Spans More Than The Component Width For Testing Overflow
                        </Navigation.LinkButton>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </section>
          </div>
        </div>
      </section>
    </main>
  )
}

export default ActionPage