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

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

Loading…
Cancel
Save