From bb066d7775eabad983f6ddd65fb7ed634dbea5f3 Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Sat, 20 Dec 2025 20:05:13 +0100
Subject: [PATCH] feature: Migrate PatternPreviewPlaceholder to shadcn Card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Migrated PatternPreviewPlaceholder component to use shadcn Card, CardHeader, and CardTitle components for consistent styling with other card-based components.

Changes:
- Replaced outer div with shadcn Card component
- Migrated header to use CardHeader and CardTitle
- Wrapped content in CardContent
- Applied consistent Card padding (p-0 gap-0)
- Maintained header border separator styling

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/PatternPreviewPlaceholder.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/PatternPreviewPlaceholder.tsx b/src/components/PatternPreviewPlaceholder.tsx
index 9b13cad..6e4cb01 100644
--- a/src/components/PatternPreviewPlaceholder.tsx
+++ b/src/components/PatternPreviewPlaceholder.tsx
@@ -1,10 +1,13 @@
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+
 export function PatternPreviewPlaceholder() {
   return (
-    <div className="lg:h-full bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md animate-fadeIn flex flex-col">
-      <h2 className="text-base lg:text-lg font-semibold mb-4 pb-2 border-b-2 border-gray-300 dark:border-gray-600 dark:text-white flex-shrink-0">
-        Pattern Preview
-      </h2>
-      <div className="h-[400px] sm:h-[500px] lg:flex-1 flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 relative overflow-hidden">
+    <Card className="p-0 gap-0 lg:h-full animate-fadeIn flex flex-col">
+      <CardHeader className="p-6 pb-4 border-b-2 border-gray-300 dark:border-gray-600">
+        <CardTitle className="text-base lg:text-lg">Pattern Preview</CardTitle>
+      </CardHeader>
+      <CardContent className="p-6 flex-1 flex flex-col">
+        <div className="h-[400px] sm:h-[500px] lg:flex-1 flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 relative overflow-hidden">
         {/* Decorative background pattern */}
         <div className="absolute inset-0 opacity-5 dark:opacity-10">
           <div className="absolute top-10 left-10 w-32 h-32 border-4 border-gray-400 dark:border-gray-500 rounded-full"></div>
@@ -66,6 +69,7 @@ export function PatternPreviewPlaceholder() {
           </div>
         </div>
       </div>
-    </div>
+      </CardContent>
+    </Card>
   );
 }