update 6 files

master
mahdi 2 years ago
parent 44f9cabdb2
commit e829dc6484
  1. 59
      src/components/ThemeColor/ColorCard.js
  2. 59
      src/components/ThemeColor/index.js

@ -0,0 +1,59 @@
import React from "react";
import ItemColor from "./ItemColor";
const ColorCard = ({ theme, text, dark, light, item, setItem }) => {
return (
<div className="flex flex-col gap-y-3">
<div
className={`w-[344px] h-[130px] flex flex-col cursor-pointer rounded-sm relative p-4 bg-${item} ${
text ? `text-${item}Text` : ""
}`}
onClick={() => setItem(item)}
>
<ItemColor className=" text-2xl font-bold" item={item} theme={theme} />
{text && (
<ItemColor
className="self-end text-sm"
item={item + "Text"}
theme={theme}
onClick={(e) => {
e.stopPropagation();
setItem(item + "Text");
}}
/>
)}
</div>
<div className="flex flex-row justify-between">
{" "}
{dark ? (
<div
className={`flex-col cursor-pointer rounded-sm relative p-4 w-[165px] h-[75px] bg-${item}Dark ${
text ? `text-${item}Text` : ""
}`}
onClick={() => setItem(item + "Dark")}
>
<ItemColor
className=" text-lg font-bold"
item={item + "Dark"}
theme={theme}
/>
</div>
) : null}
{light ? (
<div
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")}
>
<ItemColor
className=" text-lg font-bold"
item={item + "Light"}
theme={theme}
/>
</div>
) : null}
</div>
</div>
);
};

@ -3,7 +3,7 @@ import SwitchDesign from "../SwitchDesign/Switch";
import putTheme from "./util/putTheme";
import defaultTheme from "./default";
import Picker from "./util/Picker";
import ItemColor from "./ItemColor";
import ColorCard from "./ColorCard";
const ThemeColor = () => {
const [item, setItem] = useState(null);
@ -75,60 +75,3 @@ const ThemeColor = () => {
};
export default ThemeColor;
const ColorCard = ({ theme, text, dark, light, item, setItem }) => {
return (
<div className="flex flex-col gap-y-3">
<div
className={`w-[344px] h-[130px] flex flex-col cursor-pointer rounded-sm relative p-4 bg-${item} ${
text ? `text-${item}Text` : ""
}`}
onClick={() => setItem(item)}
>
<ItemColor className=" text-2xl font-bold" item={item} theme={theme} />
{text && (
<ItemColor
className="self-end text-sm"
item={item + "Text"}
theme={theme}
onClick={(e) => {
e.stopPropagation();
setItem(item + "Text");
}}
/>
)}
</div>
<div className="flex flex-row justify-between">
{" "}
{dark ? (
<div
className={`flex-col cursor-pointer rounded-sm relative p-4 w-[165px] h-[75px] bg-${item}Dark ${
text ? `text-${item}Text` : ""
}`}
onClick={() => setItem(item + "Dark")}
>
<ItemColor
className=" text-lg font-bold"
item={item + "Dark"}
theme={theme}
/>
</div>
) : null}
{light ? (
<div
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")}
>
<ItemColor
className=" text-lg font-bold"
item={item + "Light"}
theme={theme}
/>
</div>
) : null}
</div>
</div>
);
};

Loading…
Cancel
Save