---
import SectionContainer from '../components/SectionContainer.astro';
import quotes from '../data/quotes.json'
---
<SectionContainer title="quotes" description="my favorite quotes">
  <main class="flex flex-col gap-4 mt-4">
		<h1 class="text-3xl font-extrabold">[ quotes ]</h1>
      <section>
        <ul>
           {
             quotes.map(quote => (
               <li class="flex flex-col mb-10 break-words">
                 <p class="italic">{quote.quote}</p>
                 <p class="author">- {quote.author}</p>
               </li>
             ))
           }
        </ul>
      </section>
	</main>
</SectionContainer>
