text: import P from '../components/paragraph'
  import Post from '../components/post'
  
  export default function Home() {
    return (
      <div className="main">
        <Post title="My first blog post">
          <P>Hello there</P>
          <P>This is an example of a componentized blog post</P>
        </Post>
  
        <hr />
  
        <Post title="My second blog post">
          <P>Hello there</P>
          <P>This is another example.</P>
          <P>Wa-hoo!</P>
        </Post>
  
        <hr />
  
        <Post title="The final blog post">
          <P>C’est fin</P>
        </Post>
  
        <style jsx>{`
          .main {
            margin: auto;
            max-width: 420px;
            padding: 10px;
          }
  
          hr {
            width: 100px;
            border-width: 0;
            margin: 20px auto;
            text-align: center;
          }
  
          hr::before {
            content: '***';
            color: #ccc;
          }
        `}</style>
      </div>
    )
  }
  