Add CreateDeckView

Amend CSS
Correct auth callback

src/components/CardAttributes.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="flex flex-wrap gap-4 justify-center">
+    <Tag
+        :value="card.cardType"
+        :severity="getCardSeverity(card.cardType)"
+    />
+    <template v-if="isMonsterCard(card)">
+      <Tag
+          v-if="card.isPendulum"
+          value="PENDULUM"
+          :severity="getSeverityFromMonsterCardType(card.type)"
+      />
+      <Tag
+          :value="card.type"
+          :severity="getSeverityFromMonsterCardType(card.type)"
+      />
+      <Tag
+          v-for="subType in card.subTypes"
+          :value="subType"
+          severity="secondary"
+      />
+    </template>
+    <template v-if="isSpellCard(card)">
+      <Tag
+          :value="card.type"
+          :severity="getSeverityFromSpellCardType(card.type)"
+      />
+    </template>
+    <template v-if="isTrapCard(card)">
+      <Tag
+          :value="card.type"
+          :severity="getSeverityFromTrapCardType(card.type)"
+      />
+    </template>
+  </div>
+</template><
+
+<script setup lang="ts">
+import type {Ref} from "vue";
+import type {Card} from "@/api/openapi";
+import {
+  getCardSeverity,
+  getSeverityFromMonsterCardType, getSeverityFromSpellCardType, getSeverityFromTrapCardType,
+  isMonsterCard,
+  isSpellCard,
+  isTrapCard
+} from "@/util/card-type-util.ts";
+
+const card: Ref<Card> = defineModel({
+  required: true
+})
+</script>
+
+<style scoped>
+
+</style>>`