From 0d1d1fb24db9f5eceb1aa8be768fa5c31a9af46a Mon Sep 17 00:00:00 2001
From: tiijay <git@th-jahn.de>
Date: Fri, 18 Sep 2026 12:01:14 +0200
Subject: [PATCH] v.0.0.6 AlbumCard

---
 package.json                          |  2 +-
 src/App.vue                           |  8 ++------
 src/assets/styles/global.css          |  3 +--
 src/components/AlbumCard.vue          | 18 ++++++++++++++++++
 src/components/SecondVueComponent.vue | 16 +++-------------
 5 files changed, 25 insertions(+), 22 deletions(-)
 create mode 100644 src/components/AlbumCard.vue

diff --git a/package.json b/package.json
index f3cb7bd..d78c390 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tmp-app-creation",
-  "version": "0.0.0",
+  "version": "0.0.6",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/src/App.vue b/src/App.vue
index d718c2a..af413e2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,7 +10,7 @@ import type { Album } from "./types/album.ts";
 
 document.title = `${pkg.name} ${pkg.version}©2026`;
 
-const dummy_album: Album = {
+const sample_album: Album = {
   id: 1,
   title: "Dummy Title",
   userId: 4711,
@@ -24,11 +24,7 @@ const dummy_album: Album = {
   >
     <div class="container">
       <FirstVueComponent class="component-box-fade" />
-      <SecondVueComponent
-        msg="Moin TiiJay"
-        text_size="text-sm"
-        :album="dummy_album"
-      />
+      <SecondVueComponent :album="sample_album" />
       <FetchFromApi class="component-box-fade" />
     </div>
   </div>
diff --git a/src/assets/styles/global.css b/src/assets/styles/global.css
index 370eac9..c862d1a 100644
--- a/src/assets/styles/global.css
+++ b/src/assets/styles/global.css
@@ -3,7 +3,6 @@
 
 .card {
   border: 2px solid #333;
-  padding: 10px;
+  padding: 5px;
   border-radius: 10px;
-  margin: 10px;
 }
diff --git a/src/components/AlbumCard.vue b/src/components/AlbumCard.vue
new file mode 100644
index 0000000..f4a67c7
--- /dev/null
+++ b/src/components/AlbumCard.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { Album } from "@/types/album";
+
+defineProps({
+  album: {
+    type: Object as () => Album,
+    required: true,
+  },
+});
+</script>
+<template>
+  <div class="card">
+    <p class="font-light">{{ album.id }}</p>
+    <p class="font-light">{{ album.title }}</p>
+    <p class="font-light">{{ album.userId }}</p>
+  </div>
+</template>
+<style lang=""></style>
diff --git a/src/components/SecondVueComponent.vue b/src/components/SecondVueComponent.vue
index 6c0f8b5..5fffd7a 100644
--- a/src/components/SecondVueComponent.vue
+++ b/src/components/SecondVueComponent.vue
@@ -1,17 +1,10 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import type { Album } from "@/types/album";
+import AlbumCard from "@/components/AlbumCard.vue";
 
 const show_it = ref<boolean>(true);
 defineProps({
-  msg: {
-    type: String,
-    default: "Hello default World",
-  },
-  text_size: {
-    type: String as () => "text-sm" | "text-2xl" | "text-4xl",
-    default: "text-2xl",
-  },
   album: {
     type: Object as () => Album,
     required: true,
@@ -23,11 +16,8 @@ defineProps({
   <div
     class="m-2.5 w-1/3 rounded-2xl bg-linear-to-br from-emerald-200 to-emerald-500 border-2"
   >
-    <div class="p-1.5">
-      <p class="font-light" :class="text_size" v-if="show_it">{{ msg }}</p>
-      <p class="font-light">{{ album.id }}</p>
-      <p class="font-light">{{ album.title }}</p>
-      <p class="font-light">{{ album.userId }}</p>
+    <div class="p-1.5 flex flex-wrap gap-3">
+      <AlbumCard v-for="n in 6" :key="n" :album="album" />
     </div>
   </div>
 </template>