AltitudeWeb/frontend/src/app/bans/bans.component.html

<ng-container>
  <app-header [current_page]="'bans'" height="200px" background_image="/public/img/backgrounds/staff.png"
              [overlay_gradient]="0.5">>
    <div class="title" header-content>
      <h1>Punishment History</h1>
    </div>
  </app-header>

  <div class="darkmodeSection">
    <div class="columnSection">
      <div class="columnContainer">
        <button (click)="punishmentType = 'all'">all</button>
        <button (click)="punishmentType = 'ban'">bans</button>
        <button (click)="punishmentType = 'mute'">mutes</button>
        <button (click)="punishmentType = 'warn'">warnings</button>
      </div>
      <div class="columnContainer">
        <app-history [userType]="userType" [punishmentType]="punishmentType"></app-history>
      </div>
    </div>
  </div>
</ng-container>