Refactor UI components for improved responsiveness and styling consistency #2
@ -1,3 +1,6 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
import SideNav from "@/components/custom/Side_Nav";
|
import SideNav from "@/components/custom/Side_Nav";
|
||||||
import Navbar from "@/components/custom/Nav_bar";
|
import Navbar from "@/components/custom/Nav_bar";
|
||||||
|
|
||||||
@ -6,17 +9,18 @@ export default function CreatorLayout({
|
|||||||
}: Readonly<{
|
}: Readonly<{
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}>) {
|
||||||
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<div className="flex min-h-screen">
|
<div className="flex min-h-screen">
|
||||||
<div className="fixed left-0 top-0 h-screen">
|
<div className="fixed left-0 top-0 h-screen w-[280px] lg:w-[380px]">
|
||||||
<SideNav />
|
<SideNav drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col w-full ml-[380px]">
|
<div className="flex flex-col w-full ml-0 lg:ml-[280px] xl:ml-[380px]">
|
||||||
<div className="fixed top-0 right-0 left-[380px] z-10">
|
<div className="fixed top-0 right-0 left-0 lg:left-[280px] xl:left-[380px] z-10">
|
||||||
<Navbar />
|
<Navbar setDrawerOpen={setDrawerOpen} />
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -115,34 +115,34 @@ const mockItems = [
|
|||||||
export default function ArtistContent() {
|
export default function ArtistContent() {
|
||||||
return (
|
return (
|
||||||
<div className="w-full min-h-screen">
|
<div className="w-full min-h-screen">
|
||||||
<div className="w-full px-20 mx-auto">
|
<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-8" />
|
<div className="border-b-2 border-[#D1D5DB] mb-4 sm:mb-6 md:mb-8" />
|
||||||
{/* Header with greeting and filters inside a card */}
|
{/* 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 */}
|
{/* Greeting */}
|
||||||
<div className="flex items-center text-[20px] sm:text-[22px]">
|
<div className="flex items-center text-base sm:text-lg md:text-xl">
|
||||||
<span className="font-[700] text-[#151C4F] mr-1 text-[16px]">Hi Daphne,</span>
|
<span className="font-[700] text-[#151C4F] mr-1 text-sm sm:text-base">Hi Daphne,</span>
|
||||||
<span className="text-[#555979] font-[700] text-[16px] ">recommendations for you</span>
|
<span className="text-[#555979] font-[700] text-sm sm:text-base">recommendations for you</span>
|
||||||
</div>
|
</div>
|
||||||
{/* Filter Chips */}
|
{/* 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) => (
|
{['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]" />
|
<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}
|
{filter}
|
||||||
</label>
|
</label>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</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) => (
|
{mockItems.map((item, idx) => (
|
||||||
<div
|
<div
|
||||||
key={idx}
|
key={idx}
|
||||||
className="relative bg-white rounded-sm shadow-sm overflow-hidden group transition hover:shadow-md flex flex-col justify-between"
|
className="relative bg-white rounded-sm shadow-sm overflow-hidden group transition hover:shadow-md flex flex-col justify-between w-full"
|
||||||
style={{ width: 200, height: 178, gap: 9, borderRadius: 6, paddingBottom: 8 }}
|
style={{ height: 'auto', minHeight: '178px', gap: '9px', borderRadius: '6px', paddingBottom: '8px' }}
|
||||||
>
|
>
|
||||||
{/* Image */}
|
{/* 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
|
<Image
|
||||||
src={item.image}
|
src={item.image}
|
||||||
alt={item.title}
|
alt={item.title}
|
||||||
@ -158,18 +158,18 @@ export default function ArtistContent() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{/* Card content */}
|
{/* 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">
|
<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">
|
<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>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between mt-0.5">
|
<div className="flex items-center justify-between mt-0.5">
|
||||||
<span className="text-xs text-gray-500">In{' '}
|
<span className="text-[10px] sm:text-xs text-gray-500">In{' '}
|
||||||
<span className="capitalize" style={{ color: '#007AFF', fontWeight: 400, fontSize: 12 }}>{item.type}</span>
|
<span className="capitalize" style={{ color: '#007AFF', fontWeight: 400, fontSize: '10px' }}>{item.type}</span>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -39,31 +39,54 @@ export default function QuickActions() {
|
|||||||
<div className="relative w-full">
|
<div className="relative w-full">
|
||||||
{/* Top linear gradient image bar */}
|
{/* Top linear gradient image bar */}
|
||||||
<div className="absolute top-0 left-0 w-full h-3 z-10">
|
<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>
|
||||||
<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={{
|
style={{
|
||||||
background: 'radial-gradient(ellipse at 20% 20%, #f5f7fa 60%, #e8eafc 80%, #f7e7fa 100%, #e3f6fd 100%)',
|
background: 'radial-gradient(ellipse at 20% 20%, #f5f7fa 60%, #e8eafc 80%, #f7e7fa 100%, #e3f6fd 100%)',
|
||||||
minHeight: '100%',
|
minHeight: '100%',
|
||||||
width: '100vw',
|
width: '100%',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="flex items-center w-full">
|
<div className="flex flex-col md:flex-row items-center w-full gap-6 md:gap-8">
|
||||||
<div className="flex items-center mr-8">
|
<div className="flex items-center">
|
||||||
<Image src="/logo.png" alt="Logo" width={240} height={240} className="object-contain" />
|
<Image
|
||||||
|
src="/logo.png"
|
||||||
|
alt="Logo"
|
||||||
|
width={240}
|
||||||
|
height={240}
|
||||||
|
className="object-contain w-[120px] sm:w-[180px] md:w-[240px]"
|
||||||
|
/>
|
||||||
</div>
|
</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) => (
|
{quickActions.map((action, idx) => (
|
||||||
<div
|
<div
|
||||||
key={idx}
|
key={idx}
|
||||||
className="bg-white shadow-md flex flex-col items-center justify-center text-center flex-shrink-0"
|
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" />
|
<Image
|
||||||
<div className="text-[9px] text-[#151C4F] mb-0.5 w-full font-400">{action.subtitle}</div>
|
src={action.image}
|
||||||
<div className="font-[700] text-[10px] text-[#151C4F] mb-0.5 w-full">{action.title}</div>
|
alt={action.title}
|
||||||
<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>
|
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>
|
<a href={action.button.link}>{action.button.label}</a>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,11 +3,8 @@ import { Search } from 'lucide-react';
|
|||||||
|
|
||||||
export default function SearchBar() {
|
export default function SearchBar() {
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-center w-full my-6">
|
<div className="flex justify-center w-full my-6 px-4">
|
||||||
<div
|
<div className="flex items-center bg-white rounded-xl shadow-md px-4 w-full max-w-[613px] h-[50px]">
|
||||||
className="flex items-center bg-white rounded-xl shadow-md px-4"
|
|
||||||
style={{ width: 613, height: 50 }}
|
|
||||||
>
|
|
||||||
<select className="bg-transparent outline-none text-gray-700 font-medium pr-2 h-full">
|
<select className="bg-transparent outline-none text-gray-700 font-medium pr-2 h-full">
|
||||||
<option className="text-[14px] font-400">All</option>
|
<option className="text-[14px] font-400">All</option>
|
||||||
</select>
|
</select>
|
||||||
@ -17,7 +14,6 @@ export default function SearchBar() {
|
|||||||
type="text"
|
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"
|
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"
|
placeholder="Search images, videos, fonts, graphics and more"
|
||||||
style={{ height: 48 }}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -4,13 +4,15 @@ import SearchBar from './_components/SearchBar';
|
|||||||
|
|
||||||
export default function ArtistsPage() {
|
export default function ArtistsPage() {
|
||||||
return (
|
return (
|
||||||
<div className="relative bg-[#F3F3F3]">
|
<div className="relative bg-[#F3F3F3] min-h-screen">
|
||||||
<QuickActions />
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
{/* Overlapping SearchBar */}
|
<QuickActions />
|
||||||
<div className="w-full flex justify-center relative z-30" style={{ marginTop: '-40px' }}>
|
{/* Overlapping SearchBar */}
|
||||||
<SearchBar />
|
<div className="w-full flex justify-center relative z-30 -mt-8 sm:-mt-10 md:-mt-12">
|
||||||
|
<SearchBar />
|
||||||
|
</div>
|
||||||
|
<ArtistContent />
|
||||||
</div>
|
</div>
|
||||||
<ArtistContent />
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -49,35 +49,36 @@ const books = [
|
|||||||
|
|
||||||
export default function BestSeller() {
|
export default function BestSeller() {
|
||||||
return (
|
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="container-main">
|
||||||
<div className="flex items-center justify-between mb-2 px-2">
|
<div className="flex items-center justify-between mb-2 px-2">
|
||||||
<h2 className="text-[15px] font-[600] text-[#151C4F]">Best Sellers</h2>
|
<h2 className="text-[14px] sm: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>
|
<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>
|
||||||
<div className="border-b-2 border-[#D1D5DB] mb-6 w-full" />
|
<div className="border-b-2 border-[#D1D5DB] mb-4 sm:mb-6 w-full" />
|
||||||
<div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2">
|
<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) => (
|
{books.map((book) => (
|
||||||
<div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}>
|
<div key={book.title} className="flex flex-col w-full">
|
||||||
<div className="relative w-[158px] h-[235px] flex items-center justify-center">
|
<div className="relative w-full aspect-[2/3] flex items-center justify-center">
|
||||||
<Image
|
<Image
|
||||||
src={book.cover}
|
src={book.cover}
|
||||||
alt={book.title}
|
alt={book.title}
|
||||||
fill
|
fill
|
||||||
style={{ objectFit: 'cover', borderRadius: 4 }}
|
style={{ objectFit: 'cover', borderRadius: 4 }}
|
||||||
className="transition group-hover:scale-105 duration-200"
|
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>
|
||||||
<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">
|
<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">
|
<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>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between mt-0.5">
|
<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="text-[10px] sm:text-[12px] text-[#555979] font-[400] truncate"><span className="capitalize">{book.author}</span></span>
|
||||||
<span className="font-[700] text-[#151C4F] text-[14px] whitespace-nowrap">{book.price}</span>
|
<span className="font-[700] text-[#151C4F] text-[12px] sm:text-[14px] whitespace-nowrap">{book.price}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -26,10 +26,9 @@ export default function Frame() {
|
|||||||
const totalPages = cards.length + 1;
|
const totalPages = cards.length + 1;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex flex-col items-center justify-center">
|
<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 }}>
|
||||||
<div className="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>
|
||||||
<span className="text-[#2633B9] text-[14px] font-[#1A237E400]">Page 1/{totalPages}</span>
|
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<CopyPlus
|
<CopyPlus
|
||||||
size={18}
|
size={18}
|
||||||
@ -44,20 +43,23 @@ export default function Frame() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col items-center gap-4 md:gap-8 w-full max-w-[450px]">
|
||||||
<div className="flex flex-col items-center gap-8">
|
<div className="w-full flex flex-col items-center">
|
||||||
|
<div className="w-full max-w-[410px] aspect-[410/510] flex items-center justify-center">
|
||||||
<div className="w-[450px] flex flex-col items-center">
|
<Image
|
||||||
<div className="w-[410px] h-[510px] flex items-center justify-center">
|
src="/pdf-image.png"
|
||||||
<Image src="/pdf-image.png" alt="Excerpt Card" width={410} height={510} style={{ objectFit: 'contain' }} />
|
alt="Excerpt Card"
|
||||||
|
width={410}
|
||||||
|
height={510}
|
||||||
|
className="w-full h-full object-contain"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
{cards.map((card, index) => (
|
{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 }}>
|
<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">
|
<div className="flex gap-2">
|
||||||
<CopyPlus
|
<CopyPlus
|
||||||
size={18}
|
size={18}
|
||||||
@ -71,21 +73,19 @@ export default function Frame() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
|
<div className="w-full max-w-[450px] flex justify-center">
|
||||||
<div className="w-[450px] flex justify-center">
|
|
||||||
<Button
|
<Button
|
||||||
onClick={handleAddCard}
|
onClick={handleAddCard}
|
||||||
variant="outline"
|
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"
|
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]"
|
||||||
style={{ width: 410 }}
|
|
||||||
>
|
>
|
||||||
<Plus size={20} className="text-[#1A237E]" />
|
<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>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -4,18 +4,18 @@ import Image from "next/image";
|
|||||||
export default function HomeBanner() {
|
export default function HomeBanner() {
|
||||||
return (
|
return (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="container-main mt-10">
|
<div className="container-main mt-4 sm:mt-6 md:mt-8 lg: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="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 */}
|
{/* 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">
|
<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-[28px] sm:text-[32px] md:text-[35px] font-[500] text-[#151C4F] mb-2 tracking-tight">
|
<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
|
1000 BLACK UMBRELLAS
|
||||||
</h1>
|
</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.
|
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>
|
</p>
|
||||||
<Button
|
<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"
|
size="lg"
|
||||||
>
|
>
|
||||||
PURCHASE EBOOK
|
PURCHASE EBOOK
|
||||||
@ -23,12 +23,12 @@ export default function HomeBanner() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right: Book Cover */}
|
{/* 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
|
<Image
|
||||||
src="/book.png"
|
src="/book.png"
|
||||||
alt="1000 Black Umbrellas Book Cover"
|
alt="1000 Black Umbrellas Book Cover"
|
||||||
width={185}
|
width={160}
|
||||||
height={275}
|
height={240}
|
||||||
className="object-contain rounded-xl"
|
className="object-contain rounded-xl"
|
||||||
priority
|
priority
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -1,30 +1,42 @@
|
|||||||
import { Bell } from 'lucide-react';
|
import { Bell, Menu } from 'lucide-react';
|
||||||
import { Search } from 'lucide-react';
|
import { Search } from 'lucide-react';
|
||||||
import { Input } from '@/components/ui/input';
|
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 (
|
return (
|
||||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', padding: '24px 40px', background: 'white', width: '100%', height: '75px' }}>
|
<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">
|
||||||
<div style={{ flex: 1, display: 'flex', justifyContent: 'flex-end', marginRight: 120 }}>
|
{/* Hamburger menu for mobile */}
|
||||||
<div style={{ display: 'flex', alignItems: 'center', background: '#F2F4F8', borderRadius: '10px', padding: '8px 16px', minWidth: 350 }}>
|
{setDrawerOpen && (
|
||||||
<Search size={20} style={{ color: '#6B7280', marginRight: 8 }} />
|
<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
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Search ebooks, folders, and uploads"
|
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>
|
</div>
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
|
<div className="flex items-center gap-1 xs:gap-2 sm:gap-3 md:gap-4 lg:gap-6">
|
||||||
<div style={{ position: 'relative', cursor: 'pointer' }}>
|
<div className="relative cursor-pointer">
|
||||||
<Bell size={22} style={{ color: '#222' }} />
|
<Bell size={16} className="text-[#222] xs:text-[18px] sm:text-[20px] md:text-[22px]" />
|
||||||
<span style={{ position: 'absolute', top: -2, right: 0, width: 9, height: 9, background: '#FF3B30', borderRadius: '50%', border: '1.5px solid white' }} />
|
<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>
|
||||||
<div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
|
<div className="flex items-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="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
|
D
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -49,17 +49,17 @@ const books = [
|
|||||||
|
|
||||||
export default function NewRelease() {
|
export default function NewRelease() {
|
||||||
return (
|
return (
|
||||||
<div className="w-full py-8">
|
<div className="w-full py-4 md:py-8">
|
||||||
<div className="container-main">
|
<div className="container-main">
|
||||||
<div className="flex items-center justify-between mb-2 px-2">
|
<div className="flex items-center justify-between mb-2 px-2">
|
||||||
<h2 className="text-[15px] font-[600] text-[#151C4F]">New Release</h2>
|
<h2 className="text-[14px] md: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>
|
<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>
|
||||||
<div className="border-b-2 border-[#D1D5DB] mb-6 w-full" />
|
<div className="border-b-2 border-[#D1D5DB] mb-4 md:mb-6 w-full" />
|
||||||
<div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2">
|
<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) => (
|
{books.map((book) => (
|
||||||
<div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}>
|
<div key={book.title} className="flex flex-col w-full">
|
||||||
<div className="relative w-[158px] h-[235px] flex items-center justify-center">
|
<div className="relative w-full aspect-[2/3] flex items-center justify-center">
|
||||||
<Image
|
<Image
|
||||||
src={book.cover}
|
src={book.cover}
|
||||||
alt={book.title}
|
alt={book.title}
|
||||||
@ -68,16 +68,16 @@ export default function NewRelease() {
|
|||||||
className="transition group-hover:scale-105 duration-200"
|
className="transition group-hover:scale-105 duration-200"
|
||||||
/>
|
/>
|
||||||
</div>
|
</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">
|
<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">
|
<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>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between mt-0.5">
|
<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="text-[10px] md:text-[12px] text-[#555979] font-[400] truncate"><span className="capitalize">{book.author}</span></span>
|
||||||
<span className="font-[700] text-[#151C4F] text-[14px] whitespace-nowrap">{book.price}</span>
|
<span className="font-[700] text-[#151C4F] text-[12px] md:text-[14px] whitespace-nowrap">{book.price}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import Frame from "./Frame";
|
|||||||
|
|
||||||
export default function PlayGround() {
|
export default function PlayGround() {
|
||||||
return (
|
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 />
|
<Frame />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import Image from "next/image";
|
|||||||
import { ExternalLink, Ellipsis, Trash2 } from 'lucide-react';
|
import { ExternalLink, Ellipsis, Trash2 } from 'lucide-react';
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
// Sample data for recent designs
|
// Sample data for recent designs
|
||||||
const recentDesigns = [
|
const recentDesigns = [
|
||||||
@ -31,56 +32,58 @@ const recentDesigns = [
|
|||||||
* RecentDesign Component
|
* RecentDesign Component
|
||||||
* Displays a sidebar with recent designs and a trash section
|
* 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 (
|
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">
|
<div
|
||||||
{/* Logo and Title Section */}
|
className={
|
||||||
<div>
|
mobileDrawer
|
||||||
<div className="flex flex-col items-center mb-6 md:mb-12">
|
? `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
|
<Image
|
||||||
src="/logo.png"
|
src="/logo.png"
|
||||||
alt="Wodey logo"
|
alt="Wodey logo"
|
||||||
width={157}
|
width={157}
|
||||||
height={53}
|
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>
|
</div>
|
||||||
|
|
||||||
{/* Recent Designs Header */}
|
{/* Recent Designs Header */}
|
||||||
<div className="text-[#27275A] text-[12px] font-[400] mb-2 pl-1">Recent designs</div>
|
<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">
|
||||||
|
|
||||||
<div className="grid grid-cols-2 md:flex md:flex-col gap-2">
|
|
||||||
{recentDesigns.map((design, idx) => (
|
{recentDesigns.map((design, idx) => (
|
||||||
<div
|
<div
|
||||||
key={idx}
|
key={idx}
|
||||||
className="flex items-center bg-white rounded-lg py-2 px-2 hover:bg-[#F5F6FA] group transition cursor-pointer"
|
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 sm:w-7 sm:h-7 md:w-8 md:h-8 flex items-center justify-center mr-2">
|
||||||
<div className="w-6 h-6 md:w-8 md:h-8 flex items-center justify-center mr-2">
|
|
||||||
<Image
|
<Image
|
||||||
src={design.icon}
|
src={design.icon}
|
||||||
alt="icon"
|
alt="icon"
|
||||||
width={28}
|
width={28}
|
||||||
height={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>
|
</div>
|
||||||
|
|
||||||
{/* Design Title */}
|
{/* 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}
|
{design.title}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
{/* Action Buttons */}
|
{/* Action Buttons */}
|
||||||
<div className="ml-auto">
|
<div className="ml-auto">
|
||||||
<Button variant="ghost" size="icon" className="h-10 w-10 p-1">
|
<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 md:gap-1 pr-5">
|
<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-7 w-7 md:h-8 md:w-8 p-0 hover:bg-[#e6e6e8]">
|
<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-7 h-7 md:w-8 md:h-8" />
|
<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>
|
||||||
<Button variant="ghost" size="icon" className="h-7 w-7 md:h-8 md:w-8 p-0 hover:bg-[#e6e6e8]">
|
<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-7 h-7 md:w-8 md:h-8" />
|
<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>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</Button>
|
</Button>
|
||||||
@ -89,12 +92,11 @@ export default function RecentDesign() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{/* Trash Section pinned to the very bottom */}
|
||||||
{/* Trash Section */}
|
<Button variant="ghost" className="flex items-center gap-2 p-2 hover:bg-[#F5F6FA] rounded-lg w-full justify-start mb-2">
|
||||||
<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">
|
|
||||||
<Link href="/creator/trash" className="flex items-center gap-2">
|
<Link href="/creator/trash" className="flex items-center gap-2">
|
||||||
<Trash2 className="text-[#27275A] w-[16px] md:w-[20px]" />
|
<Trash2 className="text-[#27275A] w-[14px] sm:w-[16px] md:w-[20px]" />
|
||||||
<span className="text-[#27275A] text-[12px] md:text-[14px] font-[400]">Trash</span>
|
<span className="text-[#27275A] text-[12px] sm:text-[13px] md:text-[14px] font-[400]">Trash</span>
|
||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,14 +1,25 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
import Sidebar from "./Side_bar";
|
import Sidebar from "./Side_bar";
|
||||||
import RecentDesign from "./Recent_Design";
|
import RecentDesign from "./Recent_Design";
|
||||||
|
|
||||||
export default function SideNav() {
|
export default function SideNav({ drawerOpen, setDrawerOpen }: { drawerOpen: boolean, setDrawerOpen: (open: boolean) => void }) {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen">
|
<div className="flex flex-col md:flex-row h-auto md:h-screen w-full relative">
|
||||||
<div className="h-full">
|
{/* 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 />
|
<Sidebar />
|
||||||
</div>
|
</div>
|
||||||
<div className="h-full">
|
{/* Drawer for mobile, always visible on desktop */}
|
||||||
<RecentDesign />
|
<div className="w-full h-auto md:h-full">
|
||||||
|
<RecentDesign drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -26,30 +26,66 @@ export default function Sidebar() {
|
|||||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||||
|
|
||||||
return (
|
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={`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]' : ''}`}>
|
||||||
<div className="flex md:flex-col items-center justify-center gap-4 p-4 md:pt-10">
|
{/* Mobile Menu */}
|
||||||
{/* Menu Icon */}
|
<div className="md:hidden flex items-center justify-between px-4 h-full">
|
||||||
<div className="flex md:flex-col items-center gap-4 md:gap-6">
|
<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
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="mb-5 hover:bg-[#1a1c2b]/50"
|
className="mb-5 hover:bg-transparent"
|
||||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||||
>
|
>
|
||||||
<Menu className="h-6 w-6 text-white" />
|
<Menu className="h-6 w-6 text-white" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
{/* Navigation Links */}
|
{/* Desktop Navigation Links */}
|
||||||
{links.map((link) => (
|
{links.map((link) => (
|
||||||
<div
|
<div
|
||||||
key={link.path}
|
key={link.path}
|
||||||
className={`flex flex-col items-center cursor-pointer group`}
|
className="flex flex-col items-center cursor-pointer group"
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className={`p-2 rounded-lg transition-colors duration-200 ${
|
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
|
<Image
|
||||||
@ -58,14 +94,13 @@ export default function Sidebar() {
|
|||||||
width={24}
|
width={24}
|
||||||
height={24}
|
height={24}
|
||||||
className="group-hover:opacity-80 transition-opacity duration-200"
|
className="group-hover:opacity-80 transition-opacity duration-200"
|
||||||
priority={link.path === "/"} // Prioritize loading home icon
|
priority={link.path === "/"}
|
||||||
/>
|
/>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
{/* Link Label */}
|
|
||||||
<p className={`text-white text-xs mt-1 transition-all duration-300 ease-in-out ${
|
<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'
|
isMenuOpen ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-4'
|
||||||
} group-hover:opacity-80`}>
|
} group-hover:opacity-80 hidden md:block`}>
|
||||||
{link.label}
|
{link.label}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,20 +1,34 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import { Input } from '@/components/ui/input';
|
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 { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
function MarketplaceNavbar() {
|
function MarketplaceNavbar() {
|
||||||
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className="w-full bg-[#010313]">
|
<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 */}
|
{/* 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" />
|
<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>
|
</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 }}>
|
<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>
|
<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
|
<Input
|
||||||
@ -25,8 +39,9 @@ function MarketplaceNavbar() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</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 */}
|
{/* Notifications */}
|
||||||
<div className="relative cursor-pointer flex flex-col items-center justify-center">
|
<div className="relative cursor-pointer flex flex-col items-center justify-center">
|
||||||
<div className="relative flex items-center justify-center">
|
<div className="relative flex items-center justify-center">
|
||||||
@ -57,12 +72,56 @@ function MarketplaceNavbar() {
|
|||||||
</div>
|
</div>
|
||||||
{/* Create Button */}
|
{/* Create Button */}
|
||||||
<a href="/creator">
|
<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">
|
<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} />
|
<SquarePen size={18} />
|
||||||
Create
|
<span className="hidden sm:inline">Create</span>
|
||||||
</Button>
|
</Button>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
@ -71,8 +130,8 @@ function MarketplaceNavbar() {
|
|||||||
function MarketplaceSecondaryMenu() {
|
function MarketplaceSecondaryMenu() {
|
||||||
return (
|
return (
|
||||||
<div className="w-full bg-[#010313] border-t border-white/20">
|
<div className="w-full bg-[#010313] border-t border-white/20">
|
||||||
<div className="container-main flex items-center h-7 p-5">
|
<div className="container-main flex items-center h-7 p-5 overflow-x-auto">
|
||||||
<ul className="flex gap-10 text-white text-sm font-normal">
|
<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">Images</li>
|
||||||
<li className="cursor-pointer">Videos</li>
|
<li className="cursor-pointer">Videos</li>
|
||||||
<li className="cursor-pointer">Audios</li>
|
<li className="cursor-pointer">Audios</li>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user