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