90 lines
2.9 KiB
TypeScript
90 lines
2.9 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: '/book8.png',
|
|
},
|
|
{
|
|
title: 'Authority',
|
|
author: 'Jeff Vandermeer',
|
|
price: '$11.99',
|
|
cover: '/book9.png',
|
|
},
|
|
{
|
|
title: 'Babe Hager',
|
|
author: 'Babe Hager',
|
|
price: '$2.99',
|
|
cover: '/book10.png',
|
|
},
|
|
{
|
|
title: 'Never Flinch',
|
|
author: 'Stephen King',
|
|
price: '$16.99',
|
|
cover: '/book11.png',
|
|
},
|
|
{
|
|
title: 'The Obsession',
|
|
author: 'Jesse Q. Sutanto',
|
|
price: '$8.99',
|
|
cover: '/book12.png',
|
|
},
|
|
{
|
|
title: 'Unlikely Story',
|
|
author: 'Ali Rosen',
|
|
price: '$2.99',
|
|
cover: '/book13.png',
|
|
},
|
|
{
|
|
title: 'Thrill Ride',
|
|
author: 'Amy Ratcliffe',
|
|
price: '$9.99',
|
|
cover: '/book14.png',
|
|
},
|
|
];
|
|
|
|
export default function NewRelease() {
|
|
return (
|
|
<div className="w-full 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>
|
|
</div>
|
|
<div className="border-b-2 border-[#D1D5DB] mb-6 w-full" />
|
|
<div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2">
|
|
{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">
|
|
<Image
|
|
src={book.cover}
|
|
alt={book.title}
|
|
fill
|
|
style={{ objectFit: 'cover', borderRadius: 4 }}
|
|
className="transition group-hover:scale-105 duration-200"
|
|
/>
|
|
</div>
|
|
<div className="px-1 pt-2 flex flex-col gap-1 w-[158px]">
|
|
<div className="flex items-center justify-between">
|
|
<span className="font-[400] text-[14px] text-[#151C4F]" 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" />
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|