<script>
import Chart from './Chart.svelte'
</script>
<svelte:head>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</svelte:head>
<main class="flex flex-col gap-4 max-w-3xl mx-auto sm:px-4">
<h1 class="text-xl sm:text-2xl md:text-4xl font-semi my-6 text-gray-700">Responsive charts</h1>
<div class="flex justify-center">
<Chart title="Chart #1" points={[1,2,3,5,2,3]}/>
</div>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<Chart title="Chart #2" points={[4,2,3,7,2,8]}/>
<Chart title="Chart #3" points={[1,6,3,8,2,3]}/>
</div>
</main>