From b9c84ee455e20db5d9b46f9df7bf3cf3a2aa9af5 Mon Sep 17 00:00:00 2001
From: typicalninja <65993466+typicalninja493@users.noreply.github.com>
Date: Mon, 11 Sep 2023 22:41:00 +0530
Subject: [PATCH] feat: options (test)

---
 src/components/commandList.svelte    | 14 ++------------
 src/components/commandOptions.svelte | 27 +++++++++++++++++++++++++++
 src/components/icons/Add.svelte      | 21 +++++++++++++++++++++
 src/routes/editor/+page.svelte       |  8 +++++---
 4 files changed, 55 insertions(+), 15 deletions(-)
 create mode 100644 src/components/commandOptions.svelte
 create mode 100644 src/components/icons/Add.svelte

diff --git a/src/components/commandList.svelte b/src/components/commandList.svelte
index 8d89728..b718786 100644
--- a/src/components/commandList.svelte
+++ b/src/components/commandList.svelte
@@ -16,6 +16,7 @@
 
 	import { fade } from 'svelte/transition';
 	import { sineIn } from 'svelte/easing'
+	import Add from './icons/Add.svelte';
 
 	// get basePath since same component can be used to get guild commands
 	export let basePath = '';
@@ -130,18 +131,7 @@
 		<div class="flex">
 			<!-- control Buttons -->
 			<button class="bg-primary-800 h-10 hover:bg-primary-700 px-2" on:click={addLink}>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="24"
-					height="24"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					class="text-green-500"><path d="M5 12h14" /><path d="M12 5v14" /></svg
-				>
+				<Add class="text-green-500" />
 			</button>
 			<button
 				on:click={refreshList}
diff --git a/src/components/commandOptions.svelte b/src/components/commandOptions.svelte
new file mode 100644
index 0000000..a069201
--- /dev/null
+++ b/src/components/commandOptions.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import Add from "./icons/Add.svelte";
+
+    interface Option {
+        type: number
+    }
+
+    let options = [] as Option[];
+
+    const addOption = () => {
+        options = options.concat([{ type: 1 }])
+    }
+</script>
+
+<div class="flex flex-col gap-2">
+    <div class="bg-primary-800 rounded-lg w-full p-2 h-12 flex items-center justify-between">
+        <span>Options</span>
+        <button on:click={addOption} type="button" class="bg-primary-800 h-10 hover:bg-primary-700 px-2">
+                <Add class="text-green-400" />
+        </button>
+    </div>
+    {#each options as option}
+        <div class="bg-primary-800 rounded-lg w-full p-2 h-12 flex items-center justify-between">
+            {option.type}
+        </div>
+    {/each}
+</div>
\ No newline at end of file
diff --git a/src/components/icons/Add.svelte b/src/components/icons/Add.svelte
new file mode 100644
index 0000000..3f59719
--- /dev/null
+++ b/src/components/icons/Add.svelte
@@ -0,0 +1,21 @@
+<script>
+    /**
+     Original icon by lucide.dev
+     */
+    let className = '';
+
+    export { className as class }
+</script>
+
+<svg
+class={className}
+xmlns="http://www.w3.org/2000/svg"
+width="24"
+height="24"
+viewBox="0 0 24 24"
+fill="none"
+stroke="currentColor"
+stroke-width="2"
+stroke-linecap="round"
+stroke-linejoin="round"><path d="M5 12h14" /><path d="M12 5v14" /></svg
+>
\ No newline at end of file
diff --git a/src/routes/editor/+page.svelte b/src/routes/editor/+page.svelte
index 8bc24ff..76cae02 100644
--- a/src/routes/editor/+page.svelte
+++ b/src/routes/editor/+page.svelte
@@ -2,6 +2,7 @@
 	import { browser } from '$app/environment';
 	import { base } from '$app/paths';
 	import { page } from '$app/stores';
+	import CommandOptions from '$components/commandOptions.svelte';
 	import Back from '$components/icons/Back.svelte';
 	import { fetchAPI } from '$lib/api';
 	import { discordIdRegex, typeToName, type DiscordInteraction } from '$lib/constants';
@@ -160,9 +161,9 @@
 				</label>
 			{/if}
 
-			<div class="w-full h-1 bg-primary-800 rounded-lg" />
 			<!-- Special properties -->
 			{#if $data.type === "1"}
+				<div class="w-full h-1 bg-primary-800 rounded-lg" />
 				<!-- Description form chat input interactions -->
 				<label for="description">Slash command Description</label>
 				<textarea
@@ -175,8 +176,9 @@
 				{#if $errors.description}
 					<span class="text-red-300 text-xs">{$errors.description}</span>
 				{/if}
-
-
+				<div class="w-full h-1 bg-primary-800 rounded-lg" />
+				<!-- Dynamic options creator -->
+				<CommandOptions />
 			{/if}
 
 			<button  disabled={editing && ($commandQuery.isLoading || $commandQuery.isError)} type="submit" class="bg-blurple-600 hover:bg-blurple-700 p-2 rounded-lg"