feat: divide page into components

2026-02-04 10:25:24 +05:00
parent 3aa5ada9ba
commit aa5c55f95f
7 changed files with 285 additions and 299 deletions
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { uiStore } from "../stores/uiStore";
+  import ImageManager from "./ImageManager.svelte";
+  import TextSection from "./TextSection.svelte";
+
+  interface Props {
+    uploadedImage: string | null;
+    texts: Array<{ id: string; text: string }>;
+    onImageUpload: (image: string) => void;
+    onCropComplete: (croppedImage: string) => void;
+    onCropCancel: () => void;
+    onTextAdd: (text: string) => void;
+    onTextUpdate: (id: string, newText: string) => void;
+    onTextDelete: (id: string) => void;
+  }
+
+  let {
+    uploadedImage,
+    texts,
+    onImageUpload,
+    onCropComplete,
+    onCropCancel,
+    onTextAdd,
+    onTextUpdate,
+    onTextDelete
+  }: Props = $props();
+</script>
+
+<div class="main-section">
+  <ImageManager
+    currentStep={$uiStore.currentStep}
+    {uploadedImage}
+    onImageUpload={onImageUpload}
+    onCropComplete={onCropComplete}
+    onCropCancel={onCropCancel}
+  />
+  {#if $uiStore.currentStep === "text"}
+    <TextSection
+      {texts}
+      onTextAdd={onTextAdd}
+      onTextUpdate={onTextUpdate}
+      onTextDelete={onTextDelete}
+    />
+  {/if}
+</div>
+
+<style>
+  .main-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+</style>