<script lang="ts">
  import Districts from "../components/districts.svelte";
  import Neosearch from "../components/neosearch.svelte";
</script>

<!-- Container Div-->
<div class="px-4">
  <!-- Under Construction Warning: Temporary -->
  <div
    class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-900 p-4 mb-4"
    role="alert"
  >
    <p>
      <strong>Pagoda</strong> is currently under construction and breaking changes
      may occur. You are welcome to browse around, but please be aware that the site
      is not yet complete.
    </p>
    <p>Potential breaking changes include, but are not limited to:</p>
    <ul class="list-disc list-inside ml-4">
      <li>Design, UI, and UX changes.</li>
      <li>
        Changes to user account features and structure, resulting in complete or
        partial data loss.
      </li>
      <li>Changes to the Page Layouts and Components.</li>
    </ul>
  </div>

  <!-- Neocities Search Engine: Search Bar -->
  <!-- <Neosearch /> -->

  <!-- Districts on Pagoda: Equivalent to Neocities/Geocities Districts -->
  <Districts />
</div>