frontend: containers refactor

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

@@ -0,0 +1,9 @@
+<script>
+    import File from '$lib/components/file.svelte';
+    import AddButton from '$lib/components/add_button.svelte';
+</script>
+
+<div class="input rounded">
+    <File />
+    <AddButton type="file"/>
+</div>

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import Image from "../image.svelte";
+
+    let { value = $bindable([]) } = $props();
+
+</script>
+
+<div class="img-conatiner rounded">
+    <Image />
+</div>
+
+<style>
+    /* Горизонтальный список */
+    .img-conatiner {
+        display: flex;
+        overflow-x: scroll;
+        align-content: center;
+        padding: 0.5rem;
+    }
+
+    .img-conatiner :global(*) {
+        margin: 0;
+        margin-right: 0.5rem;
+    }
+</style>

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>

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

@@ -0,0 +1,8 @@
+<script>
+    import QueueItem from '$lib/components/queue_item.svelte';
+</script>
+
+<div class="input rounded">
+    <QueueItem date="28.11.24" name="Fate/Stay Night (Судьба/Ночь схватки)"/>
+    <QueueItem date="30.11.24" name="Fate/Hollow Ataraxia (Судьба/Святая атараксия)"/>
+</div>