jan-henrik/respira
1
0
Fork 0
mirror of https://github.com/jhbruhn/respira.git synced 2026-01-27 10:23:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feature: Migrate PatternPreviewPlaceholder to shadcn Card

Browse source 
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>
This commit is contained in:
Jan-Henrik Bruhn 2025-12-20 20:05:13 +01:00
parent 93cca6d2d0
commit bb066d7775
1 changed files with 10 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/PatternPreviewPlaceholder.tsx
View file

@ -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>
);
}