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

@ -27,5 +27,5 @@ const defaultTheme = {
"2xl": "1536px", "2xl": "1536px",
}; };
const classNames = 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; export default defaultTheme;

@ -11,12 +11,22 @@ import { useForm } from "react-hook-form";
import Input from "../AnimatedInput/Input"; import Input from "../AnimatedInput/Input";
const ThemeColor = ({ inputFields }) => { 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); const [theme, setTheme] = useState(defaultTheme);
putTheme(theme); putTheme(theme);
return ( 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"> <h2 className="mt-4 text-2xl text-blue-900 font-sansbold">
Theme Properties Theme Properties
</h2> </h2>
@ -34,7 +44,7 @@ const ThemeColor = ({ inputFields }) => {
<div className="w-full flex flex-row items-center justify-between"> <div className="w-full flex flex-row items-center justify-between">
<p className="text-2xl">Screens</p> <p className="text-2xl">Screens</p>
</div> </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"> <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> <span className="mx-1 font-bold">px</span>
@ -77,6 +87,7 @@ const ThemeColor = ({ inputFields }) => {
Original Colors Original Colors
</p> </p>
{/* Primary && Secondary */} {/* Primary && Secondary */}
<div className="flex flex-row justify-between mt-2 gap-x-5"> <div className="flex flex-row justify-between mt-2 gap-x-5">
<ColorCard <ColorCard
theme={theme} theme={theme}
@ -140,7 +151,14 @@ const ThemeColor = ({ inputFields }) => {
</div> </div>
</div> </div>
</div> </div>
{item && <Picker item={item} theme={theme} setTheme={setTheme} />} {item && (
<Picker
item={item}
theme={theme}
setTheme={setTheme}
position={position}
/>
)}
</div> </div>
); );
}; };

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

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

Loading…
Cancel
Save