src/lib/components/models/Submit.svelte

<script lang="ts">
  import { get } from 'svelte/store';
  import { userStore } from "$lib/stores/use-user";

	import Input from "$lib/components/fields/Input.svelte";
	import Button from "$lib/components/Button.svelte";

  let user = get(userStore);
  export let onClose: () => void;
  let model = {
    id: '',
    title: '',
    image: '',
  }
  let error = {
    id: '',
    title: '',
    image: ''
  }

  const handleSubmit = async () => {
    fetch('/api/models/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(model),
    })
    .then(response => response.json())
    .then(data => {
      if (data.error) {
        error = data.error;
      } else {
        error = {
          id: '',
          title: '',
          image: ''
        }
      }
    })
  }
</script>
<div class="grid grid-cols-1 gap-8">
  {#if user?.picture}
    <div class="flex items-center justify-start gap-3">
      <img src={user.picture} alt="User avatar" class="w-8 h-8 rounded-full border border-white inline-block" />
      <div class="w-full text-left text-white">
        <p class="text-base font-semibold">{user?.name}</p>
        <p class="text-xs leading-none text-neutral-400">{user?.preferred_username}</p>
      </div>
    </div>
  {:else}
    <p class="bg-yellow-500/40 rounded-full text-xs text-yellow-400 px-3 py-1 font-semibold max-w-max">
      You need to be logged in to submit a model.
    </p>
  {/if}
  <header>
    <p class="text-white font-semibold text-lg">
      Submit a Model
    </p>
    <p class="text-neutral-300 text-base mt-1">
      Submit a model to the LoRA Studio. You can submit a model by providing a link to the model.
    </p>
  </header>
  <main class="grid grid-cols-1 gap-6">
    <div>
      <p class="text-xs uppercase text-neutral-400 font-semibold mb-2">
        HuggingFace model URL
        <span class="text-red-500">*</span>
      </p>
      <Input
        value={model.id}
        placeholder="{`${user?.preferred_username ?? 'enzostvs'}/`}"
        prefix="huggingface.co/"
        onChange={(value) => model.id = value}
      />
      {#if error.id}
        <p class="text-xs text-red-500 mt-1">
          {error.id}
        </p>
      {/if}
    </div>
    <div>
      <p class="text-xs uppercase text-neutral-400 font-semibold mb-2">
        Title
        <span class="text-red-500">*</span>
      </p>
      <Input
        value={model.title}
        placeholder="Simpson style"
        onChange={(value) => model.title = value}
      />
    </div>
    <div>
      <p class="text-xs uppercase text-neutral-400 font-semibold mb-2">
        Thumbnail image
        <span class="text-red-500">*</span>
      </p>
      <Input
        value={model.image}
        placeholder="https://"
        onChange={(value) => model.image = value}
      />
      {#if error.image}
        <p class="text-xs text-red-500 mt-1">
          {error.image}
        </p>
      {/if}
    </div>
  </main>
  <footer class="flex items-center justify-end gap-3">
    <Button theme="dark" size="md" onClick={onClose}>Cancel</Button>
    <Button theme="blue" size="md" onClick={handleSubmit}>Submit</Button>
  </footer>
</div>