From 83f2339a1716beba2653088b8fc92eee2561e4f2 Mon Sep 17 00:00:00 2001
From: "CHIEFSOFT\\ameye" <ameye@chiefsfot.com>
Date: Fri, 9 Jun 2023 21:09:57 -0400
Subject: [PATCH] top sliders

---
 src/components/UserHeader/CommonHead.jsx      |  16 +-
 .../UserHeader/RecomendedSliders.jsx          | 254 ++++++++++++++++++
 src/index.css                                 |   6 +
 3 files changed, 269 insertions(+), 7 deletions(-)
 create mode 100644 src/components/UserHeader/RecomendedSliders.jsx

diff --git a/src/components/UserHeader/CommonHead.jsx b/src/components/UserHeader/CommonHead.jsx
index 2426423..4865bdc 100644
--- a/src/components/UserHeader/CommonHead.jsx
+++ b/src/components/UserHeader/CommonHead.jsx
@@ -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">
diff --git a/src/components/UserHeader/RecomendedSliders.jsx b/src/components/UserHeader/RecomendedSliders.jsx
new file mode 100644
index 0000000..3f99d00
--- /dev/null
+++ b/src/components/UserHeader/RecomendedSliders.jsx
@@ -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>
+        </>
+    );
+}
diff --git a/src/index.css b/src/index.css
index 41f66de..75b3d78 100644
--- a/src/index.css
+++ b/src/index.css
@@ -34,6 +34,12 @@
   width: 100%;
   text-align: center;
 }
+.commonHeaderSliderItem{
+  background-color: aliceblue;
+  border-radius: 10px;
+  margin: 0px 5px 0px 5px;
+  height: 95px;
+}
 .offer-slide-item{
   background: rgb(2,0,36);
   background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(3,51,2,0.782125350140056) 0%, rgba(0,212,255,0.07904411764705888) 0%, rgba(153,182,201,1) 99%);