Finish space create form

src/lib/components/Icon.svelte

@@ -13,14 +13,21 @@
   import AltArrowRight from "@assets/icons/Alt Arrow Right.svg?dataurl"
   import AltArrowLeft from "@assets/icons/Alt Arrow Left.svg?dataurl"
   import ClipboardText from "@assets/icons/Clipboard Text.svg?dataurl"
+  import CloseCircle from "@assets/icons/Close Circle.svg?dataurl"
+  import Copy from "@assets/icons/Copy.svg?dataurl"
   import Compass from "@assets/icons/Compass.svg?dataurl"
   import CompassBig from "@assets/icons/Compass Big.svg?dataurl"
+  import FireMinimalistic from "@assets/icons/Fire Minimalistic.svg?dataurl"
+  import GallerySend from "@assets/icons/Gallery Send.svg?dataurl"
   import HandPills from "@assets/icons/Hand Pills.svg?dataurl"
   import HomeSmile from "@assets/icons/Home Smile.svg?dataurl"
+  import InfoCircle from "@assets/icons/Info Circle.svg?dataurl"
   import Plain from "@assets/icons/Plain.svg?dataurl"
+  import RemoteControllerMinimalistic from "@assets/icons/Remote Controller Minimalistic.svg?dataurl"
   import Settings from "@assets/icons/Settings.svg?dataurl"
   import UFO3 from "@assets/icons/UFO 3.svg?dataurl"
   import UserHeart from "@assets/icons/User Heart.svg?dataurl"
+  import WiFiRouterRound from "@assets/icons/Wi-Fi Router Round.svg?dataurl"
 
   export let icon
   export let size = 5
@@ -33,14 +40,21 @@
     "alt-arrow-right": AltArrowRight,
     "alt-arrow-left": AltArrowLeft,
     "clipboard-text": ClipboardText,
+    "close-circle": CloseCircle,
+    copy: Copy,
     compass: Compass,
     "compass-big": CompassBig,
+    "fire-minimalistic": FireMinimalistic,
+    "gallery-send": GallerySend,
     "hand-pills": HandPills,
     "home-smile": HomeSmile,
+    "info-circle": InfoCircle,
     plain: Plain,
+    'remote-controller-minimalistic': RemoteControllerMinimalistic,
     settings: Settings,
     "ufo-3": UFO3,
     "user-heart": UserHeart,
+    "wifi-router-round": WiFiRouterRound,
   })
 
   if (!data) {

src/lib/components/InputProfilePicture.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import {randomId} from '@welshman/lib'
+  import Icon from '@lib/components/Icon.svelte'
+
+  export let file: File | null = null
+  export let url: string | null = null
+
+  const id = randomId()
+
+  const onDragEnter = () => {
+    active = true
+  }
+
+  const onDragOver = () => {
+    active = true
+  }
+
+  const onDragLeave = () => {
+    active = false
+  }
+
+  const onDrop = (e: any) => {
+    active = false
+
+    file = e.dataTransfer.files[0]
+  }
+
+  const onChange = (e: any) => {
+    file = e.target.files[0]
+  }
+
+  const onClear = () => {
+    initialUrl = null
+    file = null
+    url = null
+  }
+
+  let active = false
+  let initialUrl = url
+
+  $: {
+    if (file) {
+      const reader = new FileReader()
+
+      reader.addEventListener("load", () => { url = reader.result as string }, false)
+      reader.readAsDataURL(file)
+    } else {
+      url = initialUrl
+    }
+  }
+
+</script>
+
+<form>
+  <input {id} type="file" accept="image/*" on:change={onChange} class="hidden" />
+  <label
+    for={id}
+    aria-label="Drag and drop files here."
+    style="background-image: url({url});"
+    class="relative flex justify-center items-center w-24 h-24 rounded-full border-2 border-dashed border-base-content transition-all bg-base-300 cursor-pointer bg-cover bg-center shrink-0"
+    class:border-primary={active}
+    on:dragenter|preventDefault|stopPropagation={onDragEnter}
+    on:dragover|preventDefault|stopPropagation={onDragOver}
+    on:dragleave|preventDefault|stopPropagation={onDragLeave}
+    on:drop|preventDefault|stopPropagation={onDrop}>
+    <div
+      class="bg-primary right-0 top-0 absolute rounded-full overflow-hidden"
+      class:bg-error={file}
+      class:bg-primary={!file}>
+      {#if file}
+        <span
+          role="button"
+          tabindex="-1"
+          on:mousedown|stopPropagation={onClear}
+          on:touchstart|stopPropagation={onClear}>
+          <Icon icon="close-circle" class="!bg-base-300 scale-150" />
+        </span>
+      {:else}
+        <Icon icon="add-circle" class="!bg-base-300 scale-150" />
+      {/if}
+    </div>
+    {#if !file}
+      <Icon icon="gallery-send" size={7} />
+    {/if}
+  </label>
+</form>

src/lib/components/Link.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import cx from 'classnames'
+
+  export let href
+  export let external = false
+</script>
+
+<a
+  {href}
+  {...$$props}
+  class={cx($$props.class, "cursor-pointer underline text-primary")}
+  rel={external ? "noopener noreferer" : ""}
+  target={external ? "_blank" : ""}>
+  <slot />
+</a>