Svelte Create Drawers (CRUD) - Flowbite Svelte Blocks

<script lang="ts">
  import { Section } from 'flowbite-svelte-blocks';
  import { Drawer, Button, CloseButton, Label, Input, Textarea, Select } from 'flowbite-svelte';
  import { sineIn } from 'svelte/easing';
  let hidden = true;
  let transitionParams = {
    x: -320,
    duration: 200,
    easing: sineIn
  };
  let selected;
  let categories = [
    { value: '', name: 'Select category' },
    { value: 'TV', name: 'TV/Monitors' },
    { value: 'PC', name: 'PC' },
    { value: 'GA', name: 'Gaming/Console' },
    { value: 'PH', name: 'Phones' }
  ];
  const handleCancel = () => {
    hidden = true;
  };
</script>

<Section name="crudcreatedrawer">
  <div class="text-center pt-8">
    <Button on:click={() => (hidden = false)}>Create product</Button>
  </div>
  <Drawer transitionType="fly" {transitionParams} bind:hidden id="sidebar4">
    <div class="flex items-center">
      <h5 id="drawer-label" class="inline-flex items-center mb-6 text-base font-semibold text-gray-500 uppercase dark:text-gray-400">New Product</h5>
      <CloseButton on:click={() => (hidden = true)} class="mb-4 dark:text-white" />
    </div>
    <form action="#" class="mb-6">
      <div class="mb-6">
        <Label for="name" class="block mb-2">Name</Label>
        <Input id="name" name="name" required placeholder="Type product name" />
      </div>
      <div class="mb-6">
        <Label for="bland" class="block mb-2">Bland</Label>
        <Input id="bland" name="bland" required placeholder="Product brand" />
      </div>
      <div class="mb-6">
        <Label for="price" class="block mb-2">Price</Label>
        <Input id="price" name="price" required placeholder="$2999" />
      </div>
      <div class="mb-6">
        <Label
          >Category
          <Select class="mt-2" items={categories} bind:value={selected} />
        </Label>
      </div>
      <div class="mb-6">
        <Label for="brand" class="mb-2">Description</Label>
        <Textarea id="message" placeholder="Enter event description here" rows="4" name="message" />
      </div>
      <div class="bottom-0 left-0 flex justify-center w-full pb-4 space-x-4 md:px-4 md:absolute">
        <Button type="submit" class="w-full">Add product</Button>
        <Button class="w-full" color="light" on:click={handleCancel}>
          <svg aria-hidden="true" class="w-5 h-5 -ml-1 sm:mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
          Cancel
        </Button>
      </div>
    </form>
  </Drawer>
</Section>