v.0.0.6 AlbumCard

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tmp-app-creation",
-  "version": "0.0.0",
+  "version": "0.0.6",
   "private": true,
   "type": "module",
   "scripts": {

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>

src/assets/styles/global.css

@@ -3,7 +3,6 @@
 
 .card {
   border: 2px solid #333;
-  padding: 10px;
+  padding: 5px;
   border-radius: 10px;
-  margin: 10px;
 }

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>

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>