From 11815fc11979a873c846444231af4866fea14ce0 Mon Sep 17 00:00:00 2001 From: NicholaiVogel Date: Sun, 5 Oct 2025 16:41:40 -0600 Subject: [PATCH] feat: integrate library design with shadcn components and improved contrast - Integrated library-layouts.tsx design into main page.tsx - Replaced all custom styled elements with shadcn/ui components: * Button component with variants (outline, ghost, default) and sizes (sm, icon, icon-sm) * Input component for search field * Card and CardContent for image dropzone - Removed all inline styles in favor of Tailwind utility classes - Implemented proper shadcn semantic color tokens: * bg-background/text-foreground for main content * bg-muted/text-muted-foreground for secondary elements * Maintains warm creative palette with orange/amber accents - Improved accessibility with high contrast ratios - Added interactive features: * Library view with masonry grid layout * Collections view with grid layout * Expandable image search dropzone * View switching between Library and Collections - Follows shadcn best practices with no custom CSS variables - Supports automatic light/dark mode through shadcn tokens --- inspiration-engine/src/app/page.tsx | 394 +++++++++++++++++++++------- 1 file changed, 299 insertions(+), 95 deletions(-) diff --git a/inspiration-engine/src/app/page.tsx b/inspiration-engine/src/app/page.tsx index a932894..07ccabf 100644 --- a/inspiration-engine/src/app/page.tsx +++ b/inspiration-engine/src/app/page.tsx @@ -1,103 +1,307 @@ -import Image from "next/image"; +'use client'; + +import React, { useState } from 'react'; +import { Search, Grid, List, User, Plus, Image, Upload } from 'lucide-react'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Card, CardContent } from '@/components/ui/card'; export default function Home() { - return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
+ const [activeView, setActiveView] = useState('library'); + const [showDropzone, setShowDropzone] = useState(false); -
- - Vercel logomark - Deploy now - - - Read our docs - + // Mock data for library items + const mockItems = [ + { id: 1, height: 200, width: 'normal' }, + { id: 2, height: 280, width: 'wide' }, + { id: 3, height: 160, width: 'normal' }, + { id: 4, height: 240, width: 'normal' }, + { id: 5, height: 200, width: 'normal' }, + { id: 6, height: 300, width: 'wide' }, + { id: 7, height: 180, width: 'normal' }, + { id: 8, height: 220, width: 'normal' }, + { id: 9, height: 260, width: 'wide' }, + { id: 10, height: 190, width: 'normal' }, + { id: 11, height: 240, width: 'normal' }, + { id: 12, height: 200, width: 'wide' }, + { id: 13, height: 220, width: 'normal' }, + { id: 14, height: 180, width: 'normal' }, + { id: 15, height: 260, width: 'normal' }, + { id: 16, height: 200, width: 'wide' }, + { id: 17, height: 240, width: 'normal' }, + { id: 18, height: 180, width: 'normal' }, + ]; + + // Mock data for collections + const mockCollections = [ + { id: 1, name: 'Brand Identity', itemCount: 47 }, + { id: 2, name: 'UI Inspiration', itemCount: 132 }, + { id: 3, name: 'Typography', itemCount: 28 }, + { id: 4, name: 'Color Palettes', itemCount: 64 }, + { id: 5, name: 'Illustration', itemCount: 89 }, + { id: 6, name: 'Photography', itemCount: 156 }, + { id: 7, name: 'Web Design', itemCount: 93 }, + { id: 8, name: 'Motion Graphics', itemCount: 41 }, + ]; + + const LibraryView = () => ( + <> + {/* Compact Horizontal Filters Toolbar */} +
+ + + + + + + + + + + + +
+ + + 1,427 items + + + + + +
+ + {/* Main Content - Tightly Packed Masonry Grid */} +
+
+ {mockItems.map((item, index) => { + const colorClasses = [ + 'bg-orange-500', + 'bg-amber-400', + 'bg-stone-700', + 'bg-orange-600' + ]; + const itemColorClass = colorClasses[index % colorClasses.length]; + + return ( +
+
+ +
+
+ ); + })}
- + + ); + + const CollectionsView = () => ( + <> + {/* Collections Toolbar */} +
+
+

Your Collections

+ + {mockCollections.length} collections + +
+ + +
+ + {/* Collections Grid */} +
+
+ {mockCollections.map((collection, idx) => { + const colorClasses = [ + ['bg-orange-500', 'bg-amber-400', 'bg-orange-600', 'bg-orange-500'], + ['bg-amber-400', 'bg-orange-500', 'bg-amber-400', 'bg-orange-600'], + ['bg-orange-600', 'bg-orange-500', 'bg-amber-400', 'bg-orange-500'], + ['bg-orange-500', 'bg-orange-600', 'bg-amber-400', 'bg-orange-500'] + ]; + const previewColors = colorClasses[idx % colorClasses.length]; + + return ( +
+ {/* Collection Preview Grid */} +
+
+ {previewColors.map((colorClass, colorIdx) => ( +
+ ))} +
+ + {/* Hover Overlay with Info */} +
+

+ {collection.name} +

+
+ + {collection.itemCount} items +
+ +
+
+
+ ); + })} + + {/* Create New Collection Card */} +
+
+ +
+ + Create Collection + +
+
+
+ + ); + + return ( +
+ {/* Header */} +
+
+
INSPIRATION
+ + {/* Prominent Central Search with Image Toggle */} +
+
+ + +
+ +
+ + +
+ + {/* Expandable Image Search Dropzone */} + {showDropzone && ( +
+ + + +

+ Drop your image to search +

+

+ Drag and drop, or click to browse +

+
+ + +
+ + +
+ )} +
+ + {/* Active View */} + {activeView === 'library' ? : }
); }