added new form page

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
haraldnilsen 2023-12-12 20:36:17 +01:00
parent 5a71b084f5
commit 4cd2ed9a8a
4 changed files with 36 additions and 15 deletions

View file

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#964747" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
</svg>

After

Width:  |  Height:  |  Size: 683 B

View file

@ -0,0 +1,13 @@
<script lang="ts">
export let width:string
</script>
<svg width={width} height={width} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#964747" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
</svg>

View file

@ -2,10 +2,10 @@
export let options:string[] export let options:string[]
</script> </script>
<div class="flex justify-between"> <div class="flex justify-between w-full">
{#each options as data, index (data)} {#each options as data, index (data)}
<div class="flex flex-col justify-center items-center w-24 "> <div class="flex flex-col justify-start items-center w-12 text-center">
<button name={data} class="h-7 w-7 rounded-full border-2 border-primary hover:bg-primary"></button> <button name={data} class="h-6 w-6 rounded-full border-2 border-primary hover:bg-primary"></button>
<label class="text-primary text-sm mt-1" for={data}>{data}</label> <label class="text-primary text-sm mt-1" for={data}>{data}</label>
</div> </div>
{/each} {/each}

View file

@ -1,15 +1,16 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
content: ["./src/**/*.{html,js,svelte,ts}"], content: ["./src/**/*.{html,js,svelte,ts}"],
theme: { theme: {
extend: { extend: {
colors: { colors: {
primary: "#08667C", primary: "#08667C",
secondary: "#CED9DD", secondary: "#CED9DD",
content: "#121212", content: "#121212",
bg: "#EEF0F3", bg: "#EEF0F3",
}, error: "#964747",
}, },
}, },
plugins: [], },
plugins: [],
}; };