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