initial commit

packages/frontend/components/yale/Button.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLButtonTypes } from '~/types/html-input-types';
+
+interface ButtonProps {
+    type?: HTMLButtonTypes
+    disabled?: boolean
+}
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+    type: 'button',
+    disabled: false
+})
+
+const emit = defineEmits([
+    'click'
+])
+
+const handleClick = () => {
+    emit('click');
+}
+</script>
+
+<template>
+    <button :type="props.type" :disabled="props.disabled" class="bg-stone-950 hover:bg-stone-900 p-2 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
+        @click="handleClick">
+        <slot></slot>
+    </button>
+</template>

packages/frontend/components/yale/FormInput.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLInputTypes } from '~/types/html-input-types';
+
+const props = defineProps<{
+    type: HTMLInputTypes
+    placeholder: string
+    modelValue: string
+}>();
+
+const emit = defineEmits([
+    'update:modelValue'
+])
+
+const handleInput = (event: Event) => {
+    // If input is a text input, emit the value
+    if (props.type === 'text' || props.type === 'password') {
+        emit('update:modelValue', (event.target as HTMLInputElement).value);
+    }
+}
+</script>
+
+<template>
+    <input class="bg-zinc-900 p-2 rounded-md" :type="props.type"
+        :value="props.modelValue" :placeholder="props.placeholder" @input="handleInput">
+</template>~/types/html-input-types

packages/frontend/components/yale/FormSelect.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const props = defineProps<{
+    options: Array<{ label: string; value: string }>,
+    placeholder: string, 
+    modelValue: string
+}>();
+
+const emit = defineEmits([
+    'update:modelValue'
+]);
+
+const handleSelect = (event: Event) => {
+    emit('update:modelValue', (event.target as HTMLSelectElement).value);
+};
+</script>
+
+<template>
+    <select class="bg-zinc-900 p-2 rounded-md" :value="props.modelValue" @change="handleSelect">
+        <!-- Placeholder as the first option -->
+        <option value="" disabled selected>{{ props.placeholder }}</option>
+        
+        <!-- Render options dynamically -->
+        <option v-for="option in props.options" :key="option.value" :value="option.value">
+            {{ option.label }}
+        </option>
+    </select>
+</template>

packages/frontend/components/yale/Panel.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const props = defineProps<{
+    heading?: string;
+}>();
+</script>
+
+<template>
+    <h2 v-if="props.heading" class="hr text-lg font-bold mb-2">{{ props.heading }}</h2>
+    <div class="rounded-md bg-zinc-800 p-2">
+        <slot></slot>
+    </div>
+</template>
+
+<style>
+.hr {
+    display: inline-block;
+}
+
+.hr::after {
+    content: '';
+    display: block;
+    border-top: 2px solid theme('colors.slate.300');
+    margin-top: .1rem;
+}
+</style>