diff --git a/src/components/Cards/TrackItemCard.jsx b/src/components/Cards/TrackItemCard.jsx new file mode 100644 index 0000000..6d14a23 --- /dev/null +++ b/src/components/Cards/TrackItemCard.jsx @@ -0,0 +1,168 @@ +import React, { useState } from "react"; +import { Link } from "react-router-dom"; +// import { toast } from "react-toastify"; +import localImgLoad from "../../lib/localImgLoad"; +import CountDown from "../Helpers/CountDown"; +import Icons from "../Helpers/Icons"; + +export default function TrackItemCard({ datas, hidden = false }) { + const [addFavorite, setValue] = useState(false); + const [options, setOption] = useState(false); + const favoriteHandler = () => { + if (!addFavorite) { + setValue(true); + } else { + setValue(false); + } + }; + return ( +
+
+ {/* thumbnail */} +
+ {/* thumbnail image */} +
+
+ + + + setOption(!options)} + className="w-7 h-7 flex justify-center items-center bg-white rounded-full cursor-pointer" + > + + + {options && ( +
setOption(!options)} + className="w-full h-screen fixed top-0 left-0 z-10" + >
+ )} +
+
    +
  • setOption(!options)} + className="text-thin-light-gray tracking-wide text-xs cursor-pointer" + > +
    + + + + + + + Share + +
    +
    • +
  • setOption(!options)} + className="text-thin-light-gray dark:text-white tracking-wide text-xs cursor-pointer" + > +
    + + + + + + + Report + +
    +
    • +
+
+
+ {hidden && ( +
+ + + + + + + +
+ )} +
+
+ {/* user */} +
+
+ user +
+

+ Owned by + + {datas.username} + +

+
+ +
+ +
+ ); +} diff --git a/src/components/Tracking/TrackCategory.jsx b/src/components/Tracking/TrackCategory.jsx new file mode 100644 index 0000000..8cb6743 --- /dev/null +++ b/src/components/Tracking/TrackCategory.jsx @@ -0,0 +1,103 @@ +import React, { useRef } from "react"; +import TrackItemCard from "../Cards/TrackItemCard"; +import Icons from "../Helpers/Icons"; +import SliderCom from "../Helpers/SliderCom"; + +export default function TrackCategoy({ className, trending }) { + const settings = { + arrows: false, + slidesToShow: 4, + slidesToScroll: 4, + infinite: true, + responsive: [ + { + breakpoint: 1025, + settings: { + slidesToShow: 3, + slidesToScroll: 3, + }, + }, + { + breakpoint: 769, + settings: { + slidesToShow: 2, + slidesToScroll: 2, + }, + }, + { + breakpoint: 619, + settings: { + slidesToShow: 1, + slidesToScroll: 1, + }, + }, + ], + }; + const trendingSlider = useRef(null); + const prevHandler = () => { + trendingSlider.current.slickPrev(); + }; + const nextHandler = () => { + trendingSlider.current.slickNext(); + }; + return ( +
+ {/* heading */} +
+
+

Select Tracking

+
+
+ + +
+
+ {/* trending products */} +
+ + {trending && + trending.length > 0 && + trending.map((item) => ( + + ))} + +
+
+ ); +} diff --git a/src/components/Tracking/TrackingTable.jsx b/src/components/Tracking/TrackingTable.jsx index a13a59b..51b4225 100755 --- a/src/components/Tracking/TrackingTable.jsx +++ b/src/components/Tracking/TrackingTable.jsx @@ -17,7 +17,7 @@ export default function TrackingTable({ className }) {

- Tracking + Recent Tracking

+