[#10] add gear icons to page header

buggregator · Aug 26, 2023 · 6e29eb3 · 6e29eb3
1 parent 5d61b41
commit 6e29eb3
Showing 1 changed file with 34 additions and 10 deletions.
diff --git a/components/PageHeader/PageHeader.vue b/components/PageHeader/PageHeader.vue
@@ -1,21 +1,33 @@
 <template>
   <header class="page-header">
-    <div class="page-header__title"><slot />&nbsp</div>
-
-    <button
-      v-if="buttonTitle"
-      class="page-header__btn-clear"
-      @click="buttonClick"
-    >
-      {{ buttonTitle }}
-    </button>
+    <div class="page-header__title"><slot />&nbsp;</div>
+
+    <div class="page-header__controls">
+      <button class="page-header__btn-icon" @click="handleClickGear">
+        <IconSvg name="gear" />
+      </button>
+
+      <button class="page-header__btn-icon" @click="handleClickFilter">
+        <IconSvg name="gear" />
+      </button>
+
+      <button
+        v-if="buttonTitle"
+        class="page-header__btn-clear"
+        @click="handleClear"
+      >
+        {{ buttonTitle }}
+      </button>
+    </div>
   </header>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import IconSvg from "~/components/IconSvg/IconSvg.vue";
 
 export default defineComponent({
+  components: { IconSvg },
   props: {
     title: {
       type: String,
@@ -32,9 +44,11 @@ export default defineComponent({
     },
   },
   methods: {
-    buttonClick() {
+    handleClear() {
       this.$emit("delete", true);
     },
+    handleClickGear() {},
+    handleClickFilter() {},
   },
 });
 </script>
@@ -47,7 +61,17 @@ export default defineComponent({
 .page-header__title {
 }
 
+.page-header__controls {
+  @apply flex flex-row;
+}
+
 .page-header__btn-clear {
   @apply px-3 py-1 text-xs bg-red-800 text-white rounded-sm hover:bg-red-700 transition transition-all duration-300;
 }
+
+.page-header__btn-icon {
+  @apply transition transition-all duration-300 fill-current text-white mr-3 hover:text-blue-500 transition-all duration-300;
+
+  width: 24px;
+}
 </style>