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