added cat section

master
mahdi andalib 3 years ago
parent 7f1edaa683
commit 0c39960fff
  1. 16
      src/components/Digikala/Categories.js
  2. BIN
      src/components/Digikala/General.png
  3. 35
      src/components/Digikala/Offer.js
  4. 2
      src/components/Digikala/index.js
  5. 10
      src/components/Digikala/more2.svg
  6. 6
      src/components/Digikala/white-left-arrow.svg
  7. 8
      src/components/Digikala/white-right-arrow.svg

@ -7,11 +7,12 @@ import pindo from "./pindo.png";
import mamoriat from "./mamoriat.png"; import mamoriat from "./mamoriat.png";
import plus from "./plus.png"; import plus from "./plus.png";
import club from "./club.png"; import club from "./club.png";
import more from "./more2.svg";
const Categories = ({ items }) => { const Categories = ({ items }) => {
return ( return (
<section className="my-10 w-7/12 mx-auto"> <section className="my-10 w-7/12 mx-auto">
<div className="flex flex-row items-center justify-between bg-red-200 "> <div className="flex flex-row items-center justify-between">
{items.slice(0, 7).map((item, index) => ( {items.slice(0, 7).map((item, index) => (
<div <div
className="flex flex-col items-center justify-center cursor-pointer" className="flex flex-col items-center justify-center cursor-pointer"
@ -21,8 +22,17 @@ const Categories = ({ items }) => {
<span className="text-xs mt-3">{item.title}</span> <span className="text-xs mt-3">{item.title}</span>
</div> </div>
))} ))}
<div className={`${items.length > 9 ? "bg-blue-600" : "bg-red-600"}`}> <div
iran // 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>
</div> </div>
</section> </section>

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

@ -0,0 +1,35 @@
import React from "react";
import leftArrow from "./white-left-arrow.svg";
import General from "./General.png";
const Offer = () => {
return (
<section
className="my-10 w-7/12 mx-auto rounded-2xl p-5"
style={{ backgroundColor: "#ef3a4f" }}
>
<div className="bg-orange-300">
{/* right */}
<div className="flex flex-col items-center justify-center bg-yellow-300">
<span className="text-base text-center text-white font-bold">
پیشنهاد
<br />
شگفت
<br />
انگیز
</span>
<img src={General} className="w-28 my-2" />
<button className="text-sm text-white flex flex-row items-center">
مشاهده همه
<img src={leftArrow} className="w-3 mr-1" />
</button>
</div>
{/* left */}
<div className="flex-1 bg-blue-300"></div>
</div>
</section>
);
};
export default Offer;

@ -2,12 +2,14 @@ import React from "react";
import ImageSlider from "./ImageSlider"; import ImageSlider from "./ImageSlider";
import { SliderData } from "./SliderData"; import { SliderData } from "./SliderData";
import Categories from "./Categories"; import Categories from "./Categories";
import Offer from "./Offer";
const Digikala = () => { const Digikala = () => {
return ( return (
<div> <div>
<ImageSlider slides={SliderData} /> <ImageSlider slides={SliderData} />
<Categories /> <Categories />
<Offer />
</div> </div>
); );
}; };

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="vuesax_linear_more" data-name="vuesax/linear/more" transform="translate(-188 580) rotate(-90)">
<g id="more">
<path id="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(559 198)" fill="#6397b5"/>
<path id="Vector-2" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(573 198)" fill="#6397b5"/>
<path id="Vector-3" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(566 198)" fill="#6397b5"/>
<path id="Vector-4" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(556 188)" fill="#6397b5" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 749 B

@ -0,0 +1,6 @@
<svg id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" xmlns="http://www.w3.org/2000/svg" width="33.524" height="33.524" viewBox="0 0 33.524 33.524">
<g id="arrow-left" transform="translate(0 0)">
<path id="Vector" d="M9.914,22.126.807,13.018a2.774,2.774,0,0,1,0-3.911L9.914,0" transform="translate(11.038 5.699)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M0,0H33.524V33.524H0Z" transform="translate(33.524 33.524) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 587 B

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="37.14" height="37.14" viewBox="0 0 37.14 37.14">
<g id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" transform="translate(401.14 289.14) rotate(180)">
<g id="arrow-left" transform="translate(364 252)">
<path id="Vector" d="M10.983,24.512.894,14.423a3.073,3.073,0,0,1,0-4.333L10.983,0" transform="translate(12.229 6.314)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M0,0H37.14V37.14H0Z" transform="translate(37.14 37.14) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 655 B

Loading…
Cancel
Save