WIP: Add OverviewCard

client/src/components/mediacenter/OverviewCard.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import * as log from 'loglevel';
+
+export interface Props {
+  title: string,
+  description: string,
+  call2Action: string,
+  link: string,
+  iconUrl: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  iconUrl: ''
+})
+
+</script>
+
+<template>
+  <div class="bg-white p-8 flex justify-between">
+    <div>
+      <h3 class="mb-4">{{title}}</h3>
+      <p class="mb-4">Finde alle Ressourcen der Handlungsfelder wie Lernmedien, Links und andere nützliche Informationen.</p>
+      <router-link
+        to="/mediacenter/overview"
+        class="inline-flex items-center font-normal"
+      >
+        <span class="inline">{{call2Action}}</span>
+        <it-icon-arrow-right class="ml-1 h-5 w-5"></it-icon-arrow-right>
+      </router-link>
+    </div>
+    <div
+      v-if="iconUrl"
+      :class="[`bg-[url('${iconUrl}')]`]"
+      class="bg-contain bg-no-repeat bg-right w-2/6 -mr-8">
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>

client/src/views/MediaMainView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import * as log from 'loglevel';
+import OverviewCard from '@/components/mediacenter/OverviewCard.vue';
 
 log.debug('MediaMainView created');
 
@@ -7,10 +8,17 @@ log.debug('MediaMainView created');
 
 <template>
   <div class="mx-auto max-w-5xl">
-    <div class="flex items-center justify-between">
+    <div class="flex items-center justify-between mb-10">
       <h1>Mediathek</h1>
       <div>Dropdown</div>
     </div>
+    <OverviewCard
+      title="Handlungsfelder"
+      call2-action="Anschauen"
+      link="/mediacenter/some"
+      description="Finde blablalba"
+      icon-url="/static/icons/icon-handlungsfelder-overview.svg">
+    </OverviewCard>
   </div>
 </template>