init source

components/AppButton.vue

@@ -0,0 +1,88 @@
+<template>
+  <button
+    :class="['app-button', variant, size]"
+    :disabled="disabled"
+    @click="$emit('click')"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  variant?: "primary" | "secondary" | "danger";
+  size?: "small" | "medium" | "large";
+  disabled?: boolean;
+}
+
+interface Emits {
+  click: [];
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: "primary",
+  size: "medium",
+  disabled: false,
+});
+
+defineEmits<Emits>();
+</script>
+
+<style scoped>
+.app-button {
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.app-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Variants */
+.primary {
+  background-color: #00dc82;
+  color: white;
+}
+
+.primary:hover:not(:disabled) {
+  background-color: #00b368;
+}
+
+.secondary {
+  background-color: #6c757d;
+  color: white;
+}
+
+.secondary:hover:not(:disabled) {
+  background-color: #5a6268;
+}
+
+.danger {
+  background-color: #dc3545;
+  color: white;
+}
+
+.danger:hover:not(:disabled) {
+  background-color: #c82333;
+}
+
+/* Sizes */
+.small {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+}
+
+.medium {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+}
+
+.large {
+  padding: 1rem 2rem;
+  font-size: 1.125rem;
+}
+</style>