88 lines
2.3 KiB
TypeScript
88 lines
2.3 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 h-full flex flex-col py-4 items-center justify-start bg-white">
|
||
|
|
<div className="w-[1280px] h-[282px] bg-slate-400 rounded-md">
|
||
|
|
<Image
|
||
|
|
src="/images/Banner.png"
|
||
|
|
alt="advertizers"
|
||
|
|
width={1280}
|
||
|
|
height={282}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="w-full px-4 bg-[#F3F3F3] mt-6 p-4 flex justify-center items-center">
|
||
|
|
<div className="flex flex-wrap gap-4">
|
||
|
|
{categories.map((category) => (
|
||
|
|
<button
|
||
|
|
key={category}
|
||
|
|
className={`px-5 py-2 rounded-md cursor-pointer duration-300 ${
|
||
|
|
selectedCategory === category
|
||
|
|
? "bg-black text-white"
|
||
|
|
: "bg-white text-black"
|
||
|
|
}`}
|
||
|
|
onClick={() => handleCategoryClick(category)}
|
||
|
|
>
|
||
|
|
{category}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="w-[1280px] m-6 grid sm:grid-cols-1 md:grid-cols-5 gap-2">
|
||
|
|
{images.map((image, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="flex w-full h-full flex-col items-center justify-start rounded-md"
|
||
|
|
>
|
||
|
|
<Image
|
||
|
|
key={index}
|
||
|
|
src={image}
|
||
|
|
alt="advertizers"
|
||
|
|
width={1290}
|
||
|
|
height={280}
|
||
|
|
/>
|
||
|
|
<button className="px-15 py-1 border border-slate-800 rounded cursor-pointer">
|
||
|
|
List in Ebook
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Page;
|