update src/Views/Home/Main/index.js, src/components/MiniComponents/Folderlist/index.js and data.js

src/Views/Home/Main/index.js

@@ -3,12 +3,14 @@ import React from "react";
 import { connect } from "react-redux";
 
 import Code from "../../../components/Code";
+import ThemeList from "../../../components/ThemeList";
 
 function Main({ activeComponent }) {
   return (
     <div className="lg:flex lg:flex-col lg:w-5/6 lg:h-full border-r border-gray-200 ">
       <header className="w-full flex flex-row items-center justify-end h-16 px-5 py-4 bg-gray-700 text-white">
-        :Choose Theme
+        <ThemeList />
+        <p className="mr-4"> :Choose Theme</p>
       </header>
       <section className="w-full lg:overflow-y-scroll py-5 px-10 flex-1 flex-col bg-[#f5f5f5] overflow-y-auto scrollYDesign">
         <h1 className="font-sansbold text-3xl text-left">

src/components/ThemeColor/index.js

@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import SwitchDesign from "../SwitchDesign/Switch";
+
+const ThemeColor = () => {
+  const colors = ["#9253a1", "#f063a4", "#2dc5f4"];
+
+  const [background, setBackground] = useState("#071415");
+  const [current, setCurrent] = useState(null);
+
+  return (
+    <div className="w-full h-screen flex flex-col items-center bg-[#e1f5ff] rounded-sm border border-[#b8dff3]">
+      <h2 className="mt-4 text-2xl text-blue-900 font-sansbold">
+        Theme Properties
+      </h2>
+      <p className="mt-2 px-2 py-0.5 bg-blue-900 text-white font-sansbold rounded-sm">
+        Theme Name
+      </p>
+      <p className="text-xs mt-2 text-blue-900 font-sansbold">
+        Version:
+        <span className="ml-1">1</span>
+      </p>
+      <div className="w-full flex flex-row items-center justify-between mt-7">
+        {/* right */}
+        <div className="bg-purple-400 w-1/2">fsd</div>
+        {/* left */}
+        <div className="w-1/2 flex flex-col items-center">
+          <div className="w-full flex flex-row items-center justify-between p-4">
+            <div className="flex flex-row items-center justify-between">
+              <span className="text-xs ml-2">Dark</span> <SwitchDesign />
+            </div>
+            <p className="text-2xl">The Color System</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ThemeColor;
+
+// <div style={{ background: background }} className="h-screen w-full">
+//   {current != null && <h1>Copied {current}</h1>}
+//   <div className=" flex flex-row item-center justify-center">
+//     {colors.map((color, index) => (
+//       <div key={index} className="card">
+//         <div
+//           style={{ background: color }}
+//           className="box w-20 h-20 rounded p-5 cursor-pointer"
+//           onClick={() => setBackground(color)}
+//         >
+//           fdsfsds
+//         </div>
+//       </div>
+//     ))}
+//   </div>
+// </div>

src/components/ThemeList/index.js

@@ -0,0 +1,41 @@
+import React from "react";
+import Button from "../ButtonDesign/Button";
+
+const ThemeList = ({ items }) => {
+  return (
+    <div>
+      <section
+        className="flex flex-row items-center justify-end gap-4 no-scrollbar tabbar overflow-x-scroll scrolling-touch"
+        onMouseDown={(e) => {
+          const slider = window.document.querySelector(".tabbar");
+          window.isDown = true;
+          window.startX = e.pageX - slider.offsetLeft;
+          window.scrollLeft = slider.scrollLeft;
+        }}
+        onMouseLeave={(e) => {
+          window.isDown = false;
+        }}
+        onMouseUp={(e) => {
+          window.isDown = false;
+        }}
+        onMouseMove={(e) => {
+          const slider = window.document.querySelector(".tabbar");
+          if (!window.isDown) return;
+          e.preventDefault();
+          const x = e.pageX - slider.offsetLeft;
+          const walk = (x - window.startX) * 1;
+          slider.scrollLeft = window.scrollLeft - walk;
+        }}
+      >
+        <Button
+          text={"Theme Color1"}
+          className="bg-[#94A3B8] text-[#374151] font-sansbold rounded-sm px-2 py-0.5"
+        />
+      </section>
+    </div>
+  );
+};
+
+export default ThemeList;
+
+ThemeList.defaultProps = {};

src/redux/data.js

@@ -49,6 +49,7 @@ import ProductGallery from "../components/ProductGallery";
 import ProductSalesAmount from "../components/ProductSalesAmount";
 import Avatar from "../components/Avatar";
 import Timeline from "../components/Timeline";
+import ThemeColor from "../components/ThemeColor";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -763,6 +764,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "1Theme Color",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "1Theme Color",
+      component: <ThemeColor />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",