|
|
|
import React from "react";
|
|
|
|
|
|
|
|
import jet from "./jet.png";
|
|
|
|
import style from "./style.png";
|
|
|
|
import pay from "./pay.png";
|
|
|
|
import pindo from "./pindo.png";
|
|
|
|
import mamoriat from "./mamoriat.png";
|
|
|
|
import plus from "./plus.png";
|
|
|
|
import club from "./club.png";
|
|
|
|
import more from "./more2.svg";
|
|
|
|
|
|
|
|
const Categories = ({ items }) => {
|
|
|
|
return (
|
|
|
|
<section className="my-10 w-7/12 mx-auto">
|
|
|
|
<div className="flex flex-row items-center justify-between">
|
|
|
|
{items.slice(0, 7).map((item, index) => (
|
|
|
|
<div
|
|
|
|
className="flex flex-col items-center justify-center cursor-pointer"
|
|
|
|
key={index}
|
|
|
|
>
|
|
|
|
<img src={item.image} className="w-14" />
|
|
|
|
<span className="text-xs mt-3">{item.title}</span>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
<div
|
|
|
|
// className={`${items.length > 9 ? "bg-blue-600" : "bg-red-600"}`}
|
|
|
|
className="flex flex-col items-center justify-center "
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
style={{ background: "#f0f0f1" }}
|
|
|
|
className="cursor-pointer rounded-full w-14 h-14 p-2 flex flex-col items-center justify-center"
|
|
|
|
>
|
|
|
|
<img src={more} className="w-8 rotate-90" />
|
|
|
|
</div>
|
|
|
|
<span className="text-xs mt-3">بیشتر</span>{" "}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Categories;
|
|
|
|
|
|
|
|
Categories.defaultProps = {
|
|
|
|
items: [
|
|
|
|
{
|
|
|
|
image: jet,
|
|
|
|
title: "دیجی کالا جت",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: style,
|
|
|
|
title: "دیجی استایل",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: pay,
|
|
|
|
title: "دیجی پی",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: pindo,
|
|
|
|
title: "پیندو",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: mamoriat,
|
|
|
|
title: "ماموریت ها",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: plus,
|
|
|
|
title: "دیجی پلاس",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: club,
|
|
|
|
title: "دیجی کلاب",
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|