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