Add more logos

src/App.vue

@@ -5,6 +5,7 @@ import { useCards } from '@/stores/cards.ts'
 import { ref } from 'vue'
 import {
   VaButton,
+  VaButtonToggle,
   VaCard,
   VaCardContent,
   VaColorInput,
@@ -25,6 +26,12 @@ function presetChange(card: CardT, preset: keyof typeof presets | 'none') {
 const active = ref(-1)
 
 const print = () => window.print()
+
+const logoOptions = [
+  { label: 'Logo 3', value: '3' },
+  { label: 'Logo 4', value: '4' },
+  { label: 'No Logo', value: '' },
+]
 </script>
 
 <template>
@@ -43,6 +50,15 @@ const print = () => window.print()
       >
         <VaCardContent class="flex flex-col gap-4">
           <VaInput v-model="card.title" :label="`Title Card ${i + 1}`" clearable />
+          <p>Logo type</p>
+          <VaButtonToggle
+            v-model="card.type"
+            :label="`type ${i + 1}`"
+            preset="secondary"
+            border-color="primary"
+            :options="logoOptions"
+            grow
+          />
           <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
             <VaInput v-model="card.name" label="Name" class="col-span-2" clearable />
             <VaCounter

src/colors.ts

@@ -1,6 +1,7 @@
-export type Preset = Pick<CardT, 'color' | 'bgColor' | 'textColor' | 'nameColor' | 'title'>
+export type Preset = Pick<CardT, 'type' | 'color' | 'bgColor' | 'textColor' | 'nameColor' | 'title'>
 export const presets = {
   default: {
+    type: '4',
     bgColor: '#000000',
     color: '#ffffff',
     textColor: '#ffffff',
@@ -8,13 +9,31 @@ export const presets = {
     title: 'Fachschaft 4',
   },
   inverted: {
+    type: '4',
     bgColor: '#ffffff',
     color: '#000000',
     textColor: '#000000',
     nameColor: '#ffffff',
     title: 'Fachschaft 4',
   },
+  inverted3: {
+    type: '3',
+    bgColor: '#ffffff',
+    color: '#000000',
+    textColor: '#000000',
+    nameColor: '#ffffff',
+    title: 'Fachschaft 3',
+  },
   helping: {
+    type: '4',
+    bgColor: '#000000',
+    color: '#ffffff',
+    textColor: '#ffffff',
+    nameColor: '#000000',
+    title: 'Helping Hand',
+  },
+  helping3: {
+    type: '3',
     bgColor: '#000000',
     color: '#ffffff',
     textColor: '#ffffff',
@@ -22,26 +41,13 @@ export const presets = {
     title: 'Helping Hand',
   },
   awareness: {
+    type: '4',
     bgColor: '#3e1c59',
     color: '#6f309f',
     textColor: '#ffffff',
     nameColor: '#ffffff',
     title: 'Awareness',
   },
-  awareness2: {
-    bgColor: '#5a5a5a',
-    color: '#4a4a4a',
-    textColor: '#ffffff',
-    nameColor: '#ffffff',
-    title: 'Awareness',
-  },
-  security: {
-    bgColor: '#8d851c',
-    color: '#e8db0b',
-    textColor: '#000000',
-    nameColor: '#000000',
-    title: 'Security',
-  },
   // TODO: add new types
 } satisfies Record<string, Preset>
 
@@ -50,6 +56,7 @@ export function validPreset(key: string): key is keyof typeof presets {
 }
 
 export type CardT = {
+  type: string
   title: string
   color: string
   bgColor: string

src/components/NoLogo.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg
+    id="nologo"
+    width="1000"
+    height="1000"
+    viewBox="0 0 1000 999.99996"
+    xmlns="http://www.w3.org/2000/svg"
+    class="w-14 h-14 ml-4"
+  ></svg>
+</template>

src/components/card.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import Logo from '@/components/logo.vue'
+import Logo4 from '@/components/logo4.vue'
+import Logo3 from '@/components/logo3.vue'
 import type { CardT } from '@/colors.ts'
+import NoLogo from '@/components/NoLogo.vue'
 
 const card = defineModel<CardT>({ required: true })
 const props = defineProps<{
@@ -18,7 +20,9 @@ const props = defineProps<{
       class="h-14 bg-gray-600 flex flex-row space-between align-center relative"
       :style="{ backgroundColor: card.bgColor }"
     >
-      <logo class="absolute top-0 left-0" :color="card.textColor" />
+      <logo3 v-if="card.type === '3'" class="absolute top-0 left-0" :color="card.textColor" />
+      <logo4 v-else-if="card.type === '4'" class="absolute top-0 left-0" :color="card.textColor" />
+      <no-logo v-else class="absolute top-0 left-0" />
       <p
         class="text-center w-full mx-16 align-center h-fit my-auto text-white text-5xl font-bold eng font-medium pt-3"
         :style="{ color: card.textColor }"