3 files changed, 150 insertions, 0 deletions
diff --git a/src/components/Control/Button.vue b/src/components/Control/Button.vue
new file mode 100644
index 0000000..044cca1
--- /dev/null
+++ b/src/components/Control/Button.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+defineProps({
+  type: {
+    type: String,
+    required: false,    
+    default: 'text',
+  },
+  label: String,
+  icon: Array<String>,
+});
+</script>
+
+<template>
+  <a id="button" :class="{text: type === 'text', solid: type === 'solid'}" >
+    <font-awesome-icon :icon="icon" />
+    {{ label }}
+  </a>
+</template>
+
+<style scoped>
+#button {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  user-select: none;
+}
+    
+.text {
+  background-color: transparent;
+  color: var(--color-text-primary);
+  transition: color 0.3s;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.solid {
+  background-color: var(--color-primary);
+  transition: background-color 0.3s;
+  color: var(--color-text);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.text:hover {
+  color: var(--color-primary-dark);
+}
+
+.solid:hover {
+  background-color: var(--color-primary-dark);
+}
+    
+</style>
+\ No newline at end of file
diff --git a/src/components/Control/Checkbox.vue b/src/components/Control/Checkbox.vue
new file mode 100644
index 0000000..e0325e7
--- /dev/null
+++ b/src/components/Control/Checkbox.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const model = defineModel();
+
+defineProps({
+  id: String,
+  label: String,
+  description: String,
+});
+
+</script>
+
+<template>
+  <div class="checkbox">
+    <label id="wrapper" :for="id">
+      <input :id="id" type="checkbox" v-model="model" />
+      <span id="label">{{ label }}</span>
+      <span id="description">{{ description }}</span>
+    </label>
+  </div>
+</template>
+
+<style scoped>
+#label {
+  display: block;
+  font-weight: bold;
+}
+
+#description {
+  display: block;
+  font-size: 0.8em;
+}
+
+input {
+  float: left;
+  margin: 5px 0 0 -20px;
+}
+
+.checkbox {
+  padding: 0 0 0 20px;
+}
+
+</style>
+\ No newline at end of file
diff --git a/src/components/Control/TrueFalseSwitch.vue b/src/components/Control/TrueFalseSwitch.vue
new file mode 100644
index 0000000..a0a3392
--- /dev/null
+++ b/src/components/Control/TrueFalseSwitch.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps<{
+  value: boolean;
+}>();
+const emit = defineEmits(['update']);
+
+const value = ref(props.value);
+
+const invert = () => {
+  value.value = !value.value;
+  emit('update', value.value);
+};
+</script>
+
+<template>
+  <div class="switch" @click="invert">
+    <span v-if="value" class="true"><font-awesome-icon :icon="['fas', 'fa-check']" /> True</span>
+    <span v-else class="false"><font-awesome-icon :icon="['fas', 'fa-xmark']" /> False</span>
+  </div>
+</template>
+
+<style scoped>
+.switch {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  align-items: center;
+  padding: 0.5rem;
+  user-select: none;
+  transition: background-color 0.3s;
+  background-color: var(--color-background-soft);
+  
+  span {
+    font-family: monospace;
+    font-size: 0.8rem;
+  }
+  
+  .true {
+    color: var(--color-text-primary);
+  }
+
+  .false {
+    color: var(--color-false);
+  }
+  
+  &:hover {
+    background-color: var(--color-hover);
+  }
+}
+
+</style>
+\ No newline at end of file