frontend: containers refactor

frontend/src/lib/components/containers/marks.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    import Mark from "../mark.svelte";
+    import AddButton from "../add_button.svelte";
+
+    let { value = $bindable([]), label = "" } = $props();
+    let items: string[] = $state([]);
+</script>
+
+<div class="marks-container input rounded">
+    <p>{label}</p>
+
+    {#each items as item}
+        <Mark text={item}/>
+    {/each}
+    <AddButton handler={() => {
+        items.push("");
+        value = items;
+    }} />
+    
+</div>
+
+<style>
+    /* Горизонтальный список */
+    .marks-container {
+        display: flex;
+        overflow-x: scroll;
+        align-content: center;
+        padding: 0.5rem;
+    }
+
+    .marks-container :global(*) {
+        margin: 0;
+        margin-right: 0.5rem;
+    }
+
+    .marks-container p {
+        align-content: center;
+    }
+</style>