✨feature: Add prompt data to card layout

src/components/PromptCard.astro

@@ -1,10 +1,33 @@
 ---
-// PromptCard.astro
-const { title, description } = Astro.props;
+const {
+  title,
+  type,
+  description,
+  tags = [],
+  createdAt,
+  updatedAt
+} = Astro.props;
 ---
 
-<div class="border rounded p-4 shadow-sm">
-  <h3 class="text-lg font-semibold">{title}</h3>
+<div class="border rounded p-4 bg-gray-400 text-gray-800 shadow-sm flex flex-col gap-2">
+  <div class="flex items-center justify-between">
+    <h3 class="text-lg font-semibold">{title}</h3>
+    <span class={`text-xs font-medium px-2 py-1 rounded ${
+      type === 'System' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700'
+    }`}>
+      {type}
+    </span>
+  </div>
 
-  <p class="text-sm text-gray-300 mt-1">{description}</p>
+  <p class="text-sm text-gray-700">{description}</p>
+
+  <div class="flex flex-wrap gap-2 mt-2">
+    {tags.map(tag => (
+      <span class="text-xs bg-gray-200 text-gray-800 px-2 py-0.5 rounded">{tag}</span>
+    ))}
+  </div>
+
+  <div class="text-xs text-gray-800 mt-auto pt-2 border-t">
+    Created: {createdAt} • Updated: {updatedAt}
+  </div>
 </div>