import { NextPage } from 'next'; import { ButtonSize, ButtonVariant } from '@tesseract-design/web-base-button'; 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 block href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton variant={ButtonVariant.FILLED} block href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton border block href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton border variant={ButtonVariant.FILLED} block href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block disabled href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton variant={ButtonVariant.FILLED} block disabled href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton border block disabled href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton border variant={ButtonVariant.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 border size={ButtonSize.SMALL} href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block border variant={ButtonVariant.FILLED} size={ButtonSize.SMALL} href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block border size={ButtonSize.MEDIUM} href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block border variant={ButtonVariant.FILLED} size={ButtonSize.MEDIUM} href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block border size={ButtonSize.LARGE} href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block border variant={ButtonVariant.FILLED} size={ButtonSize.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 border href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block compact border variant={ButtonVariant.FILLED} href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block border compact subtext={ <> Subtext </> } href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block compact border variant={ButtonVariant.FILLED} subtext={ <> Subtext </> } href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block border compact size={ButtonSize.SMALL} subtext={ <> Subtext </> } badge={ <Info.Badge rounded > 69 </Info.Badge> } href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block compact border variant={ButtonVariant.FILLED} size={ButtonSize.SMALL} subtext={ <> Subtext </> } badge={ <Info.Badge rounded > 69 </Info.Badge> } href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block border compact size={ButtonSize.LARGE} subtext={ <> Subtext </> } badge={ <Info.Badge rounded > 69 </Info.Badge> } href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block compact border variant={ButtonVariant.FILLED} size={ButtonSize.LARGE} subtext={ <> Subtext </> } badge={ <Info.Badge rounded > 69 </Info.Badge> } href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block border compact menuItem size={ButtonSize.SMALL} subtext={ <> Subtext </> } badge={ <Info.Badge rounded > 69 </Info.Badge> } href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block compact border size={ButtonSize.SMALL} variant={ButtonVariant.FILLED} menuItem subtext={ <> Subtext </> } badge={ <Info.Badge rounded > 69 </Info.Badge> } href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block border compact menuItem subtext={ <> Subtext </> } badge={ <Info.Badge rounded > 69 </Info.Badge> } href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block compact border variant={ButtonVariant.FILLED} menuItem subtext={ <> Subtext </> } badge={ <Info.Badge rounded > 69 </Info.Badge> } href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block border compact menuItem size={ButtonSize.LARGE} subtext={ <> Subtext </> } badge={ <Info.Badge rounded > 69 </Info.Badge> } href="#" > Button </Navigation.LinkButton> </div> <div> <Navigation.LinkButton block compact border size={ButtonSize.LARGE} variant={ButtonVariant.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