init

1 files changed, 40 insertions, 0 deletions

diff --git a/src/components/LeftPanel.svelte b/src/components/LeftPanel.svelte
new file mode 100644
index 0000000..e05f42d
--- /dev/null
+++ b/src/components/LeftPanel.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+    let leftPanelCardId = $state();
+    let leftPanelCardDesc = $state("");
+</script>
+
+<div class="left-panel">
+    <div class="card-preview">
+        <div class="card-image-large">
+            {#if leftPanelCardId}
+                <img height="100%" src="https://cdn.233.momobako.com/ygopro/pics/{leftPanelCardId}.jpg" alt="card img">
+            {/if}
+        </div>
+        <div class="card-description">
+            <pre>{leftPanelCardDesc}</pre>
+        </div>
+    </div>
+</div>
+
+<style>
+
+.left-panel {
+    width: 25%;
+    padding: 20px;
+    background-color: #f5f5f5;
+}
+
+.card-image-large {
+    height: 400px;
+    text-align: center;
+    background-color: #ddd;
+    margin-bottom: 20px;
+    border-radius: 8px;
+}
+
+.card-description {
+    line-height: 1.6;
+    font-size: 14px;
+}
+
+</style>