frontend: properly designed authors

frontend/src/lib/components/authors.svelte

@@ -1,22 +1,38 @@
-<script>
+<script lang="ts">
     import Image from "./image.svelte";
+
+    let data = $state({
+        title: "",
+        description: "",
+        avatar: null
+    });
+
 </script>
 
 <div class="authors input rounded">
-    <Image shape="round"/>
+    <Image shape="round" bind:image={data["avatar"]}/>
     <div>
-        <input type="text" class="input dotted rounded" placeholder="Название">
-        <textarea class="input dotted rounded" placeholder="Описание" rows="3"></textarea>
+        <input type="text" class="input dotted rounded" placeholder="Название" bind:value={data["title"]}>
+        <textarea class="input dotted rounded" placeholder="Описание" rows="3" bind:value={data["description"]}></textarea>
     </div>
 </div>
 
 <style>
     .authors {
-        display: flex;
+        display: grid;
+        grid-template-columns: 5.5rem auto;
     }
 
     .authors div {
         display: grid;
+        width: 100%;
+    }
+
+    :global(.authors .img-div) {
+        width: 5rem;
+        height: 5rem;
+        background-color: white;
+        border: 0.15rem dashed;
     }
 
     .dotted {
@@ -28,11 +44,20 @@
         .dotted {
             border-color: #CCCCCC;
         }
+
+        :global(.authors .img-div) {
+            border-color: #CCCCCC;
+        }
+
     }
 
     @media (prefers-color-scheme: dark) {
         .dotted {
-            border-color: #CCCCCC;
+            border-color: #0C0F14;
+        }
+
+        :global(.authors .img-div) {
+            border-color: #0C0F14;
         }
     }
 </style>