From c8d56fe0b237198346df91e37ea73ad393bc7489 Mon Sep 17 00:00:00 2001
From: Yasin Silavi <ys.silavi@gmail.com>
Date: Tue, 29 Nov 2022 23:55:32 +0330
Subject: [PATCH] feat: add reusable button and input components

---
 frontend/src/components/Button.vue | 71 ++++++++++++++++++++++++++++++
 frontend/src/components/Input.vue  | 39 ++++++++++++++++
 2 files changed, 110 insertions(+)
 create mode 100644 frontend/src/components/Button.vue
 create mode 100644 frontend/src/components/Input.vue

diff --git a/frontend/src/components/Button.vue b/frontend/src/components/Button.vue
new file mode 100644
index 00000000..53e44a06
--- /dev/null
+++ b/frontend/src/components/Button.vue
@@ -0,0 +1,71 @@
+<template>
+  <button :class="classes" @click="$emit('click')">
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+export default {
+  name: "Button",
+
+  props: {
+    type: {
+      type: String,
+      default: "primary",
+      validator: (value) => ["primary", "secondary", "link"].includes(value),
+    },
+
+    size: {
+      type: String,
+      default: "normal",
+      validator: (value) => ["none", "normal", "large"].includes(value),
+    },
+
+    fullWidth: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    classes() {
+      return [
+        `app-button app-button--${this.type} app-button--${this.size}`,
+        { "app-button--full-width": this.fullWidth },
+        { "app-button--loading": this.loading },
+      ];
+    },
+  },
+};
+</script>
+
+<style scoped>
+.app-button {
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+  padding: 0.5em 1em;
+  border-radius: 0.1em;
+  transition: background-color 0.3s ease;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
+}
+
+.app-button:hover {
+  background-color: var(--dark-blue);
+}
+
+.app-button--primary {
+  color: #ffffff;
+  background-color: var(--blue);
+}
+
+.app-button--normal {
+  height: 3rem;
+  border-radius: 0.5rem;
+}
+
+.app-button--full-width {
+  width: 100%;
+}
+</style>
diff --git a/frontend/src/components/Input.vue b/frontend/src/components/Input.vue
new file mode 100644
index 00000000..75f921cf
--- /dev/null
+++ b/frontend/src/components/Input.vue
@@ -0,0 +1,39 @@
+<template>
+  <input :type="type" class="app-input" @input="handleInput" />
+</template>
+
+<script>
+export default {
+  name: "Input",
+
+  props: {
+    type: {
+      type: String,
+      default: "text",
+    },
+  },
+
+  methods: {
+    handleInput(e) {
+      this.$emit("input", e.target.value);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.app-input {
+  margin: 0;
+  height: 48px;
+  outline: none;
+  padding: 0 1rem;
+  color: #333333;
+  border-radius: 0.5rem;
+  transition: border 0.3s ease;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.app-input:is(:hover, :focus) {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+}
+</style>