Begin implementing editor, using different format this time

src/lib/components/editor/imageTarget.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    let avatar: string
+    let fileinput: HTMLInputElement
+    
+    const onFileSelected =(e)=>{
+        let image = e.target.files[0];
+        let reader = new FileReader();
+        reader.readAsDataURL(image);
+        reader.onload = e => {
+            avatar = e.target.result as string
+        };
+    }
+    
+</script>
+
+<div>
+    
+    {#if avatar}
+        <button class="h-30 w-full rounded-2xl hover:text-white/30" on:click={()=>{fileinput.click();}}>
+            <img class="avatar rounded-2xl hover:brightness-50 transition-opacity" src="{avatar}" alt="d" />
+        </button> 
+    {:else}
+        <button class="text-center bg-white/30 h-30 w-full rounded-2xl" on:click={()=>{fileinput.click();}}>
+            Select Image
+        </button> 
+    {/if}
+    
+
+    <input style="display:none" type="file" accept=".jpg, .jpeg, .png" on:change={(e)=>onFileSelected(e)} bind:this={fileinput} >
+
+</div>

src/lib/components/editor/index.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import ImageTarget from "./imageTarget.svelte"
+</script>
+
+<ImageTarget />

src/routes/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import Editor from '$lib/components/editor/index.svelte';
+</script>
+
+<Editor />

src/routes/layout.css

@@ -13,8 +13,4 @@ html {
   html body {
     @apply font-[AmericanTypewriter];
     /* @apply w-full md:w-[68%] mx-auto h-full; */
-  }
-
-button {
-    @apply py-2 px-3 bg-green-400 rounded-xl;
-}
+  }