top sliders
This commit is contained in:
CHIEFSOFT\ameye
@@ -1,22 +1,24 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import RecomendedSliders from "./RecomendedSliders";
|
||||
|
||||
export default function CommonHead({ className,commonHeadData }) {
|
||||
const vvv= commonHeadData();
|
||||
console.log("UUUUUUUU-",vvv);
|
||||
return (
|
||||
<div
|
||||
className={`create-nft w-full lg:h-[140px] shadow lg:flex rounded-lg justify-between items-center md:p-9 p-4 bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] -2 border-pink mb-10 ${
|
||||
className={`create-nft w-full lg:h-[140px] shadow lg:flex rounded-lg justify-between items-center md:p-2 p-2 bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] -2 border-pink mb-10 ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
<div className="lg:w-8/12 w-full mb-8 lg:mb-0">
|
||||
<h1 className="text-2xl text-dark-gray dark:text-white font-bold mb-2">
|
||||
This is common head which will appear as needed , will take many shape
|
||||
</h1>
|
||||
<p className="text-base text-thin-light-gray tracking-wide">
|
||||
some space for extra texts here
|
||||
</p>
|
||||
{/*<h1 className="text-2xl text-dark-gray dark:text-white font-bold mb-2">*/}
|
||||
{/* This is common head which will appear as needed , will take many shape*/}
|
||||
{/*</h1>*/}
|
||||
{/*<p className="text-base text-thin-light-gray tracking-wide">*/}
|
||||
{/* some space for extra texts here*/}
|
||||
{/*</p>*/}
|
||||
<RecomendedSliders />
|
||||
</div>
|
||||
<div className="flex-1 flex lg:justify-end">
|
||||
<div className="flex items-center space-x-5">
|
||||
|
||||
@@ -0,0 +1,254 @@
|
||||
import React, { useRef } from "react";
|
||||
import top from "../../assets/images/top-buyer-1png.png";
|
||||
import top2 from "../../assets/images/top-buyer-2.png";
|
||||
import top3 from "../../assets/images/top-buyer-3.png";
|
||||
import top4 from "../../assets/images/top-buyer-4.png";
|
||||
import Icons from "../Helpers/Icons";
|
||||
import SliderCom from "../Helpers/SliderCom";
|
||||
|
||||
export default function RecomendedSliders({ className }) {
|
||||
const settings = {
|
||||
arrows: false,
|
||||
dots: false,
|
||||
infinite: true,
|
||||
autoplay: true,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 426,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
const sellSlider = useRef(null);
|
||||
const buySlider = useRef(null);
|
||||
const prevHandler = (value) => {
|
||||
if (value === "sell") {
|
||||
sellSlider.current.slickPrev();
|
||||
}
|
||||
if (value === "buy") {
|
||||
buySlider.current.slickPrev();
|
||||
}
|
||||
};
|
||||
const nextHandler = (value) => {
|
||||
if (value === "sell") {
|
||||
sellSlider.current.slickNext();
|
||||
}
|
||||
if (value === "buy") {
|
||||
buySlider.current.slickNext();
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{/*<div className="heading flex justify-between items-center mb-4">*/}
|
||||
{/* <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
|
||||
{/* Top Seller*/}
|
||||
{/* </h1>*/}
|
||||
{/* <div className="slider-btns flex space-x-4">*/}
|
||||
{/* <button*/}
|
||||
{/* onClick={() => nextHandler("sell")}*/}
|
||||
{/* type="button"*/}
|
||||
{/* className="transform rotate-180 text-dark-gray dark:text-white dark:opacity-25"*/}
|
||||
{/* >*/}
|
||||
{/* <Icons name="arrows" />*/}
|
||||
{/* </button>*/}
|
||||
{/* <button*/}
|
||||
{/* onClick={() => prevHandler("sell")}*/}
|
||||
{/* type="button"*/}
|
||||
{/* className="transform rotate-180"*/}
|
||||
{/* >*/}
|
||||
{/* <div className=" text-dark-gray dark:text-white">*/}
|
||||
{/* <svg*/}
|
||||
{/* width="11"*/}
|
||||
{/* height="19"*/}
|
||||
{/* viewBox="0 0 11 19"*/}
|
||||
{/* fill="none"*/}
|
||||
{/* xmlns="http://www.w3.org/2000/svg"*/}
|
||||
{/* >*/}
|
||||
{/* <path*/}
|
||||
{/* d="M9.09766 1.1499L1.13307 9.11449L9.09766 17.0791"*/}
|
||||
{/* stroke="url(#paint0_linear_220_23410)"*/}
|
||||
{/* strokeWidth="2"*/}
|
||||
{/* strokeLinecap="round"*/}
|
||||
{/* strokeLinejoin="round"*/}
|
||||
{/* />*/}
|
||||
{/* <defs>*/}
|
||||
{/* <linearGradient*/}
|
||||
{/* id="paint0_linear_220_23410"*/}
|
||||
{/* x1="9.09766"*/}
|
||||
{/* y1="1.1499"*/}
|
||||
{/* x2="-4.2474"*/}
|
||||
{/* y2="7.96749"*/}
|
||||
{/* gradientUnits="userSpaceOnUse"*/}
|
||||
{/* >*/}
|
||||
{/* <stop stopColor="#F539F8" />*/}
|
||||
{/* <stop offset="0.416763" stopColor="#C342F9" />*/}
|
||||
{/* <stop offset="1" stopColor="#5356FB" />*/}
|
||||
{/* </linearGradient>*/}
|
||||
{/* </defs>*/}
|
||||
{/* </svg>*/}
|
||||
{/* </div>*/}
|
||||
{/* </button>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
<div className="slider-content">
|
||||
<SliderCom settings={settings} selector={sellSlider}>
|
||||
<div className="item commonHeaderSliderItem">
|
||||
{/* title */}
|
||||
<div className="flex justify-center">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white">
|
||||
This is short title
|
||||
</p>
|
||||
</div>
|
||||
{/* username */}
|
||||
<div className="flex justify-center mb-1">
|
||||
<p className="text-xs text-thin-light-gray">
|
||||
Some wondersull text here and more
|
||||
</p>
|
||||
</div>
|
||||
{/* items */}
|
||||
<div className="flex justify-center">
|
||||
<div className="flex space-x-1 items-center text-purple text-xs">
|
||||
<span>(button)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="item commonHeaderSliderItem">
|
||||
{/* title */}
|
||||
<div className="flex justify-center">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white">
|
||||
This is short title
|
||||
</p>
|
||||
</div>
|
||||
{/* username */}
|
||||
<div className="flex justify-center mb-1">
|
||||
<p className="text-xs text-thin-light-gray">
|
||||
Some wondersull text here and more
|
||||
</p>
|
||||
</div>
|
||||
{/* items */}
|
||||
<div className="flex justify-center">
|
||||
<div className="flex space-x-1 items-center text-purple text-xs">
|
||||
<span>(button)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="item commonHeaderSliderItem">
|
||||
{/* title */}
|
||||
<div className="flex justify-center">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white">
|
||||
This is short title
|
||||
</p>
|
||||
</div>
|
||||
{/* username */}
|
||||
<div className="flex justify-center mb-1">
|
||||
<p className="text-xs text-thin-light-gray">
|
||||
Some wondersull text here and more
|
||||
</p>
|
||||
</div>
|
||||
{/* items */}
|
||||
<div className="flex justify-center">
|
||||
<div className="flex space-x-1 items-center text-purple text-xs">
|
||||
<span>(button)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="item commonHeaderSliderItem">
|
||||
{/* title */}
|
||||
<div className="flex justify-center">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white">
|
||||
This is short title
|
||||
</p>
|
||||
</div>
|
||||
{/* username */}
|
||||
<div className="flex justify-center mb-1">
|
||||
<p className="text-xs text-thin-light-gray">
|
||||
Some wondersull text here and more
|
||||
</p>
|
||||
</div>
|
||||
{/* items */}
|
||||
<div className="flex justify-center">
|
||||
<div className="flex space-x-1 items-center text-purple text-xs">
|
||||
<span>(button)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="item commonHeaderSliderItem">
|
||||
{/* title */}
|
||||
<div className="flex justify-center">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white">
|
||||
This is short title
|
||||
</p>
|
||||
</div>
|
||||
{/* username */}
|
||||
<div className="flex justify-center mb-1">
|
||||
<p className="text-xs text-thin-light-gray">
|
||||
Some wondersull text here and more
|
||||
</p>
|
||||
</div>
|
||||
{/* items */}
|
||||
<div className="flex justify-center">
|
||||
<div className="flex space-x-1 items-center text-purple text-xs">
|
||||
<span>(button)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="item commonHeaderSliderItem">
|
||||
{/* title */}
|
||||
<div className="flex justify-center">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white">
|
||||
This is short title
|
||||
</p>
|
||||
</div>
|
||||
{/* username */}
|
||||
<div className="flex justify-center mb-1">
|
||||
<p className="text-xs text-thin-light-gray">
|
||||
Some wondersull text here and more
|
||||
</p>
|
||||
</div>
|
||||
{/* items */}
|
||||
<div className="flex justify-center">
|
||||
<div className="flex space-x-1 items-center text-purple text-xs">
|
||||
<span>(button)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="item commonHeaderSliderItem">
|
||||
{/* title */}
|
||||
<div className="flex justify-center">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white">
|
||||
This is short title
|
||||
</p>
|
||||
</div>
|
||||
{/* username */}
|
||||
<div className="flex justify-center mb-1">
|
||||
<p className="text-xs text-thin-light-gray">
|
||||
Some wondersull text here and more
|
||||
</p>
|
||||
</div>
|
||||
{/* items */}
|
||||
<div className="flex justify-center">
|
||||
<div className="flex space-x-1 items-center text-purple text-xs">
|
||||
<span>(button)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</SliderCom>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user