upend/ui/src/components/utils/Input.svelte

<script lang="ts">
  export let placeholder = "";
  export let type = "text";
  export let value = "";

  let focused = false;
</script>

<div class="input" class:focused>
  <slot name="prefix" />
  <input
    {type}
    {placeholder}
    {value}
    on:input
    on:focus={() => (focused = true)}
    on:blur={() => (focused = false)}
  />
</div>

<style lang="scss">
  .input {
    display: flex;
    align-items: center;
    gap: 0.25em;
    padding: 0.25em;

    border: 1px solid var(--foreground-lighter);
    border-radius: 4px;
    background: var(--background-lighter);

    transition: box-shadow .25s;
    &.focused {
      box-shadow: 0 0 2px 3px var(--primary);
    }
  }

  input {
    flex-grow: 1;

    color: var(--foreground);
    background: transparent;
    border: none;

    &:focus {
      outline: none;
    }
  }
</style>