Enhance news component functionality and UI; implement dynamic grid layout in PublicNews.vue, add visibility and expiration options in news management, and update API to handle new fields for improved news filtering and display.

components/PublicNews.vue

@@ -11,25 +11,27 @@
         </p>
       </div>
 
-      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-        <article
-          v-for="item in news"
-          :key="item.id"
-          class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:shadow-lg transition-shadow"
-        >
-          <div class="flex items-center text-sm text-gray-500 mb-3">
-            <Calendar :size="16" class="mr-2" />
-            {{ formatDate(item.created) }}
-          </div>
-          
-          <h3 class="text-xl font-display font-bold text-gray-900 mb-3">
-            {{ item.title }}
-          </h3>
-          
-          <p class="text-gray-700 line-clamp-3">
-            {{ item.content }}
-          </p>
-        </article>
+      <div class="flex justify-center">
+        <div class="grid gap-8" :class="getGridClass()">
+          <article
+            v-for="item in news"
+            :key="item.id"
+            class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:shadow-lg transition-shadow w-full max-w-sm flex flex-col"
+          >
+            <div class="flex items-center text-sm text-gray-500 mb-3">
+              <Calendar :size="16" class="mr-2" />
+              {{ formatDate(item.created) }}
+            </div>
+            
+            <h3 class="text-xl font-display font-bold text-gray-900 mb-3">
+              {{ item.title }}
+            </h3>
+            
+            <p class="text-gray-700 line-clamp-3 flex-grow">
+              {{ item.content }}
+            </p>
+          </article>
+        </div>
       </div>
     </div>
   </section>
@@ -60,6 +62,21 @@ const formatDate = (dateString) => {
   })
 }
 
+const getGridClass = () => {
+  const count = news.value.length
+  
+  if (count === 1) {
+    // Eine Kachel: Eine Spalte, zentriert
+    return 'grid-cols-1 place-items-center'
+  } else if (count === 2) {
+    // Zwei Kacheln: Zwei Spalten, zentriert, gleiche Höhe
+    return 'grid-cols-1 md:grid-cols-2 place-items-stretch'
+  } else {
+    // Drei oder mehr Kacheln: Normale Grid-Darstellung
+    return 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+  }
+}
+
 onMounted(() => {
   loadNews()
 })