feat: base implementation of panel preview

2026-02-06 12:55:48 +05:00
parent 070b49cbad
commit 571fd9bf25
10 changed files with 184 additions and 140 deletions
@@ -0,0 +1,90 @@
+<script lang="ts">
+  import Card from "$components/layout/Card.svelte";
+  import Badge from "$components/ui/Badge.svelte";
+  import Button from "$components/ui/Button.svelte";
+  import IconDownload from "$components/ui/Icons/IconDownload.svelte";
+  import IconEmpty from "$components/ui/Icons/IconEmpty.svelte";
+  import type { SlideDirection } from "$lib/types/utils";
+  import { textsState } from "$states/texts.svelte";
+  import Preview from "./Preview.svelte";
+  import PreviewControls from "./PreviewControls.svelte";
+
+  let current: number = $state(0);
+  let direction: SlideDirection = $state("next");
+
+  $effect(() => {
+    $inspect(current, textsState.texts);
+    if (current > textsState.texts.length - 1) current = textsState.texts.length - 1;
+  });
+</script>
+
+{#snippet panelTitle()}
+  Панели <Badge text={textsState.texts.length} />
+{/snippet}
+
+{#snippet panelControls()}
+  <PreviewControls bind:current bind:direction max={textsState.texts.length} />
+{/snippet}
+
+<Card title={panelTitle} titleSnippet={panelControls}>
+  <div class="panel-viewer">
+    <div class="panel-display">
+      {#if textsState.texts.length}
+        <!-- {@const text = } -->
+        {#key current}
+          <Preview text={textsState.texts[current].text} {direction} />
+        {/key}
+      {:else}
+        <div class="empty-state">
+          <IconEmpty />
+          <p>Добавьте тексты для создания панелей</p>
+        </div>
+      {/if}
+    </div>
+
+    <div class="panel-actions">
+      <Button label="Скачать всё" icon={IconDownload} />
+      <Button label="Скачать" type="outline" icon={IconDownload} />
+    </div>
+  </div>
+</Card>
+
+<style>
+  .panel-viewer {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .panel-display {
+    background: var(--bg-secondary);
+    border-radius: var(--radius);
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 150px;
+  }
+
+  .panel-actions {
+    display: flex;
+    gap: 8px;
+  }
+
+  .empty-state {
+    text-align: center;
+    padding: 32px 16px;
+    color: var(--text-tertiary);
+  }
+
+  .empty-state :global(svg) {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto 12px;
+    opacity: 0.5;
+  }
+
+  .empty-state p {
+    font-size: 14px;
+  }
+</style>