master
mahdi andalib 2 years ago
parent 4aabeddbe2
commit 8bb6514c04
  1. 12
      src/App.js
  2. 48
      src/components/SelectYear/index.js

@ -97,17 +97,17 @@ function App() {
{/* <Testttt /> */}
{/* <Design2D /> */}
{/* <Features /> */}
<Feedback />
{/* <Feedback /> */}
{/* <Alert /> */}
{/* <Toast /> */}
<ProductSuggestion />
{/* <ProductSuggestion /> */}
{/* <ProductImage /> */}
<ProductTab />
{/* <ProductTab /> */}
{/* <ProductStatusCard /> */}
{/* <AdvertisementDesign1 /> */}
{/* <AdvertisementDesign2 /> */}
{/* <AdvertisementDesign3 /> */}
<CourseChapter />
{/* <CourseChapter /> */}
{/* <SidebarMenu /> */}
{/* <SimpleBarChart /> */}
{/* <SpecifiedDomainRadarChart /> */}
@ -143,10 +143,10 @@ function App() {
{/* <CancleIcon /> */}
{/* <ProfilePicNextToEachOther /> */}
{/* <SemiDonut /> */}
<FolderTree />
{/* <FolderTree /> */}
{/* <GridListTable /> */}
{/* <PopupCard /> */}
<TimeLine />
{/* <TimeLine /> */}
{/* <TimeLineComponent /> */}
<SelectYear />
{/* <IndianaDragScroll /> */}

@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useState, useRef } from "react";
import ScrollContainer from "react-indiana-drag-scroll";
import "./index.scss";
@ -10,6 +10,12 @@ import Month from "./Month.js";
const SelectYear = ({ items }) => {
const [selectedYear, setSelectedYear] = useState(null);
const inputRef = useRef();
function focus() {
console.log(inputRef.current);
}
return (
<section className="flex flex-row items-center mx-auto w-8/12 my-20">
<div className="flex flex-col items-center">
@ -30,9 +36,13 @@ const SelectYear = ({ items }) => {
<div className="flex flex-col h-28" style={{}}>
{items.map((item, index) => (
<p
ref={inputRef}
key={index}
onClick={() => setSelectedYear(item)}
className={`text-base my-2 cursor-pointer text-center ${
// onClick={() => setSelectedYear(item)}
onClick={() => {
setSelectedYear(item);
}}
className={`text-base my-2 cursor-pointer text-center transition ease-in-out duration-300 ${
selectedYear === item
? "text-[#06BACE] font-bold text-2xl"
: "text-gray-300"
@ -47,7 +57,7 @@ const SelectYear = ({ items }) => {
</div>
<div className="bg-[#06BACE] w-1.5 h-96 mx-4 rounded"></div>
<div className={`flex flex-col items-center`}>
{selectedYear?.components}
<Month />
</div>
</section>
);
@ -58,24 +68,40 @@ export default SelectYear;
SelectYear.defaultProps = {
items: [
{
id: 1,
year: "1400",
},
{
id: 2,
year: "1399",
},
{
id: 3,
year: "1398",
},
{
id: 4,
year: "1400",
components: <Month />,
},
{
id: 5,
year: "1399",
components: <Month />,
},
{
id: 6,
year: "1398",
components: <Month />,
},
{
year: "1397",
components: <Month />,
id: 7,
year: "1400",
},
{
id: 8,
year: "1399",
},
{
year: "1396",
components: <Month />,
id: 9,
year: "1398",
},
],
};

Loading…
Cancel
Save