pages/index.tsx

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLaptopCode } from '@fortawesome/free-solid-svg-icons';
import { MailIcon } from '@heroicons/react/solid';
import type { NextPage } from 'next';
import Head from 'next/head';
import Image from 'next/image';
import tw, { styled } from 'twin.macro';

import { Button, ButtonWithIcon } from './../design-system';

const Container = tw.div`py-0 px-8`;
const Main = tw.main`h-screen w-full flex flex-col justify-center items-center`;
const Title = tw.h1`text-black font-bold text-lg md:text-2xl`;

interface FlexContainerProps {
  direction: 'vertical' | 'horizontal';
}

const FlexContainer = styled.div(({ direction }: FlexContainerProps) => [
  tw`flex w-1/2 justify-between my-2`,
  direction === 'vertical' ? tw`flex-col` : tw`flex-row`,
]);

const Home: NextPage = () => {
  return (
    <Container>
      <Head>
        <title>Create Next App</title>
        <meta name='description' content='Generated by create next app' />
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <Main>
        <Title>
          Welcome to <a href='https://nextjs.org'>Next.js!</a>
        </Title>

        <FlexContainer direction='horizontal'>
          <Button>Buy</Button>
          <Button variant='secondary'>Buy</Button>
          <Button variant='primary'>Buy</Button>
        </FlexContainer>

        <FlexContainer direction='horizontal'>
          <ButtonWithIcon icon={MailIcon} />
          <ButtonWithIcon icon={MailIcon} variant='secondary' />
          <ButtonWithIcon icon={MailIcon} variant='primary' />
        </FlexContainer>

        <FlexContainer direction='horizontal'>
          <ButtonWithIcon icon={MailIcon} iconPosition='leading'>
            Contact
          </ButtonWithIcon>
          <ButtonWithIcon icon={MailIcon} iconPosition='leading' variant='secondary'>
            Contact
          </ButtonWithIcon>
          <ButtonWithIcon icon={MailIcon} iconPosition='leading' variant='primary'>
            Contact
          </ButtonWithIcon>
        </FlexContainer>

        <FlexContainer direction='horizontal'>
          <ButtonWithIcon icon={MailIcon} iconPosition='trailing'>
            Contact
          </ButtonWithIcon>
          <ButtonWithIcon icon={MailIcon} iconPosition='trailing' variant='secondary'>
            Contact
          </ButtonWithIcon>
          <ButtonWithIcon icon={MailIcon} iconPosition='trailing' variant='primary'>
            Contact
          </ButtonWithIcon>
        </FlexContainer>

        <FlexContainer direction='horizontal'>
          <FontAwesomeIcon icon={faLaptopCode} size='2x' />
          <FontAwesomeIcon icon={['fab', 'apple']} size='2x' />
          <FontAwesomeIcon icon='rocket' size='2x' />
        </FlexContainer>

        <Image src='/images/profile.jpg' height={144} width={144} alt='Your Name' />
      </Main>
    </Container>
  );
};

export default Home;