added time line

master
mahdi andalib 3 years ago
parent a97f1eff50
commit 05373ba7da
  1. 3
      src/App.js
  2. 8
      src/components/SelectYear/arrow-down.svg
  3. 8
      src/components/SelectYear/arrow-up.svg
  4. 100
      src/components/SelectYear/index.js
  5. 11
      src/components/SelectYear/index.scss
  6. 6
      src/components/TimeLineComponent/index.js

@ -100,7 +100,7 @@ function App() {
{/* <Toast /> */} {/* <Toast /> */}
{/* <ProductSuggestion /> */} {/* <ProductSuggestion /> */}
{/* <ProductImage /> */} {/* <ProductImage /> */}
{/* <ProductTab /> */} <ProductTab />
{/* <ProductStatusCard /> */} {/* <ProductStatusCard /> */}
{/* <AdvertisementDesign1 /> */} {/* <AdvertisementDesign1 /> */}
{/* <AdvertisementDesign2 /> */} {/* <AdvertisementDesign2 /> */}
@ -117,6 +117,7 @@ function App() {
{/* <ReactTable4 /> */} {/* <ReactTable4 /> */}
{/* <ReactTable5 /> */} {/* <ReactTable5 /> */}
{/* <Digikala /> */} {/* <Digikala /> */}
<SidebarDesign2 />
{/* <HeaderDesign1 /> */} {/* <HeaderDesign1 /> */}
{/* <div className="flex"> {/* <div className="flex">
<SidebarDesign2 className="w-1/5" /> <SidebarDesign2 className="w-1/5" />

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="vuesax_bold_arrow-down" data-name="vuesax/bold/arrow-down" transform="translate(-236 -252)">
<g id="arrow-down">
<path id="Vector" d="M12.919,0H1.079a1.077,1.077,0,0,0-.76,1.84L5.5,7.02a2.131,2.131,0,0,0,3.01,0l1.97-1.97,3.21-3.21A1.082,1.082,0,0,0,12.919,0Z" transform="translate(241.001 260.18)" fill="#292d32"/>
<path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(260 276) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 573 B

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="vuesax_bold_arrow-up" data-name="vuesax/bold/arrow-up" transform="translate(-172 -252)">
<g id="arrow-up">
<path id="Vector" d="M13.677,5.8l-3.21-3.21L8.507.623a2.131,2.131,0,0,0-3.01,0L.317,5.8a1.079,1.079,0,0,0,.76,1.84h11.84A1.077,1.077,0,0,0,13.677,5.8Z" transform="translate(177.003 260.177)" fill="#292d32"/>
<path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(196 276) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 573 B

@ -1,41 +1,81 @@
import React from "react"; import React, { useState } from "react";
import "./index.scss";
import arrowDown from "./arrow-down.svg";
import arrowUp from "./arrow-up.svg";
import Month from "./Month.js";
const SelectYear = ({ items }) => {
const [selectedYear, setSelectedYear] = useState(null);
const SelectYear = () => {
return ( return (
<section className="flex flex-row items-center bg-pink-200 mx-auto"> <section className="flex flex-row items-center mx-auto w-8/12 my-20">
<div> <div className="flex flex-col items-center">
<span>1400</span> <img src={arrowUp} />
<div className="h-32 overflow-auto overflow-x-hidden overflow-y-hidden">
{items.map((item, index) => (
<div className="flex flex-col" key={index}>
<p
onClick={() => setSelectedYear(item)}
className={`text-base my-2 cursor-pointer text-center ${
selectedYear === item
? "text-[#06BACE] font-bold text-2xl"
: "text-gray-300"
}`}
>
{item.year}
</p>
</div>
))}
</div>
<img src={arrowDown} />
</div> </div>
<div className="bg-[#06BACE] w-2 h-full rounded"></div> <div className="bg-[#06BACE] w-1.5 h-96 mx-4 rounded"></div>
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<span>فروردین</span> <span className="text-xs my-2">فروردین</span>
<span>فروردین</span> <span className="text-xs my-2">اردیبهشت</span>
<span>فروردین</span> <span className="text-xs my-2">خرداد</span>
<span>فروردین</span> <span className="text-xs my-2">تیر</span>
<span>فروردین</span> <span className="text-xs my-2">مرداد</span>
<span>فروردین</span> <span className="text-xs my-2 text-[#06BACE]">شهریور</span>
<span>فروردین</span> <span className="text-xs my-2">مهر</span>
<span>فروردین</span> <span className="text-xs my-2">آبان</span>
<span>فروردین</span> <span className="text-xs my-2">آذر</span>
<span>فروردین</span> <span className="text-xs my-2">دی</span>
<span>فروردین</span> <span className="text-xs my-2">بهمن</span>
<span>فروردین</span> <span className="text-xs my-2">اسفند</span>
</div> </div>
{/* <div className={`flex flex-col items-center`}>
{selectedYear?.components}
</div> */}
</section> </section>
); );
}; };
export default SelectYear; export default SelectYear;
// SelectYear.defaultProps = { SelectYear.defaultProps = {
// date: [ items: [
// { {
// year: "1400", year: "1400",
// months: [ components: <Month />,
// { },
{
// } year: "1399",
// ] components: <Month />,
// } },
// ] {
// } year: "1398",
components: <Month />,
},
{
year: "1397",
components: <Month />,
},
{
year: "1396",
components: <Month />,
},
],
};

@ -0,0 +1,11 @@
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.tabbar {
cursor: pointer;
}
.active2,
.active2 li a {
cursor: move !important;
}

@ -5,12 +5,16 @@ import TitleSubtitle from "../TitleSubtitle";
import Timeline from "./Timeline.js"; import Timeline from "./Timeline.js";
import search from "./gray-search-icon.svg"; import search from "./gray-search-icon.svg";
import SelectYear from "../SelectYear";
const TimeLineComponent = ({ data }) => { const TimeLineComponent = ({ data }) => {
return ( return (
<div className="px-10 py-4 mx-auto bg-white"> <div className="px-10 py-4 mx-auto bg-white">
<div className="flex flex-row items-start justify-between"> <div className="flex flex-row items-start justify-between">
<TitleSubtitle /> <div>
<TitleSubtitle />
<SelectYear />
</div>
<div className="flex-1"> <div className="flex-1">
<Timeline /> <Timeline />
</div> </div>

Loading…
Cancel
Save