81e56ef6a0
- Updated SearchBar component to use max-width and height utilities for better responsiveness. - Adjusted ArtistsPage layout to include container for consistent padding and spacing. - Modified BestSeller and NewRelease components to use grid layout for better item arrangement. - Enhanced Frame component layout and styling for improved visual hierarchy. - Refined HomeBanner component for better spacing and text sizing. - Improved Navbar component with mobile menu functionality and responsive design. - Updated RecentDesign and SideNav components for better mobile experience and layout. - Enhanced Sidebar component with mobile menu toggle and improved navigation links. - Refactored marketplace Navbar to include mobile menu and improved layout for icons and buttons.
91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
import Image from 'next/image';
|
|
import { Heart, ChevronRight } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
const books = [
|
|
{
|
|
title: 'Brutal',
|
|
author: 'Hoosh Ink',
|
|
price: '$4.99',
|
|
cover: '/book1.png',
|
|
},
|
|
{
|
|
title: 'Authority',
|
|
author: 'Jeff Vandermeer',
|
|
price: '$11.99',
|
|
cover: '/book2.png',
|
|
},
|
|
{
|
|
title: 'Babe Hager',
|
|
author: 'Babe Hager',
|
|
price: '$2.99',
|
|
cover: '/book3.png',
|
|
},
|
|
{
|
|
title: 'Never Flinch',
|
|
author: 'Stephen King',
|
|
price: '$16.99',
|
|
cover: '/book4.png',
|
|
},
|
|
{
|
|
title: 'The Obsession',
|
|
author: 'Jesse Q. Sutanto',
|
|
price: '$8.99',
|
|
cover: '/book5.png',
|
|
},
|
|
{
|
|
title: 'Unlikely Story',
|
|
author: 'Ali Rosen',
|
|
price: '$2.99',
|
|
cover: '/book6.png',
|
|
},
|
|
{
|
|
title: 'Thrill Ride',
|
|
author: 'Amy Ratcliffe',
|
|
price: '$9.99',
|
|
cover: '/book7.png',
|
|
},
|
|
];
|
|
|
|
export default function BestSeller() {
|
|
return (
|
|
<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-[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-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 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-full">
|
|
<div className="flex items-center justify-between">
|
|
<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-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-[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>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|