✨feature: Add prompt data to card layout

src/components/PromptCard.astro

@@ -1,10 +1,33 @@
 ---
-// PromptCard.astro
+const {
-const { title, description } = Astro.props;
+  title,
+  type,
+  description,
+  tags = [],
+  createdAt,
+  updatedAt
+} = Astro.props;
 ---
 
-<div class="border rounded p-4 shadow-sm">
+<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 ${
-  <p class="text-sm text-gray-300 mt-1">{description}</p>
+      type === 'System' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700'
+    }`}>
+      {type}
+    </span>
+  </div>
+
+  <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>

src/components/PromptList.astro

@@ -1,10 +1,36 @@
 ---
-// PromptList.astro
 import PromptCard from './PromptCard.astro';
+
+const prompts = [
+  {
+    title: "Summarize Document",
+    type: "System",
+    description: "Summarizes a document or long input using GPT-4.",
+    tags: ["summary", "long-form", "NLP"],
+    createdAt: "2025-06-01",
+    updatedAt: "2025-07-10"
+  },
+  {
+    title: "Translate Text",
+    type: "Task",
+    description: "Translate English text into French, Spanish, or Japanese.",
+    tags: ["translate", "language"],
+    createdAt: "2025-05-15",
+    updatedAt: "2025-06-22"
+  },
+  {
+    title: "Generate Code",
+    type: "Task",
+    description: "Generate Python or JavaScript functions from descriptions.",
+    tags: ["code", "generation", "devtools"],
+    createdAt: "2025-06-05",
+    updatedAt: "2025-07-01"
+  }
+];
 ---
 
 <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-  <PromptCard title="Summarize Document" description="Summarizes long text using GPT-4." />
+  {prompts.map(prompt => (
-  <PromptCard title="Translate Text" description="Translates input to French." />
+    <PromptCard {...prompt} />
-  <PromptCard title="Generate Code" description="Generates code based on user input." />
+  ))}
 </div>