Merge pull request 'Refactor UI components for improved responsiveness and styling consistency' (#2) from fix/mobile/repsosnsiveness into main
Reviewed-on: http://35.207.46.142/Wodey/woedii/pulls/2
This commit is contained in:
commit
11a60f655a
@ -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 (
|
||||
<html lang="en">
|
||||
<div className="flex min-h-screen">
|
||||
<div className="fixed left-0 top-0 h-screen">
|
||||
<SideNav />
|
||||
<div className="fixed left-0 top-0 h-screen w-[280px] lg:w-[380px]">
|
||||
<SideNav drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
|
||||
</div>
|
||||
<div className="flex flex-col w-full ml-[380px]">
|
||||
<div className="fixed top-0 right-0 left-[380px] z-10">
|
||||
<Navbar />
|
||||
<div className="flex flex-col w-full ml-0 lg:ml-[280px] xl:ml-[380px]">
|
||||
<div className="fixed top-0 right-0 left-0 lg:left-[280px] xl:left-[380px] z-10">
|
||||
<Navbar setDrawerOpen={setDrawerOpen} />
|
||||
</div>
|
||||
<main className="flex-1 p-6 bg-[#F3F3F3] mt-[75px]">{children}</main>
|
||||
<main className="flex-1 p-4 lg:p-6 bg-[#F3F3F3] mt-[75px] pb-[60px] md:pb-0">{children}</main>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
|
||||
@ -115,34 +115,34 @@ const mockItems = [
|
||||
export default function ArtistContent() {
|
||||
return (
|
||||
<div className="w-full min-h-screen">
|
||||
<div className="w-full px-20 mx-auto">
|
||||
<div className="border-b-2 border-[#D1D5DB] mb-8" />
|
||||
<div className="w-full px-4 sm:px-6 md:px-8 lg:px-20 mx-auto">
|
||||
<div className="border-b-2 border-[#D1D5DB] mb-4 sm:mb-6 md:mb-8" />
|
||||
{/* Header with greeting and filters inside a card */}
|
||||
<div className="bg-white p-3 rounded-lg shadow-sm py-5 w-full min-h-[46px] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-8 border-b-2 border-[#D1D5DB]">
|
||||
<div className="bg-white p-3 rounded-lg shadow-sm py-4 sm:py-5 w-full min-h-[46px] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 mb-4 sm:mb-6 md:mb-8 border-b-2 border-[#D1D5DB]">
|
||||
{/* Greeting */}
|
||||
<div className="flex items-center text-[20px] sm:text-[22px]">
|
||||
<span className="font-[700] text-[#151C4F] mr-1 text-[16px]">Hi Daphne,</span>
|
||||
<span className="text-[#555979] font-[700] text-[16px] ">recommendations for you</span>
|
||||
<div className="flex items-center text-base sm:text-lg md:text-xl">
|
||||
<span className="font-[700] text-[#151C4F] mr-1 text-sm sm:text-base">Hi Daphne,</span>
|
||||
<span className="text-[#555979] font-[700] text-sm sm:text-base">recommendations for you</span>
|
||||
</div>
|
||||
{/* Filter Chips */}
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<div className="flex flex-wrap gap-2 sm:gap-3 md:gap-4">
|
||||
{['Images','Videos','Audios','Fonts','Gifs','Graphics'].map((filter) => (
|
||||
<label key={filter} className="flex items-center gap-2 text-[#151C4F] text-[13px] font-[400] cursor-pointer select-none">
|
||||
<label key={filter} className="flex items-center gap-1 sm:gap-2 text-[#151C4F] text-xs sm:text-sm font-[400] cursor-pointer select-none">
|
||||
<Checkbox defaultChecked className="bg-white border-[#E3E6F0] data-[state=checked]:bg-white data-[state=checked]:border-[#151C4F] [&>svg]:text-[#151C4F] data-[state=checked]:text-[#151C4F]" />
|
||||
{filter}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
|
||||
<div className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 sm:gap-4 md:gap-6">
|
||||
{mockItems.map((item, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="relative bg-white rounded-sm shadow-sm overflow-hidden group transition hover:shadow-md flex flex-col justify-between"
|
||||
style={{ width: 200, height: 178, gap: 9, borderRadius: 6, paddingBottom: 8 }}
|
||||
className="relative bg-white rounded-sm shadow-sm overflow-hidden group transition hover:shadow-md flex flex-col justify-between w-full"
|
||||
style={{ height: 'auto', minHeight: '178px', gap: '9px', borderRadius: '6px', paddingBottom: '8px' }}
|
||||
>
|
||||
{/* Image */}
|
||||
<div className="relative w-full h-36 flex items-center justify-center bg-gray-100">
|
||||
<div className="relative w-full aspect-[4/3] flex items-center justify-center bg-gray-100">
|
||||
<Image
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
@ -158,18 +158,18 @@ export default function ArtistContent() {
|
||||
)}
|
||||
</div>
|
||||
{/* Card content */}
|
||||
<div className="px-3 pb-2 pt-1 flex flex-col gap-1">
|
||||
<div className="px-2 sm:px-3 pb-2 pt-1 flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-semibold text-sm text-[#151C4F] truncate" title={item.title}>{item.title}</span>
|
||||
<span className="font-semibold text-xs sm:text-sm text-[#151C4F] truncate" title={item.title}>{item.title}</span>
|
||||
<Button variant="ghost" size="icon" className="ml-2">
|
||||
<Heart className="w-5 h-5 text-gray-400 group-hover:text-pink-500 transition" />
|
||||
<Heart className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400 group-hover:text-pink-500 transition" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mt-0.5">
|
||||
<span className="text-xs text-gray-500">In{' '}
|
||||
<span className="capitalize" style={{ color: '#007AFF', fontWeight: 400, fontSize: 12 }}>{item.type}</span>
|
||||
<span className="text-[10px] sm:text-xs text-gray-500">In{' '}
|
||||
<span className="capitalize" style={{ color: '#007AFF', fontWeight: 400, fontSize: '10px' }}>{item.type}</span>
|
||||
</span>
|
||||
<span className="font-bold text-[#151C4F] text-sm">${item.price.toFixed(2)}</span>
|
||||
<span className="font-bold text-[#151C4F] text-xs sm:text-sm">${item.price.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -39,31 +39,54 @@ export default function QuickActions() {
|
||||
<div className="relative w-full">
|
||||
{/* Top linear gradient image bar */}
|
||||
<div className="absolute top-0 left-0 w-full h-3 z-10">
|
||||
<img src="/GradientMesh_Light.png" alt="Gradient Bar" className="w-full h-full object-cover" />
|
||||
<Image src="/GradientMesh_Light.png" alt="Gradient Bar" className="w-full h-full object-cover" width={100} height={100} />
|
||||
</div>
|
||||
<div
|
||||
className="w-full flex flex-col items-center gap-6 py-8 px-20 relative z-20"
|
||||
className="w-full flex flex-col items-center gap-6 py-4 sm:py-8 px-4 sm:px-8 md:px-12 lg:px-20 relative z-20"
|
||||
style={{
|
||||
background: 'radial-gradient(ellipse at 20% 20%, #f5f7fa 60%, #e8eafc 80%, #f7e7fa 100%, #e3f6fd 100%)',
|
||||
minHeight: '100%',
|
||||
width: '100vw',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center w-full">
|
||||
<div className="flex items-center mr-8">
|
||||
<Image src="/logo.png" alt="Logo" width={240} height={240} className="object-contain" />
|
||||
<div className="flex flex-col md:flex-row items-center w-full gap-6 md:gap-8">
|
||||
<div className="flex items-center">
|
||||
<Image
|
||||
src="/logo.png"
|
||||
alt="Logo"
|
||||
width={240}
|
||||
height={240}
|
||||
className="object-contain w-[120px] sm:w-[180px] md:w-[240px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-6 flex-1">
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4 w-full">
|
||||
{quickActions.map((action, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="bg-white shadow-md flex flex-col items-center justify-center text-center flex-shrink-0"
|
||||
style={{ width: '150px', height: '170px', padding: '11px 15px', borderRadius: 8, justifyContent: 'space-between', overflow: 'hidden' }}
|
||||
style={{
|
||||
height: 'auto',
|
||||
minHeight: '170px',
|
||||
padding: '11px 15px',
|
||||
borderRadius: 8,
|
||||
justifyContent: 'space-between',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
<Image src={action.image} alt={action.title} width={37.43} height={40.8} className="object-contain mx-auto mb-1" />
|
||||
<div className="text-[9px] text-[#151C4F] mb-0.5 w-full font-400">{action.subtitle}</div>
|
||||
<div className="font-[700] text-[10px] text-[#151C4F] mb-0.5 w-full">{action.title}</div>
|
||||
<Button className="w-full h-7 text-[9px] px-0 mt-1 font-400 text-[#1A237E] border-[rgba(48,58,156,0.42)] rounded-sm" variant="outline" asChild>
|
||||
<Image
|
||||
src={action.image}
|
||||
alt={action.title}
|
||||
width={37.43}
|
||||
height={40.8}
|
||||
className="object-contain mx-auto mb-1 w-[30px] sm:w-[37.43px] h-auto"
|
||||
/>
|
||||
<div className="text-[8px] sm:text-[9px] text-[#151C4F] mb-0.5 w-full font-400">{action.subtitle}</div>
|
||||
<div className="font-[700] text-[9px] sm:text-[10px] text-[#151C4F] mb-0.5 w-full">{action.title}</div>
|
||||
<Button
|
||||
className="w-full h-6 sm:h-7 text-[8px] sm:text-[9px] px-0 mt-1 font-400 text-[#1A237E] border-[rgba(48,58,156,0.42)] rounded-sm"
|
||||
variant="outline"
|
||||
asChild
|
||||
>
|
||||
<a href={action.button.link}>{action.button.label}</a>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -3,11 +3,8 @@ import { Search } from 'lucide-react';
|
||||
|
||||
export default function SearchBar() {
|
||||
return (
|
||||
<div className="flex justify-center w-full my-6">
|
||||
<div
|
||||
className="flex items-center bg-white rounded-xl shadow-md px-4"
|
||||
style={{ width: 613, height: 50 }}
|
||||
>
|
||||
<div className="flex justify-center w-full my-6 px-4">
|
||||
<div className="flex items-center bg-white rounded-xl shadow-md px-4 w-full max-w-[613px] h-[50px]">
|
||||
<select className="bg-transparent outline-none text-gray-700 font-medium pr-2 h-full">
|
||||
<option className="text-[14px] font-400">All</option>
|
||||
</select>
|
||||
@ -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 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,13 +4,15 @@ import SearchBar from './_components/SearchBar';
|
||||
|
||||
export default function ArtistsPage() {
|
||||
return (
|
||||
<div className="relative bg-[#F3F3F3]">
|
||||
<QuickActions />
|
||||
{/* Overlapping SearchBar */}
|
||||
<div className="w-full flex justify-center relative z-30" style={{ marginTop: '-40px' }}>
|
||||
<SearchBar />
|
||||
<div className="relative bg-[#F3F3F3] min-h-screen">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<QuickActions />
|
||||
{/* Overlapping SearchBar */}
|
||||
<div className="w-full flex justify-center relative z-30 -mt-8 sm:-mt-10 md:-mt-12">
|
||||
<SearchBar />
|
||||
</div>
|
||||
<ArtistContent />
|
||||
</div>
|
||||
<ArtistContent />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -49,35 +49,36 @@ const books = [
|
||||
|
||||
export default function BestSeller() {
|
||||
return (
|
||||
<div className="w-full py-8">
|
||||
<div className="w-full py-4 sm:py-6 md:py-8">
|
||||
<div className="container-main">
|
||||
<div className="flex items-center justify-between mb-2 px-2">
|
||||
<h2 className="text-[15px] font-[600] text-[#151C4F]">Best Sellers</h2>
|
||||
<a href="#" className="text-[#4F8CFF] text-[16px] font-[400] hover:underline flex items-center gap-1">See more <ChevronRight size={16} /></a>
|
||||
<h2 className="text-[14px] sm:text-[15px] font-[600] text-[#151C4F]">Best Sellers</h2>
|
||||
<a href="#" className="text-[#4F8CFF] text-[14px] sm:text-[16px] font-[400] hover:underline flex items-center gap-1">See more <ChevronRight size={16} /></a>
|
||||
</div>
|
||||
<div className="border-b-2 border-[#D1D5DB] mb-6 w-full" />
|
||||
<div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2">
|
||||
<div className="border-b-2 border-[#D1D5DB] mb-4 sm:mb-6 w-full" />
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4 sm:gap-6">
|
||||
{books.map((book) => (
|
||||
<div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}>
|
||||
<div className="relative w-[158px] h-[235px] flex items-center justify-center">
|
||||
<div key={book.title} className="flex flex-col w-full">
|
||||
<div className="relative w-full aspect-[2/3] flex items-center justify-center">
|
||||
<Image
|
||||
src={book.cover}
|
||||
alt={book.title}
|
||||
fill
|
||||
style={{ objectFit: 'cover', borderRadius: 4 }}
|
||||
className="transition group-hover:scale-105 duration-200"
|
||||
sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, (max-width: 1280px) 20vw, (max-width: 1536px) 16vw, 14vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="px-1 pt-2 flex flex-col gap-1 w-[158px]">
|
||||
<div className="px-1 pt-2 flex flex-col gap-1 w-full">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-[400] text-[14px] text-[#151C4F]" title={book.title}>{book.title}</span>
|
||||
<span className="font-[400] text-[12px] sm:text-[14px] text-[#151C4F] truncate" title={book.title}>{book.title}</span>
|
||||
<Button variant="ghost" size="icon" className="ml-2">
|
||||
<Heart className="w-5 h-5 text-gray-400 hover:text-pink-500 transition" />
|
||||
<Heart className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400 hover:text-pink-500 transition" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mt-0.5">
|
||||
<span className="text-[12px] text-[#555979] font-[400] whitespace-nowrap"><span className="capitalize">{book.author}</span></span>
|
||||
<span className="font-[700] text-[#151C4F] text-[14px] whitespace-nowrap">{book.price}</span>
|
||||
<span className="text-[10px] sm:text-[12px] text-[#555979] font-[400] truncate"><span className="capitalize">{book.author}</span></span>
|
||||
<span className="font-[700] text-[#151C4F] text-[12px] sm:text-[14px] whitespace-nowrap">{book.price}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -26,10 +26,9 @@ export default function Frame() {
|
||||
const totalPages = cards.length + 1;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col items-center justify-center">
|
||||
|
||||
<div className="w-[450px] flex items-center justify-between px-4 py-2 mb-2" style={{ minHeight: 40 }}>
|
||||
<span className="text-[#2633B9] text-[14px] font-[#1A237E400]">Page 1/{totalPages}</span>
|
||||
<div className="min-h-screen flex flex-col items-center justify-center p-4">
|
||||
<div className="w-full max-w-[450px] flex items-center justify-between px-4 py-2 mb-2" style={{ minHeight: 40 }}>
|
||||
<span className="text-[#2633B9] text-sm md:text-[14px] font-[#1A237E400]">Page 1/{totalPages}</span>
|
||||
<div className="flex gap-2">
|
||||
<CopyPlus
|
||||
size={18}
|
||||
@ -44,20 +43,23 @@ export default function Frame() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex flex-col items-center gap-8">
|
||||
|
||||
<div className="w-[450px] flex flex-col items-center">
|
||||
<div className="w-[410px] h-[510px] flex items-center justify-center">
|
||||
<Image src="/pdf-image.png" alt="Excerpt Card" width={410} height={510} style={{ objectFit: 'contain' }} />
|
||||
<div className="flex flex-col items-center gap-4 md:gap-8 w-full max-w-[450px]">
|
||||
<div className="w-full flex flex-col items-center">
|
||||
<div className="w-full max-w-[410px] aspect-[410/510] flex items-center justify-center">
|
||||
<Image
|
||||
src="/pdf-image.png"
|
||||
alt="Excerpt Card"
|
||||
width={410}
|
||||
height={510}
|
||||
className="w-full h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{cards.map((card, index) => (
|
||||
<div key={card.id} className="w-[450px] flex flex-col items-center">
|
||||
<div key={card.id} className="w-full flex flex-col items-center">
|
||||
<div className="w-full flex items-center justify-between px-4 py-2 mb-2" style={{ minHeight: 40 }}>
|
||||
<span className="text-[#2633B9] text-[14px] font-[#1A237E400]">Page {index + 2}/{totalPages}</span>
|
||||
<span className="text-[#2633B9] text-sm md:text-[14px] font-[#1A237E400]">Page {index + 2}/{totalPages}</span>
|
||||
<div className="flex gap-2">
|
||||
<CopyPlus
|
||||
size={18}
|
||||
@ -71,21 +73,19 @@ export default function Frame() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[410px] h-[510px] bg-white rounded-lg shadow-md">
|
||||
<div className="w-full max-w-[410px] aspect-[410/510] bg-white rounded-lg shadow-md">
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
|
||||
<div className="w-[450px] flex justify-center">
|
||||
<div className="w-full max-w-[450px] flex justify-center">
|
||||
<Button
|
||||
onClick={handleAddCard}
|
||||
variant="outline"
|
||||
className="flex justify-center items-center gap-2 py-2 text-[#1A237E] font-medium bg-white hover:bg-blue-50 transition-colors shadow-sm"
|
||||
style={{ width: 410 }}
|
||||
className="flex justify-center items-center gap-2 py-2 text-[#1A237E] font-medium bg-white hover:bg-blue-50 transition-colors shadow-sm w-full max-w-[410px]"
|
||||
>
|
||||
<Plus size={20} className="text-[#1A237E]" />
|
||||
<span className="text-center text-[16px] font-[400]">Add new page</span>
|
||||
<span className="text-center text-sm md:text-[16px] font-[400]">Add new page</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,18 +4,18 @@ import Image from "next/image";
|
||||
export default function HomeBanner() {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="container-main mt-10">
|
||||
<div className="relative h-[240px] md:h-[260px] bg-[rgba(255,248,238,0.9)] rounded-2xl overflow-hidden flex items-center justify-between">
|
||||
<div className="container-main mt-4 sm:mt-6 md:mt-8 lg:mt-10">
|
||||
<div className="relative h-[200px] sm:h-[220px] md:h-[240px] lg:h-[260px] bg-[rgba(255,248,238,0.9)] rounded-2xl overflow-hidden flex items-center justify-between">
|
||||
{/* Left: Text Content */}
|
||||
<div className="z-10 py-8 flex-1 flex flex-col justify-center pl-4 sm:pl-6 md:pl-8 lg:pl-16 pr-4 sm:pr-6 md:pr-8 lg:pr-20">
|
||||
<h1 className="text-[28px] sm:text-[32px] md:text-[35px] font-[500] text-[#151C4F] mb-2 tracking-tight">
|
||||
<div className="z-10 py-4 sm:py-6 md:py-8 flex-1 flex flex-col justify-center pl-3 sm:pl-4 md:pl-6 lg:pl-8 xl:pl-16 pr-3 sm:pr-4 md:pr-6 lg:pr-8 xl:pr-20">
|
||||
<h1 className="text-[24px] sm:text-[28px] md:text-[32px] lg:text-[35px] font-[500] text-[#151C4F] mb-1 sm:mb-2 tracking-tight">
|
||||
1000 BLACK UMBRELLAS
|
||||
</h1>
|
||||
<p className="text-[#151C4F] text-[16px] sm:text-[18px] md:text-[21px] font-[400] mb-2 max-w-5xl">
|
||||
<p className="text-[#151C4F] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[21px] font-[400] mb-2 max-w-5xl">
|
||||
Poems of absolute nakedness that chase the power of love. Daniel McGinn is<br className="hidden sm:block"/> one of the most admired poets in the underground American poetry scene.
|
||||
</p>
|
||||
<Button
|
||||
className="bg-transparent border border-[#151C4F] text-[#151C4F] text-[16px] sm:text-[18px] md:text-[21px] w-fit px-4 sm:px-5 md:px-6 py-2 sm:py-3 font-[400] rounded-md mt-4 hover:bg-[#151C4F] hover:text-white transition-all duration-300 cursor-pointer"
|
||||
className="bg-transparent border border-[#151C4F] text-[#151C4F] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[21px] w-fit px-3 sm:px-4 md:px-5 lg:px-6 py-1.5 sm:py-2 md:py-2.5 lg:py-3 font-[400] rounded-md mt-2 sm:mt-3 md:mt-4 hover:bg-[#151C4F] hover:text-white transition-all duration-300 cursor-pointer"
|
||||
size="lg"
|
||||
>
|
||||
PURCHASE EBOOK
|
||||
@ -23,12 +23,12 @@ export default function HomeBanner() {
|
||||
</div>
|
||||
|
||||
{/* Right: Book Cover */}
|
||||
<div className="hidden md:block absolute" style={{ top: '85.44px', right: '20px' }}>
|
||||
<div className="hidden md:block absolute" style={{ top: '50%', right: '20px', transform: 'translateY(-50%)' }}>
|
||||
<Image
|
||||
src="/book.png"
|
||||
alt="1000 Black Umbrellas Book Cover"
|
||||
width={185}
|
||||
height={275}
|
||||
width={160}
|
||||
height={240}
|
||||
className="object-contain rounded-xl"
|
||||
priority
|
||||
/>
|
||||
|
||||
@ -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<SetStateAction<boolean>> }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', padding: '24px 40px', background: 'white', width: '100%', height: '75px' }}>
|
||||
<div style={{ flex: 1, display: 'flex', justifyContent: 'flex-end', marginRight: 120 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', background: '#F2F4F8', borderRadius: '10px', padding: '8px 16px', minWidth: 350 }}>
|
||||
<Search size={20} style={{ color: '#6B7280', marginRight: 8 }} />
|
||||
<div className="flex items-center justify-between w-full h-[52px] xs:h-[56px] sm:h-[64px] md:h-[75px] bg-white px-2 xs:px-3 sm:px-4 md:px-6 lg:px-10">
|
||||
{/* Hamburger menu for mobile */}
|
||||
{setDrawerOpen && (
|
||||
<button
|
||||
className="md:hidden mr-1 xs:mr-2 p-2 rounded-lg hover:bg-gray-100 focus:outline-none"
|
||||
onClick={() => setDrawerOpen((prev: boolean) => !prev)}
|
||||
aria-label="Toggle recent designs menu"
|
||||
>
|
||||
<Menu size={22} className="xs:w-6 xs:h-6 w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
{/* Search bar: hidden on mobile, visible on sm and up */}
|
||||
<div className="hidden sm:flex flex-1 justify-end mr-1 xs:mr-2 sm:mr-4 md:mr-8 lg:mr-16 xl:mr-32">
|
||||
<div className="flex items-center bg-[#F2F4F8] rounded-lg p-1 xs:p-1.5 sm:p-2 md:p-3 min-w-[140px] xs:min-w-[180px] sm:min-w-[280px] md:min-w-[320px] lg:min-w-[350px]">
|
||||
<Search size={15} className="text-[#6B7280] mr-1 xs:mr-1.5 sm:mr-2" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search ebooks, folders, and uploads"
|
||||
className="bg-transparent text-[#6B7280] text-base w-[250px] focus-visible:ring-0 focus-visible:ring-offset-0 border-0 focus:border-0"
|
||||
className="bg-transparent text-[#6B7280] text-[11px] xs:text-xs sm:text-sm md:text-base w-full focus-visible:ring-0 focus-visible:ring-offset-0 border-0 focus:border-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
|
||||
<div style={{ position: 'relative', cursor: 'pointer' }}>
|
||||
<Bell size={22} style={{ color: '#222' }} />
|
||||
<span style={{ position: 'absolute', top: -2, right: 0, width: 9, height: 9, background: '#FF3B30', borderRadius: '50%', border: '1.5px solid white' }} />
|
||||
<div className="flex items-center gap-1 xs:gap-2 sm:gap-3 md:gap-4 lg:gap-6">
|
||||
<div className="relative cursor-pointer">
|
||||
<Bell size={16} className="text-[#222] xs:text-[18px] sm:text-[20px] md:text-[22px]" />
|
||||
<span className="absolute top-[-2px] right-0 w-1 h-1 xs:w-1.5 xs:h-1.5 sm:w-2 sm:h-2 bg-[#FF3B30] rounded-full border-[1.5px] border-white" />
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
|
||||
<div style={{ width: 32, height: 32, borderRadius: '50%', background: '#FFD600', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, color: '#222', fontSize: 14, position: 'relative', zIndex: 1 }}>
|
||||
<div className="flex items-center cursor-pointer">
|
||||
<div className="w-5 h-5 xs:w-6 xs:h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 rounded-full bg-[#FFD600] flex items-center justify-center font-semibold text-[#222] text-[10px] xs:text-xs sm:text-sm relative z-10">
|
||||
D
|
||||
</div>
|
||||
<div style={{ width: 32, height: 32, borderRadius: '50%', background: 'white', border: '1px solid #E5E7EB', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, color: '#222', cursor: 'pointer', marginLeft: -8, position: 'relative', zIndex: 0 }}>
|
||||
<div className="w-5 h-5 xs:w-6 xs:h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 rounded-full bg-white border border-[#E5E7EB] flex items-center justify-center text-[#222] cursor-pointer -ml-2 relative z-0">
|
||||
+
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -49,17 +49,17 @@ const books = [
|
||||
|
||||
export default function NewRelease() {
|
||||
return (
|
||||
<div className="w-full py-8">
|
||||
<div className="w-full py-4 md:py-8">
|
||||
<div className="container-main">
|
||||
<div className="flex items-center justify-between mb-2 px-2">
|
||||
<h2 className="text-[15px] font-[600] text-[#151C4F]">New Release</h2>
|
||||
<a href="#" className="text-[#4F8CFF] text-[16px] font-[400] hover:underline flex items-center gap-1">See more <ChevronRight size={16} /></a>
|
||||
<h2 className="text-[14px] md:text-[15px] font-[600] text-[#151C4F]">New Release</h2>
|
||||
<a href="#" className="text-[#4F8CFF] text-[14px] md:text-[16px] font-[400] hover:underline flex items-center gap-1">See more <ChevronRight size={16} /></a>
|
||||
</div>
|
||||
<div className="border-b-2 border-[#D1D5DB] mb-6 w-full" />
|
||||
<div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2">
|
||||
<div className="border-b-2 border-[#D1D5DB] mb-4 md:mb-6 w-full" />
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6">
|
||||
{books.map((book) => (
|
||||
<div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}>
|
||||
<div className="relative w-[158px] h-[235px] flex items-center justify-center">
|
||||
<div key={book.title} className="flex flex-col w-full">
|
||||
<div className="relative w-full aspect-[2/3] flex items-center justify-center">
|
||||
<Image
|
||||
src={book.cover}
|
||||
alt={book.title}
|
||||
@ -68,16 +68,16 @@ export default function NewRelease() {
|
||||
className="transition group-hover:scale-105 duration-200"
|
||||
/>
|
||||
</div>
|
||||
<div className="px-1 pt-2 flex flex-col gap-1 w-[158px]">
|
||||
<div className="px-1 pt-2 flex flex-col gap-1 w-full">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-[400] text-[14px] text-[#151C4F]" title={book.title}>{book.title}</span>
|
||||
<span className="font-[400] text-[12px] md:text-[14px] text-[#151C4F] truncate" title={book.title}>{book.title}</span>
|
||||
<Button variant="ghost" size="icon" className="ml-2">
|
||||
<Heart className="w-5 h-5 text-gray-400 hover:text-pink-500 transition" />
|
||||
<Heart className="w-4 h-4 md:w-5 md:h-5 text-gray-400 hover:text-pink-500 transition" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mt-0.5">
|
||||
<span className="text-[12px] text-[#555979] font-[400] whitespace-nowrap"><span className="capitalize">{book.author}</span></span>
|
||||
<span className="font-[700] text-[#151C4F] text-[14px] whitespace-nowrap">{book.price}</span>
|
||||
<span className="text-[10px] md:text-[12px] text-[#555979] font-[400] truncate"><span className="capitalize">{book.author}</span></span>
|
||||
<span className="font-[700] text-[#151C4F] text-[12px] md:text-[14px] whitespace-nowrap">{book.price}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@ import Frame from "./Frame";
|
||||
|
||||
export default function PlayGround() {
|
||||
return (
|
||||
<div className="w-full mt-24">
|
||||
<div className="w-full px-4 sm:px-6 md:px-8 lg:px-12 mt-12 sm:mt-16 md:mt-20 lg:mt-24">
|
||||
<Frame />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -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 (
|
||||
<div className="bg-white border-t md:border-t-0 md:border-r border-[#D9D7D7] w-full md:w-[300px] flex flex-col h-auto md:h-screen justify-between p-4 md:px-4 md:pt-6 md:pb-4">
|
||||
{/* Logo and Title Section */}
|
||||
<div>
|
||||
<div className="flex flex-col items-center mb-6 md:mb-12">
|
||||
<div
|
||||
className={
|
||||
mobileDrawer
|
||||
? `fixed top-0 left-0 h-full w-[85vw] max-w-xs bg-white border-r border-[#D9D7D7] z-40 transform transition-transform duration-300 ease-in-out flex flex-col justify-between md:transform-none md:w-[300px] md:max-w-none md:h-screen md:border-t-0 md:border-r md:relative md:translate-x-0 ${drawerOpen ? 'translate-x-0' : '-translate-x-full'}`
|
||||
: 'bg-white border-t md:border-t-0 md:border-r border-[#D9D7D7] w-full md:w-[300px] flex flex-col h-auto md:h-screen justify-between p-4 md:px-4 md:pt-6 md:pb-4'
|
||||
}
|
||||
style={mobileDrawer ? { padding: 16, paddingTop: 24 } : {}}
|
||||
>
|
||||
<div className="mt-[52px] md:mt-0">
|
||||
<div className="flex flex-col items-center mb-4 sm:mb-6 md:mb-12">
|
||||
<Image
|
||||
src="/logo.png"
|
||||
alt="Wodey logo"
|
||||
width={157}
|
||||
height={53}
|
||||
className="w-[120px] md:w-[157px] h-auto md:h-[53px]"
|
||||
className="w-[100px] sm:w-[120px] md:w-[157px] h-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Recent Designs Header */}
|
||||
<div className="text-[#27275A] text-[12px] font-[400] mb-2 pl-1">Recent designs</div>
|
||||
|
||||
|
||||
<div className="grid grid-cols-2 md:flex md:flex-col gap-2">
|
||||
<div className="text-[#27275A] text-[12px] sm:text-[14px] font-[400] mb-2 pl-1">Recent designs</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:flex md:flex-col gap-2">
|
||||
{recentDesigns.map((design, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center bg-white rounded-lg py-2 px-2 hover:bg-[#F5F6FA] group transition cursor-pointer"
|
||||
>
|
||||
|
||||
<div className="w-6 h-6 md:w-8 md:h-8 flex items-center justify-center mr-2">
|
||||
<div className="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 flex items-center justify-center mr-2">
|
||||
<Image
|
||||
src={design.icon}
|
||||
alt="icon"
|
||||
width={28}
|
||||
height={28}
|
||||
className="w-5 h-5 md:w-7 md:h-7"
|
||||
className="w-5 h-5 sm:w-6 sm:h-6 md:w-7 md:h-7"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Design Title */}
|
||||
<span className="flex-1 text-[10px] text-[#27275A] truncate max-w-[100px] md:max-w-[120px] font-[400]">
|
||||
<span className="flex-1 text-[10px] sm:text-[12px] text-[#27275A] truncate max-w-[120px] sm:max-w-[140px] md:max-w-[160px] font-[400]">
|
||||
{design.title}
|
||||
</span>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="ml-auto">
|
||||
<Button variant="ghost" size="icon" className="h-10 w-10 p-1">
|
||||
<div className="flex items-center gap-0.5 md:gap-1 pr-5">
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7 md:h-8 md:w-8 p-0 hover:bg-[#e6e6e8]">
|
||||
<ExternalLink className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[4px] p-1 w-7 h-7 md:w-8 md:h-8" />
|
||||
<Button variant="ghost" size="icon" className="h-8 sm:h-9 md:h-10 w-8 sm:w-9 md:w-10 p-1">
|
||||
<div className="flex items-center gap-0.5 sm:gap-1 md:gap-1.5 pr-2 sm:pr-3 md:pr-5">
|
||||
<Button variant="ghost" size="icon" className="h-6 w-6 sm:h-7 sm:w-7 md:h-8 md:w-8 p-0 hover:bg-[#e6e6e8]">
|
||||
<ExternalLink className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[4px] p-1 w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7 md:h-8 md:w-8 p-0 hover:bg-[#e6e6e8]">
|
||||
<Ellipsis className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[4px] p-1 w-7 h-7 md:w-8 md:h-8" />
|
||||
<Button variant="ghost" size="icon" className="h-6 w-6 sm:h-7 sm:w-7 md:h-8 md:w-8 p-0 hover:bg-[#e6e6e8]">
|
||||
<Ellipsis className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[4px] p-1 w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8" />
|
||||
</Button>
|
||||
</div>
|
||||
</Button>
|
||||
@ -89,12 +92,11 @@ export default function RecentDesign() {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Trash Section */}
|
||||
<Button variant="ghost" className="flex items-center gap-2 p-2 hover:bg-[#F5F6FA] rounded-lg mt-4 md:mt-0 w-full justify-start">
|
||||
{/* Trash Section pinned to the very bottom */}
|
||||
<Button variant="ghost" className="flex items-center gap-2 p-2 hover:bg-[#F5F6FA] rounded-lg w-full justify-start mb-2">
|
||||
<Link href="/creator/trash" className="flex items-center gap-2">
|
||||
<Trash2 className="text-[#27275A] w-[16px] md:w-[20px]" />
|
||||
<span className="text-[#27275A] text-[12px] md:text-[14px] font-[400]">Trash</span>
|
||||
<Trash2 className="text-[#27275A] w-[14px] sm:w-[16px] md:w-[20px]" />
|
||||
<span className="text-[#27275A] text-[12px] sm:text-[13px] md:text-[14px] font-[400]">Trash</span>
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -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 (
|
||||
<div className="flex h-screen">
|
||||
<div className="h-full">
|
||||
<div className="flex flex-col md:flex-row h-auto md:h-screen w-full relative">
|
||||
{/* Backdrop for mobile drawer */}
|
||||
{drawerOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-40 z-30 md:hidden"
|
||||
onClick={() => setDrawerOpen(false)}
|
||||
aria-label="Close recent designs menu"
|
||||
/>
|
||||
)}
|
||||
<div className="w-full md:w-auto h-[60px] md:h-full">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div className="h-full">
|
||||
<RecentDesign />
|
||||
{/* Drawer for mobile, always visible on desktop */}
|
||||
<div className="w-full h-auto md:h-full">
|
||||
<RecentDesign drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -26,30 +26,66 @@ export default function Sidebar() {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className={`bg-[#050616] w-full md:w-[80px] h-auto md:h-screen transition-all duration-300 ease-in-out ${isMenuOpen ? 'md:w-[200px]' : ''}`}>
|
||||
<div className="flex md:flex-col items-center justify-center gap-4 p-4 md:pt-10">
|
||||
{/* Menu Icon */}
|
||||
<div className="flex md:flex-col items-center gap-4 md:gap-6">
|
||||
<div className={`fixed md:relative bg-[#050616] w-full md:w-[80px] h-[60px] md:h-screen bottom-0 left-0 right-0 md:top-0 transition-all duration-300 ease-in-out z-20 ${isMenuOpen ? 'md:w-[200px]' : ''}`}>
|
||||
{/* Mobile Menu */}
|
||||
<div className="md:hidden flex items-center justify-between px-4 h-full">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="hover:bg-transparent"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
<Menu className="h-6 w-6 text-white" />
|
||||
</Button>
|
||||
|
||||
{/* Mobile Navigation Links: show only first two, centered */}
|
||||
<div className="flex flex-1 items-center justify-center gap-8">
|
||||
{links.slice(0, 2).map((link) => (
|
||||
<Button
|
||||
key={link.path}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className={`flex flex-col items-center justify-center flex-1 p-2 rounded-lg transition-colors duration-200 ${
|
||||
pathname === link.path ? 'bg-[#1a1c2b]' : 'hover:bg-transparent'
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src={link.icon}
|
||||
alt={link.label}
|
||||
width={24}
|
||||
height={24}
|
||||
className="hover:opacity-80 transition-opacity duration-200 mb-1"
|
||||
priority={link.path === "/"}
|
||||
/>
|
||||
<span className="text-white text-xs">{link.label}</span>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Menu */}
|
||||
<div className="hidden md:flex flex-col items-center justify-center gap-4 p-4 md:pt-10">
|
||||
<div className="flex flex-col items-center gap-4 md:gap-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="mb-5 hover:bg-[#1a1c2b]/50"
|
||||
className="mb-5 hover:bg-transparent"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
<Menu className="h-6 w-6 text-white" />
|
||||
</Button>
|
||||
|
||||
{/* Navigation Links */}
|
||||
{/* Desktop Navigation Links */}
|
||||
{links.map((link) => (
|
||||
<div
|
||||
key={link.path}
|
||||
className={`flex flex-col items-center cursor-pointer group`}
|
||||
className="flex flex-col items-center cursor-pointer group"
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className={`p-2 rounded-lg transition-colors duration-200 ${
|
||||
pathname === link.path ? 'bg-[#1a1c2b]' : 'group-hover:bg-[#1a1c2b]/50'
|
||||
pathname === link.path ? 'bg-[#1a1c2b]' : 'group-hover:bg-transparent'
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
@ -58,14 +94,13 @@ export default function Sidebar() {
|
||||
width={24}
|
||||
height={24}
|
||||
className="group-hover:opacity-80 transition-opacity duration-200"
|
||||
priority={link.path === "/"} // Prioritize loading home icon
|
||||
priority={link.path === "/"}
|
||||
/>
|
||||
</Button>
|
||||
|
||||
{/* Link Label */}
|
||||
<p className={`text-white text-xs mt-1 transition-all duration-300 ease-in-out ${
|
||||
isMenuOpen ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-4'
|
||||
} group-hover:opacity-80`}>
|
||||
} group-hover:opacity-80 hidden md:block`}>
|
||||
{link.label}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -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 (
|
||||
<nav className="w-full bg-[#010313]">
|
||||
<div className="container-main h-[56px] flex items-center justify-between">
|
||||
<div className="container-main h-[56px] flex items-center justify-between px-4 md:px-6">
|
||||
{/* Logo and Brand */}
|
||||
<div className="flex items-center gap-2 min-w-[180px]">
|
||||
<div className="flex items-center gap-2 min-w-[120px] md:min-w-[180px]">
|
||||
<Image src="/marketplacelogo.png" alt="Woedii Logo" width={40} height={40} className="object-contain" />
|
||||
<span className="text-white text-2xl ml-1 font-normal">Wodey</span>
|
||||
<span className="text-white text-xl md:text-2xl ml-1 font-normal">Wodey</span>
|
||||
</div>
|
||||
{/* Search Bar */}
|
||||
<div className="flex-1 flex justify-center">
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
className="md:hidden text-white"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
<Menu size={24} />
|
||||
</button>
|
||||
|
||||
{/* Search Bar - Hidden on mobile */}
|
||||
<div className="hidden md:flex flex-1 justify-center">
|
||||
<div className="flex items-center bg-[#F2F4F8] rounded-[8px] px-4" style={{ width: 400, height: 40, gap: 8 }}>
|
||||
<svg className="text-[#6B7280] mr-2" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="8.5" cy="8.5" r="5.75"/><path d="M16 16l-3.5-3.5"/></svg>
|
||||
<Input
|
||||
@ -25,8 +39,9 @@ function MarketplaceNavbar() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Right Side Icons and Profile */}
|
||||
<div className="flex items-center gap-8 min-w-[420px] justify-end">
|
||||
|
||||
{/* Right Side Icons and Profile - Hidden on mobile */}
|
||||
<div className="hidden md:flex items-center gap-4 lg:gap-8 min-w-[320px] lg:min-w-[420px] justify-end">
|
||||
{/* Notifications */}
|
||||
<div className="relative cursor-pointer flex flex-col items-center justify-center">
|
||||
<div className="relative flex items-center justify-center">
|
||||
@ -57,12 +72,56 @@ function MarketplaceNavbar() {
|
||||
</div>
|
||||
{/* Create Button */}
|
||||
<a href="/creator">
|
||||
<Button className="flex items-center gap-2 bg-[#0093A5] text-white px-5 py-2 rounded-lg font-medium text-base transition-colors ml-4 hover:bg-[#007a87] cursor-pointer" type="button">
|
||||
<SquarePen size={18} />
|
||||
Create
|
||||
</Button>
|
||||
<Button className="flex items-center gap-2 bg-[#0093A5] text-white px-3 md:px-5 py-2 rounded-lg font-medium text-sm md:text-base transition-colors ml-2 md:ml-4 hover:bg-[#007a87] cursor-pointer" type="button">
|
||||
<SquarePen size={18} />
|
||||
<span className="hidden sm:inline">Create</span>
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<div className={`absolute top-[56px] left-0 right-0 bg-[#010313] z-50 md:hidden transition-all duration-300 ease-in-out transform ${isMenuOpen ? 'translate-y-0 opacity-100' : '-translate-y-4 opacity-0 pointer-events-none'}`}>
|
||||
<div className="container-main py-4">
|
||||
{/* Mobile Search */}
|
||||
<div className="flex items-center bg-[#F2F4F8] rounded-[8px] px-4 mb-4" style={{ height: 40, gap: 8 }}>
|
||||
<svg className="text-[#6B7280] mr-2" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="8.5" cy="8.5" r="5.75"/><path d="M16 16l-3.5-3.5"/></svg>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
className="bg-transparent text-[#6B7280] text-base w-full border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-full"
|
||||
style={{ height: 40 }}
|
||||
/>
|
||||
</div>
|
||||
{/* Mobile Menu Items */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-3 text-white">
|
||||
<Bell size={20} />
|
||||
<span>Notifications</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-white">
|
||||
<Heart size={20} />
|
||||
<span>Favorites</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-white">
|
||||
<ShoppingCart size={20} />
|
||||
<span>Cart</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-white">
|
||||
<Avatar className="w-6 h-6">
|
||||
<AvatarImage src="/avatar.png" alt="Profile" />
|
||||
<AvatarFallback>U</AvatarFallback>
|
||||
</Avatar>
|
||||
<span>My Profile</span>
|
||||
</div>
|
||||
<a href="/creator" className="w-full">
|
||||
<Button className="w-full flex items-center justify-center gap-2 bg-[#0093A5] text-white py-2 rounded-lg font-medium text-base transition-colors hover:bg-[#007a87]">
|
||||
<SquarePen size={18} />
|
||||
Create
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
@ -71,8 +130,8 @@ function MarketplaceNavbar() {
|
||||
function MarketplaceSecondaryMenu() {
|
||||
return (
|
||||
<div className="w-full bg-[#010313] border-t border-white/20">
|
||||
<div className="container-main flex items-center h-7 p-5">
|
||||
<ul className="flex gap-10 text-white text-sm font-normal">
|
||||
<div className="container-main flex items-center h-7 p-5 overflow-x-auto">
|
||||
<ul className="flex gap-4 md:gap-10 text-white text-sm font-normal whitespace-nowrap">
|
||||
<li className="cursor-pointer">Images</li>
|
||||
<li className="cursor-pointer">Videos</li>
|
||||
<li className="cursor-pointer">Audios</li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user