104 lines
3.1 KiB
TypeScript
104 lines
3.1 KiB
TypeScript
"use client";
|
|
import Image from "next/image";
|
|
import React, { useState } from "react";
|
|
|
|
const categories = [
|
|
"All advertising",
|
|
"Commissioned",
|
|
"Discount Ads",
|
|
"Brands Ads",
|
|
"Ebooks",
|
|
"Author ads",
|
|
"Artist Ads",
|
|
"Last Month ads",
|
|
"Upcoming ads",
|
|
];
|
|
|
|
const images = [
|
|
"/images/Airbnb_1.png",
|
|
"/images/Airbnb_2.png",
|
|
"/images/Airbnb_3.png",
|
|
"/images/Amazon_AWS.png",
|
|
"/images/Amazon_echo.png",
|
|
"/images/Element.png",
|
|
"/images/Huawei.png",
|
|
"/images/Netflix.png",
|
|
"/images/Qonto.png",
|
|
"/images/Samsung.png",
|
|
];
|
|
|
|
const Page: React.FC = () => {
|
|
const [selectedCategory, setSelectedCategory] = useState<string>(
|
|
categories[0]
|
|
);
|
|
|
|
const handleCategoryClick = (category: string) => {
|
|
setSelectedCategory(category);
|
|
};
|
|
|
|
return (
|
|
<div className="w-full flex flex-col py-4 items-center justify-start bg-white">
|
|
{/* Banner - responsive width */}
|
|
<div className="w-full max-w-7xl px-4 sm:px-6">
|
|
<div className="w-full bg-slate-400 rounded-md overflow-hidden">
|
|
<Image
|
|
src="/images/Banner.png"
|
|
alt="advertizers"
|
|
width={1280}
|
|
height={282}
|
|
className="w-full h-auto object-cover"
|
|
priority
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Categories - scrollable on mobile */}
|
|
<div className="w-full bg-[#F3F3F3] mt-6 py-4 px-2">
|
|
<div className="overflow-x-auto max-w-7xl mx-auto">
|
|
<div className="flex flex-nowrap md:flex-wrap min-w-max md:min-w-0 gap-2 md:gap-4 px-2">
|
|
{categories.map((category) => (
|
|
<button
|
|
key={category}
|
|
className={`px-3 md:px-5 py-2 rounded-md whitespace-nowrap text-sm md:text-base cursor-pointer transition duration-300 ${
|
|
selectedCategory === category
|
|
? "bg-black text-white"
|
|
: "bg-white text-black"
|
|
}`}
|
|
onClick={() => handleCategoryClick(category)}
|
|
>
|
|
{category}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Image grid - responsive columns */}
|
|
<div className="w-full max-w-7xl px-4 sm:px-6 my-6">
|
|
<div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 md:gap-4">
|
|
{images.map((image, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex flex-col items-center justify-start rounded-md"
|
|
>
|
|
<div className="w-full mb-2 rounded-md overflow-hidden">
|
|
<Image
|
|
src={image}
|
|
alt={`advertizers-${index}`}
|
|
width={300}
|
|
height={200}
|
|
className="w-full h-auto object-cover"
|
|
/>
|
|
</div>
|
|
<button className="px-3 py-1 text-sm md:text-base border border-slate-800 rounded cursor-pointer hover:bg-slate-100 transition-colors">
|
|
List in Ebook
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Page; |