update 5 files

master
mahdi 2 years ago
parent 1c2e015430
commit 471a9d13d0
  1. 10
      src/components/ThemeColor/ColorCard.js
  2. 2
      src/components/ThemeColor/default.js
  3. 26
      src/components/ThemeColor/index.js
  4. 26
      src/components/ThemeColor/util/Picker.js
  5. 14
      tailwind.config.js

@ -16,7 +16,7 @@ const ColorCard = ({
className={`w-[344px] h-[130px] flex flex-col cursor-pointer rounded-sm relative p-4 bg-${item} ${
text ? `text-${item}Text` : ""
} ${borderColor ? ` border border-${item}Border` : ""} `}
onClick={() => setItem(item)}
onClick={(e) => setItem(item, e)}
>
<ItemColor className="text-2xl font-bold" item={item} theme={theme} />
<div className="flex flex-row items-center justify-between mt-5 ">
@ -27,7 +27,7 @@ const ColorCard = ({
theme={theme}
onClick={(e) => {
e.stopPropagation();
setItem(item + "Text");
setItem(item + "Text", e);
}}
/>
)}
@ -38,7 +38,7 @@ const ColorCard = ({
theme={theme}
onClick={(e) => {
e.stopPropagation();
setItem(item + "Border");
setItem(item + "Border", e);
}}
/>
)}
@ -51,7 +51,7 @@ const ColorCard = ({
className={`flex flex-col cursor-pointer rounded-sm relative p-4 w-[165px] h-[75px] bg-${item}Dark ${
text ? `text-${item}Text` : ""
}`}
onClick={() => setItem(item + "Dark")}
onClick={(e) => setItem(item + "Dark", e)}
>
<ItemColor
className=" text-lg font-bold"
@ -65,7 +65,7 @@ const ColorCard = ({
className={`flex flex-col cursor-pointer rounded-sm relative p-4 w-[165px] h-[75px] bg-${item}Light ${
text ? `text-${item}Text` : ""
}`}
onClick={() => setItem(item + "Light")}
onClick={(e) => setItem(item + "Light", e)}
>
<ItemColor
className=" text-lg font-bold"

@ -27,5 +27,5 @@ const defaultTheme = {
"2xl": "1536px",
};
const classNames =
"sm:sm md:md lg:lg xl:xl 2xl:2xl bg-primary text-primaryText bg-secondary text-secondaryText bg-primaryDark bg-primaryLight text-primaryDark text-primaryLight bg-primaryDark bg-secondaryLight text-secondaryDark text-secondaryLight bg-secondaryDark text-secondaryDark bg-background text-backgroundText bg-surface text-surfaceText border-surfaceBorder bg-info text-infoText bg-success text-successText bg-warning text-warningText bg-error text-errorText";
"bg-primary text-primaryText bg-secondary text-secondaryText bg-primaryDark bg-primaryLight text-primaryDark text-primaryLight bg-primaryDark bg-secondaryLight text-secondaryDark text-secondaryLight bg-secondaryDark text-secondaryDark bg-background text-backgroundText bg-surface text-surfaceText border-surfaceBorder bg-info text-infoText bg-success text-successText bg-warning text-warningText bg-error text-errorText";
export default defaultTheme;

@ -11,12 +11,22 @@ import { useForm } from "react-hook-form";
import Input from "../AnimatedInput/Input";
const ThemeColor = ({ inputFields }) => {
const [item, setItem] = useState(null);
const [item, setItem_] = useState(null);
const [position, setPosition] = useState({ top: 0, left: 0 });
const setItem = (nitem, e) => {
e.stopPropagation();
if (item == nitem) nitem = "";
setItem_(nitem);
setPosition({ top: e.clientY, left: e.clientX });
};
const [theme, setTheme] = useState(defaultTheme);
putTheme(theme);
return (
<div className="ltr w-full flex flex-col items-center bg-background rounded-sm border border-[#b8dff3]">
<div
className="ltr w-full flex flex-col items-center bg-background rounded-sm border border-[#b8dff3]"
onClick={() => setItem_("")}
>
<h2 className="mt-4 text-2xl text-blue-900 font-sansbold">
Theme Properties
</h2>
@ -34,7 +44,7 @@ const ThemeColor = ({ inputFields }) => {
<div className="w-full flex flex-row items-center justify-between">
<p className="text-2xl">Screens</p>
</div>
<hr className="my-2 border border-[#b8dff3]" />
<hr className="my-2 border border-[#b8dff3] nh-tf bh-3--- d" />
<p className="w-fit self-end px-2 py-0.5 bg-surface text-surfaceText text-xs rtl border border-dashed">
بعد از نوشتن عدد مورد نظر حتما از
<span className="mx-1 font-bold">px</span>
@ -77,6 +87,7 @@ const ThemeColor = ({ inputFields }) => {
Original Colors
</p>
{/* Primary && Secondary */}
<div className="flex flex-row justify-between mt-2 gap-x-5">
<ColorCard
theme={theme}
@ -140,7 +151,14 @@ const ThemeColor = ({ inputFields }) => {
</div>
</div>
</div>
{item && <Picker item={item} theme={theme} setTheme={setTheme} />}
{item && (
<Picker
item={item}
theme={theme}
setTheme={setTheme}
position={position}
/>
)}
</div>
);
};

@ -1,17 +1,23 @@
import { useState } from "react";
import { useState, useEffect } from "react";
import { SketchPicker } from "react-color";
const Picker = ({ theme, item, setTheme }) => {
const Picker = ({ theme, item, setTheme, position }) => {
const [color, setColor] = useState(theme[item]);
useEffect(() => {
setColor(theme[item]);
}, [theme,item]);
console.log({ position });
return (
<SketchPicker
className="absolute bottom-0 left-1/2"
color={color}
onChange={(updatedColor) => {
setColor(updatedColor.hex);
setTheme({ ...theme, [item]: updatedColor.hex });
}}
/>
<div className={`absolute`} style={position}>
<SketchPicker
color={color}
onChange={(updatedColor) => {
setColor(updatedColor.hex);
setTheme({ ...theme, [item]: updatedColor.hex });
}}
/>
</div>
);
};
export default Picker;

@ -34,13 +34,13 @@ module.exports = {
error: "var(--theme-error)",
errorText: "var(--theme-errorText)",
},
screens: {
sm: "var(--theme-sm)",
md: "var(--theme-md)",
lg: "var(--theme-lg)",
xl: "var(--theme-xl)",
"2xl": "var(--theme-2xl)",
},
// screens: {
// sm: "var(--theme-sm)",
// md: "var(--theme-md)",
// lg: "var(--theme-lg)",
// xl: "var(--theme-xl)",
// "2xl": "var(--theme-2xl)",
// },
},
plugins: [
require("@themesberg/flowbite/plugin"),

Loading…
Cancel
Save