From 81e56ef6a0ff24a68c8070d38a67e57dec8a0835 Mon Sep 17 00:00:00 2001 From: iamkiddy Date: Tue, 29 Apr 2025 13:54:37 +0000 Subject: [PATCH] Refactor UI components for improved responsiveness and styling consistency - Updated SearchBar component to use max-width and height utilities for better responsiveness. - Adjusted ArtistsPage layout to include container for consistent padding and spacing. - Modified BestSeller and NewRelease components to use grid layout for better item arrangement. - Enhanced Frame component layout and styling for improved visual hierarchy. - Refined HomeBanner component for better spacing and text sizing. - Improved Navbar component with mobile menu functionality and responsive design. - Updated RecentDesign and SideNav components for better mobile experience and layout. - Enhanced Sidebar component with mobile menu toggle and improved navigation links. - Refactored marketplace Navbar to include mobile menu and improved layout for icons and buttons. --- app/creator/(home)/layout.tsx | 16 ++-- .../artists/_components/Artist_Content.tsx | 36 ++++---- .../artists/_components/Quick_Actions.tsx | 47 +++++++--- .../artists/_components/SearchBar.tsx | 8 +- app/marketplace/artists/page.tsx | 14 +-- components/custom/Best_Seller.tsx | 25 +++--- components/custom/Frame.tsx | 38 ++++---- components/custom/Home_Banner.tsx | 18 ++-- components/custom/Nav_bar.tsx | 40 ++++++--- components/custom/New_Release.tsx | 24 ++--- components/custom/Play_Ground.tsx | 2 +- components/custom/Recent_Design.tsx | 58 +++++++------ components/custom/Side_Nav.tsx | 21 +++-- components/custom/Side_bar.tsx | 57 +++++++++--- components/custom/marketplace_Navbar.tsx | 87 ++++++++++++++++--- 15 files changed, 318 insertions(+), 173 deletions(-) diff --git a/app/creator/(home)/layout.tsx b/app/creator/(home)/layout.tsx index 51d1209..15811bd 100644 --- a/app/creator/(home)/layout.tsx +++ b/app/creator/(home)/layout.tsx @@ -1,3 +1,6 @@ +'use client' + +import { useState } from "react"; import SideNav from "@/components/custom/Side_Nav"; import Navbar from "@/components/custom/Nav_bar"; @@ -6,17 +9,18 @@ export default function CreatorLayout({ }: Readonly<{ children: React.ReactNode; }>) { + const [drawerOpen, setDrawerOpen] = useState(false); return (
-
- +
+
-
-
- +
+
+
-
{children}
+
{children}
diff --git a/app/marketplace/artists/_components/Artist_Content.tsx b/app/marketplace/artists/_components/Artist_Content.tsx index a45e91a..01d6b59 100644 --- a/app/marketplace/artists/_components/Artist_Content.tsx +++ b/app/marketplace/artists/_components/Artist_Content.tsx @@ -115,34 +115,34 @@ const mockItems = [ export default function ArtistContent() { return (
-
-
+
+
{/* Header with greeting and filters inside a card */} -
+
{/* Greeting */} -
- Hi Daphne, - recommendations for you +
+ Hi Daphne, + recommendations for you
{/* Filter Chips */} -
+
{['Images','Videos','Audios','Fonts','Gifs','Graphics'].map((filter) => ( -
-
+
{mockItems.map((item, idx) => (
{/* Image */} -
+
{item.title} {/* Card content */} -
+
- {item.title} + {item.title}
- In{' '} - {item.type} + In{' '} + {item.type} - ${item.price.toFixed(2)} + ${item.price.toFixed(2)}
diff --git a/app/marketplace/artists/_components/Quick_Actions.tsx b/app/marketplace/artists/_components/Quick_Actions.tsx index 94253ee..4cf3143 100644 --- a/app/marketplace/artists/_components/Quick_Actions.tsx +++ b/app/marketplace/artists/_components/Quick_Actions.tsx @@ -39,31 +39,54 @@ export default function QuickActions() {
{/* Top linear gradient image bar */}
- Gradient Bar + Gradient Bar
-
-
- Logo +
+
+ Logo
-
+
{quickActions.map((action, idx) => (
- {action.title} -
{action.subtitle}
-
{action.title}
-
diff --git a/app/marketplace/artists/_components/SearchBar.tsx b/app/marketplace/artists/_components/SearchBar.tsx index 2817253..eb547a3 100644 --- a/app/marketplace/artists/_components/SearchBar.tsx +++ b/app/marketplace/artists/_components/SearchBar.tsx @@ -3,11 +3,8 @@ import { Search } from 'lucide-react'; export default function SearchBar() { return ( -
-
+
+
@@ -17,7 +14,6 @@ export default function SearchBar() { type="text" className="flex-1 bg-transparent outline-none text-gray-700 placeholder-gray-400 border-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 h-full" placeholder="Search images, videos, fonts, graphics and more" - style={{ height: 48 }} />
diff --git a/app/marketplace/artists/page.tsx b/app/marketplace/artists/page.tsx index 6fd93b0..826ba94 100644 --- a/app/marketplace/artists/page.tsx +++ b/app/marketplace/artists/page.tsx @@ -4,13 +4,15 @@ import SearchBar from './_components/SearchBar'; export default function ArtistsPage() { return ( -
- - {/* Overlapping SearchBar */} -
- +
+
+ + {/* Overlapping SearchBar */} +
+ +
+
-
); } \ No newline at end of file diff --git a/components/custom/Best_Seller.tsx b/components/custom/Best_Seller.tsx index 1f2a080..4b5f2a2 100644 --- a/components/custom/Best_Seller.tsx +++ b/components/custom/Best_Seller.tsx @@ -49,35 +49,36 @@ const books = [ export default function BestSeller() { return ( -
+
-

Best Sellers

- See more +

Best Sellers

+ See more
-
-
+
+
{books.map((book) => ( -
-
+
+
{book.title}
-
+
- {book.title} + {book.title}
- {book.author} - {book.price} + {book.author} + {book.price}
diff --git a/components/custom/Frame.tsx b/components/custom/Frame.tsx index b7b6140..348937e 100644 --- a/components/custom/Frame.tsx +++ b/components/custom/Frame.tsx @@ -26,10 +26,9 @@ export default function Frame() { const totalPages = cards.length + 1; return ( -
- -
- Page 1/{totalPages} +
+
+ Page 1/{totalPages}
- -
- -
-
- Excerpt Card +
+
+
+ Excerpt Card
- {cards.map((card, index) => ( -
+
- Page {index + 2}/{totalPages} + Page {index + 2}/{totalPages}
-
+
))} - -
+
diff --git a/components/custom/Home_Banner.tsx b/components/custom/Home_Banner.tsx index 9e9bf57..df95d53 100644 --- a/components/custom/Home_Banner.tsx +++ b/components/custom/Home_Banner.tsx @@ -4,18 +4,18 @@ import Image from "next/image"; export default function HomeBanner() { return (
-
-
+
+
{/* Left: Text Content */} -
-

+
+

1000 BLACK UMBRELLAS

-

+

Poems of absolute nakedness that chase the power of love. Daniel McGinn is
one of the most admired poets in the underground American poetry scene.

{/* Right: Book Cover */} -
+
1000 Black Umbrellas Book Cover diff --git a/components/custom/Nav_bar.tsx b/components/custom/Nav_bar.tsx index 876a59a..c2b4a0e 100644 --- a/components/custom/Nav_bar.tsx +++ b/components/custom/Nav_bar.tsx @@ -1,30 +1,42 @@ -import { Bell } from 'lucide-react'; +import { Bell, Menu } from 'lucide-react'; import { Search } from 'lucide-react'; import { Input } from '@/components/ui/input'; +import { Dispatch, SetStateAction } from 'react'; -export default function Navbar() { +export default function Navbar({ setDrawerOpen }: { setDrawerOpen?: Dispatch> }) { return ( -
-
-
- +
+ {/* Hamburger menu for mobile */} + {setDrawerOpen && ( + + )} + {/* Search bar: hidden on mobile, visible on sm and up */} +
+
+
-
-
- - +
+
+ +
-
-
+
+
D
-
+
+
diff --git a/components/custom/New_Release.tsx b/components/custom/New_Release.tsx index e984b0d..5676715 100644 --- a/components/custom/New_Release.tsx +++ b/components/custom/New_Release.tsx @@ -49,17 +49,17 @@ const books = [ export default function NewRelease() { return ( -
+
-

New Release

- See more +

New Release

+ See more
-
-
+
+
{books.map((book) => ( -
-
+
+
{book.title}
-
+
- {book.title} + {book.title}
- {book.author} - {book.price} + {book.author} + {book.price}
diff --git a/components/custom/Play_Ground.tsx b/components/custom/Play_Ground.tsx index 49d5574..ff1e268 100644 --- a/components/custom/Play_Ground.tsx +++ b/components/custom/Play_Ground.tsx @@ -2,7 +2,7 @@ import Frame from "./Frame"; export default function PlayGround() { return ( -
+
); diff --git a/components/custom/Recent_Design.tsx b/components/custom/Recent_Design.tsx index d6d9962..6c8112f 100644 --- a/components/custom/Recent_Design.tsx +++ b/components/custom/Recent_Design.tsx @@ -2,6 +2,7 @@ import Image from "next/image"; import { ExternalLink, Ellipsis, Trash2 } from 'lucide-react'; import Link from "next/link"; import { Button } from "@/components/ui/button"; +import React from "react"; // Sample data for recent designs const recentDesigns = [ @@ -31,56 +32,58 @@ const recentDesigns = [ * RecentDesign Component * Displays a sidebar with recent designs and a trash section */ -export default function RecentDesign() { +export default function RecentDesign({ drawerOpen }: { drawerOpen?: boolean, setDrawerOpen?: (open: boolean) => void }) { + // Mobile drawer styles + const mobileDrawer = drawerOpen !== undefined; return ( -
- {/* Logo and Title Section */} -
-
+
+
+
Wodey logo
- {/* Recent Designs Header */} -
Recent designs
- - -
+
Recent designs
+
{recentDesigns.map((design, idx) => (
- -
+
icon
- {/* Design Title */} - + {design.title} - {/* Action Buttons */}
- -
@@ -89,12 +92,11 @@ export default function RecentDesign() { ))}
- - {/* Trash Section */} -
diff --git a/components/custom/Side_Nav.tsx b/components/custom/Side_Nav.tsx index c32f226..b463974 100644 --- a/components/custom/Side_Nav.tsx +++ b/components/custom/Side_Nav.tsx @@ -1,14 +1,25 @@ +'use client' + import Sidebar from "./Side_bar"; import RecentDesign from "./Recent_Design"; -export default function SideNav() { +export default function SideNav({ drawerOpen, setDrawerOpen }: { drawerOpen: boolean, setDrawerOpen: (open: boolean) => void }) { return ( -
-
+
+ {/* Backdrop for mobile drawer */} + {drawerOpen && ( +
setDrawerOpen(false)} + aria-label="Close recent designs menu" + /> + )} +
-
- + {/* Drawer for mobile, always visible on desktop */} +
+
); diff --git a/components/custom/Side_bar.tsx b/components/custom/Side_bar.tsx index e3c9150..d7c1bdb 100644 --- a/components/custom/Side_bar.tsx +++ b/components/custom/Side_bar.tsx @@ -26,30 +26,66 @@ export default function Sidebar() { const [isMenuOpen, setIsMenuOpen] = useState(false); return ( -
-
- {/* Menu Icon */} -
+
+ {/* Mobile Menu */} +
+ + + {/* Mobile Navigation Links: show only first two, centered */} +
+ {links.slice(0, 2).map((link) => ( + + ))} +
+
+ + {/* Desktop Menu */} +
+
- {/* Navigation Links */} + {/* Desktop Navigation Links */} {links.map((link) => (
- {/* Link Label */}

+ } group-hover:opacity-80 hidden md:block`}> {link.label}

diff --git a/components/custom/marketplace_Navbar.tsx b/components/custom/marketplace_Navbar.tsx index 533af68..76e98a8 100644 --- a/components/custom/marketplace_Navbar.tsx +++ b/components/custom/marketplace_Navbar.tsx @@ -1,20 +1,34 @@ +'use client'; + import Image from 'next/image'; import { Input } from '@/components/ui/input'; -import { Bell, Heart, ShoppingCart, SquarePen } from 'lucide-react'; +import { Bell, Heart, ShoppingCart, SquarePen, Menu } from 'lucide-react'; import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'; import { Button } from '@/components/ui/button'; +import { useState } from 'react'; function MarketplaceNavbar() { + const [isMenuOpen, setIsMenuOpen] = useState(false); + return ( ); @@ -71,8 +130,8 @@ function MarketplaceNavbar() { function MarketplaceSecondaryMenu() { return (
-
-
    +
    +
    • Images
    • Videos
    • Audios
      • -- 2.39.5