diff options
| author | Melonai <einebeere@gmail.com> | 2021-01-21 01:03:34 +0100 |
|---|---|---|
| committer | Melonai <einebeere@gmail.com> | 2021-01-21 01:03:34 +0100 |
| commit | 72da387a292ac0e1934e72bbcc30042c82007bd0 (patch) | |
| tree | b32d9a75a2d2c09045909d8cd89865598e244853 /client/src/Components/Form.svelte | |
| parent | 826c7c47785ee01d2b9267919132ada696425344 (diff) | |
| download | shorest-72da387a292ac0e1934e72bbcc30042c82007bd0.tar.zst shorest-72da387a292ac0e1934e72bbcc30042c82007bd0.zip | |
Change case of components directory
Diffstat (limited to 'client/src/Components/Form.svelte')
| -rw-r--r-- | client/src/Components/Form.svelte | 64 |
1 files changed, 0 insertions, 64 deletions
diff --git a/client/src/Components/Form.svelte b/client/src/Components/Form.svelte deleted file mode 100644 index 327d25d..0000000 --- a/client/src/Components/Form.svelte +++ /dev/null @@ -1,64 +0,0 @@ -<script lang="ts"> - import shorten from "$actions/shorten"; - import { links } from "$data/links"; - import checkUrl from "$utils/checkUrl"; - import debounce from "$utils/debounce"; - import ArrowIcon from "./icons/ArrowIcon.svelte"; - import CrossIcon from "./icons/CrossIcon.svelte"; - - let value = ""; - let valid = false; - - function submit() { - const url = checkUrl(value); - if (url !== null) { - links.add(shorten(url)); - } - } - - const check = debounce(() => valid = !!checkUrl(value), 100); - - // @ts-ignore: Value is a dependency - $: value, check(); -</script> - -<style> - form { - position: relative; - border: 1px solid #aaaabb; - box-shadow: 0 4px 6px #aaaabb30; - box-sizing: border-box; - border-radius: 5px; - } - - .field { - box-sizing: border-box; - width: 100%; - border: none; - padding: 15px 50px 15px 20px; - background: transparent; - font-size: 1rem; - } - - .button { - position: absolute; - right: 10px; - margin: auto; - top: 0; - bottom: 0; - background: transparent; - border: none; - cursor: pointer; - } -</style> - -<form on:submit|preventDefault={submit}> - <input class="field" bind:value type="text"/> - <button class="button" type="submit"> - {#if valid} - <ArrowIcon/> - {:else} - <CrossIcon/> - {/if} - </button> -</form> |
