Added extra fonts, started button reusable component

src/app/shared/ui/button/button.component.css

@@ -0,0 +1,4 @@
+.button-hover:hover {
+  background-color: var(--color-nier-dark);
+  color: var(--color-nier-text-light);
+}

src/app/shared/ui/button/button.component.html

@@ -1,2 +1,6 @@
-<button [class]="getButtonClass()"
-  (onClick)="handleClick()">{{label()}}</button>
+<button
+  class="w-48 text-left font-noto-jp text-base uppercase transition-all duration-300 bg-nier-mid text-nier-dark rounded-none button-hover p-1.5"
+  (click)="handleClick()"
+>
+  {{ label() }}
+</button>

src/app/shared/ui/button/button.component.ts

@@ -8,23 +8,8 @@ import { Component, input, output } from '@angular/core';
 })
 export class ButtonComponent {
   label = input<string>('label');
-  selected = input<boolean>(false);
-  isNav = input<boolean>(false);
   onClick = output<void>();
 
-  getButtonClass() {
-    const baseClass =
-      'font-terminal-retro uppercase transition-all duration-300';
-
-    if (this.isNav()) {
-      return `${baseClass} bg-transparent text-nier-text-dark border-0 hover:underline`;
-    }
-
-    return this.selected()
-      ? `${baseClass} bg-nier-dark text-nier-text-light border border-nier-border rounded-none`
-      : `${baseClass} bg-nier-mid text-nier-text-dark border border-nier-border rounded-none hover:bg-nier-dark hover:text-nier-text-light`;
-  }
-
   handleClick() {
     this.onClick.emit();
   }