tesseract/showcases/web-kitchensink-reactnext/src/pages/categories/navigation/index.tsx

import { NextPage } from 'next';
import * as Navigation from '@tesseract-design/web-navigation-react';
import * as Info from '@tesseract-design/web-information-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
                          variant="bare"
                          href="#"
                          block
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          variant="filled"
                          block
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          variant="outline"
                          block
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          variant="filled"
                          block
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          disabled
                          href="#"
                          variant="bare"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          variant="filled"
                          block
                          disabled
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          variant="outline"
                          block
                          disabled
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          variant="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
                          variant="outline"
                          size="small"
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          variant="filled"
                          size="small"
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          variant="outline"
                          size="medium"
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          variant="filled"
                          size="medium"
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          variant="outline"
                          size="large"
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          variant="filled"
                          size="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
                          variant="outline"
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          compact
                          variant="filled"
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          variant="outline"
                          compact
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          compact
                          variant="filled"
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          variant="outline"
                          compact
                          size="small"
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          compact
                          variant="filled"
                          size="small"
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          variant="outline"
                          compact
                          size="large"
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          compact
                          variant="filled"
                          size="large"
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          variant="outline"
                          compact
                          menuItem
                          size="small"
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          compact
                          size="small"
                          variant="filled"
                          menuItem
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          variant="outline"
                          compact
                          menuItem
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          compact
                          variant="filled"
                          menuItem
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          variant="outline"
                          compact
                          menuItem
                          size="large"
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                          badge={
                            <Info.Badge
                              rounded
                            >
                              69
                            </Info.Badge>
                          }
                          href="#"
                        >
                          Button
                        </Navigation.LinkButton>
                      </div>
                      <div>
                        <Navigation.LinkButton
                          block
                          compact
                          size="large"
                          variant="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