<script>
  import Avatars from "./Avatars.svelte";
  import Badges from "./Badges.svelte";
  import BreadcrumbNav from "./BreadcrumbNav.svelte";
  import FileUpload from "./FileUpload.svelte";
  import Pagination from "./Pagination.svelte";
  import Table from "./Table.svelte";
  import Tabs from "./Tabs.svelte";
  import Tags from "./Tags.svelte";
</script>

<div class="border-4 border-dashed rounded h-96 mb-4" />
<div class="mb-8">
  <FileUpload />
</div>
<div class="mb-8">
  <Tabs />
</div>
<div class="mb-8">
  <Tags />
</div>
<div class="mb-8">
  <Badges />
</div>
<div class="mb-8">
  <Avatars />
</div>
<Pagination />
<div class="mb-8">
  <Table />
</div>
<div
  class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
  <div class="flex flex-row items-center justify-between mb-6">
    <div class="flex flex-col">
      <div class="text-sm font-light text-grey-500">Regular</div>
      <div class="text-sm font-bold"><span>Text inputs</span></div>
    </div>
  </div>
  <div class="flex flex-col lg:flex-row lg:flex-wrap w-full lg:space-x-4">
    <div class="w-full lg:w-1/4">
      <div class="form-element ">
        <div class="form-label">Label</div><input
          name="name"
          type="text"
          class="form-input"
          placeholder="Enter something..." />
        <div class="form-hint">This is a hint</div>
      </div>
    </div>
    <div class="w-full lg:w-1/4">
      <div class="form-element ">
        <div class="form-label">First name</div><input
          name="name"
          type="text"
          class="form-input form-input-invalid"
          placeholder="john@example.com" />
        <div class="form-error">First name is required</div>
      </div>
    </div>
    <div class="w-full lg:w-1/4">
      <div class="form-element ">
        <div class="form-label">First name</div><input
          name="name"
          type="text"
          class="form-input form-input-valid"
          placeholder="john@example.com" />
        <div class="form-success">First name is valid</div>
      </div>
    </div>
  </div>
</div>
<div class="mb-8">
  <BreadcrumbNav />
</div>
