-
diff --git a/src/components/Editor/Code.vue b/src/components/Editor/Code.vue
new file mode 100644
index 0000000..4d63805
--- /dev/null
+++ b/src/components/Editor/Code.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
diff --git a/src/components/Editor/Editor.vue b/src/components/Editor/Editor.vue
new file mode 100644
index 0000000..834b462
--- /dev/null
+++ b/src/components/Editor/Editor.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Editor/Monaco.vue b/src/components/Editor/Monaco.vue
new file mode 100644
index 0000000..ebfc903
--- /dev/null
+++ b/src/components/Editor/Monaco.vue
@@ -0,0 +1,82 @@
+
+
+
+
+
diff --git a/src/components/Editor/Output.vue b/src/components/Editor/Output.vue
new file mode 100644
index 0000000..5c0244c
--- /dev/null
+++ b/src/components/Editor/Output.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Header/Switch.vue b/src/components/Header/Switch.vue
index 4c22a9a..bd151a5 100644
--- a/src/components/Header/Switch.vue
+++ b/src/components/Header/Switch.vue
@@ -45,7 +45,7 @@ const toggleDark = useToggle(isDark);
diff --git a/src/components/Sidebar/Lint.vue b/src/components/Sidebar/Lint.vue
index af237f7..a47b43e 100644
--- a/src/components/Sidebar/Lint.vue
+++ b/src/components/Sidebar/Lint.vue
@@ -1,10 +1,22 @@
-
Lint
-
+
Lint Options
+
diff --git a/src/components/Sidebar/Sidebar.vue b/src/components/Sidebar/Sidebar.vue
index fe4bb95..647df5f 100644
--- a/src/components/Sidebar/Sidebar.vue
+++ b/src/components/Sidebar/Sidebar.vue
@@ -1,7 +1,10 @@
@@ -9,7 +12,7 @@ import Syntax from "./Syntax.vue";
class="hidden pc:block w-52 h-screen px-8 box-content bg-[#f6f6f7] dark:bg-[#161618]"
>
-
-
+
+
diff --git a/src/components/Sidebar/Syntax.vue b/src/components/Sidebar/Syntax.vue
index b56e0cb..427467d 100644
--- a/src/components/Sidebar/Syntax.vue
+++ b/src/components/Sidebar/Syntax.vue
@@ -2,6 +2,29 @@
import { capitalize } from "vue";
import Checkbox from "../ui/Checkbox.vue";
import Select from "../ui/Select.vue";
+
+const props = defineProps(["syntaxState"]);
+const emit = defineEmits(["update:syntaxState"]);
+
+function changeSourceType(sourceType: string) {
+ props.syntaxState.sourceType = sourceType;
+}
+
+function changeLanguage(language: string) {
+ props.syntaxState.language = language;
+}
+
+function checkedJSX(checked: boolean) {
+ props.syntaxState.jsx = checked;
+}
+
+function checkedTSX(checked: boolean) {
+ props.syntaxState.tsx = checked;
+}
+
+function checkedDTS(checked: boolean) {
+ props.syntaxState.dts = checked;
+}