- 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
|