icons added

src/components/Digikala/Categories.js

@@ -0,0 +1,65 @@
+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";
+
+const Categories = ({ items }) => {
+  return (
+    <section className="my-10 w-7/12 mx-auto">
+      <div className="flex flex-row items-center justify-between bg-red-200 ">
+        {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"}`}>
+          iran
+        </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: "دیجی کلاب",
+    },
+  ],
+};

src/components/Digikala/index.js

@@ -1,11 +1,13 @@
 import React from "react";
 import ImageSlider from "./ImageSlider";
 import { SliderData } from "./SliderData";
+import Categories from "./Categories";
 
 const Digikala = () => {
   return (
     <div>
       <ImageSlider slides={SliderData} />
+      <Categories />
     </div>
   );
 };