You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
1.8 KiB
75 lines
1.8 KiB
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: "دیجی کلاب", |
|
}, |
|
], |
|
};
|
|
|