rewrite search tabbing

src/assets/scss/Global/index.scss

@@ -1,5 +1,6 @@
 @import "./app-grid.scss", "./controls.scss", "./inputs.scss",
-  "./scrollbars.scss", "./state.scss", "./variants.scss", "./basic.scss";
+  "./scrollbars.scss", "./state.scss", "./variants.scss", "./basic.scss",
+  "./search-tabheaders.scss";
 
 :root {
   --separator: #ffffff46;

src/assets/scss/Global/search-tabheaders.scss

@@ -0,0 +1,34 @@
+.tabheaders {
+  display: grid;
+  grid-template-columns: repeat(5, max-content);
+  justify-content: space-around;
+  margin: 1rem;
+  width: max-content;
+  background: linear-gradient(37deg, $gray1, $gray2, $gray1);
+  height: 2rem;
+
+  & > * {
+    border-left: solid 1px $gray3;
+  }
+
+  .tab {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+
+    cursor: pointer;
+    transition: all 0.3s ease;
+    padding: 0 $small;
+
+    &:first-child {
+      border-left: solid 1px transparent;
+    }
+  }
+
+  .activetab {
+    background-color: $darkblue;
+    transition: all 0.3s ease;
+    border-left: solid 1px transparent;
+  }
+}