woedii/app/marketplace/advertisers/page.tsx

"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;