|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242 |
- import { NextPage } from 'next';
- import * as Action from '@tesseract-design/web-action-react';
- import { DefaultLayout } from '@/components/DefaultLayout';
-
- const ActionPage: NextPage = () => {
- return (
- <DefaultLayout
- title="Action"
- >
- <section>
- <div className="container mx-auto px-4">
- <h1>
- ActionButton
- </h1>
- <div>
- <section>
- <h2>Variants</h2>
- <div>
- <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
- <div>
- <Action.ActionButton
- variant="bare"
- block
- >
- Button
- </Action.ActionButton>
- </div>
- <div>
- <Action.ActionButton
- variant="filled"
- block
- >
- Button
- </Action.ActionButton>
- </div>
- <div>
- <Action.ActionButton
- variant="outline"
- block
- >
- Button
- </Action.ActionButton>
- </div>
- <div>
- <Action.ActionButton
- variant="filled"
- block
- >
- Button
- </Action.ActionButton>
- </div>
- <div>
- <Action.ActionButton
- variant="bare"
- block
- disabled
- >
- Button
- </Action.ActionButton>
- </div>
- <div>
- <Action.ActionButton
- variant="filled"
- block
- disabled
- >
- Button
- </Action.ActionButton>
- </div>
- <div>
- <Action.ActionButton
- variant="outline"
- block
- disabled
- >
- Button
- </Action.ActionButton>
- </div>
- <div>
- <Action.ActionButton
- variant="filled"
- block
- disabled
- >
- Button
- </Action.ActionButton>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>Sizes</h2>
- <div>
- <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
- <div>
- <Action.ActionButton
- block
- variant="outline"
- size="small"
- >
- Button
- </Action.ActionButton>
- </div>
- <div>
- <Action.ActionButton
- block
- variant="filled"
- size="small"
- >
- Button
- </Action.ActionButton>
- </div>
- <div>
- <Action.ActionButton
- block
- variant="outline"
- size="medium"
- >
- Button
- </Action.ActionButton>
- </div>
- <div>
- <Action.ActionButton
- block
- variant="filled"
- size="medium"
- >
- Button
- </Action.ActionButton>
- </div>
- <div>
- <Action.ActionButton
- block
- variant="outline"
- size="large"
- >
- Button
- </Action.ActionButton>
- </div>
- <div>
- <Action.ActionButton
- block
- variant="filled"
- size="large"
- >
- Button
- </Action.ActionButton>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>Compact</h2>
- <div>
- <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
- <div>
- <Action.ActionButton
- block
- compact
- variant="outline"
- >
- Button
- </Action.ActionButton>
- </div>
- <div>
- <Action.ActionButton
- block
- compact
- variant="filled"
- >
- Button
- </Action.ActionButton>
- </div>
- <div>
- <Action.ActionButton
- block
- compact
- variant="outline"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Action.ActionButton>
- </div>
- <div>
- <Action.ActionButton
- block
- compact
- variant="filled"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Action.ActionButton>
- </div>
- <div>
- <Action.ActionButton
- block
- compact
- variant="outline"
- size="small"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Action.ActionButton>
- </div>
- <div>
- <Action.ActionButton
- block
- compact
- variant="filled"
- size="small"
- subtext={
- <>
- Very Long Line of Subtext That Spans More Than The Component Width For Testing Overflow
- </>
- }
- >
- Very Long Line of Text That Spans More Than The Component Width For Testing Overflow
- </Action.ActionButton>
- </div>
- </div>
- </div>
- </section>
- </div>
- </div>
- </section>
- </DefaultLayout>
- )
- }
-
- export default ActionPage
|