setVisible(true)}
onMouseLeave={() => setVisible(false)}
>
@@ -15,21 +35,9 @@ const Card = ({ className, children }) => {
);
};
-const StyledCard = styled(Card)`
- width: ${(props) => `${props?.width || 0}px` || "100%"};
- height: ${(props) => `${props?.height || 0}px` || "100%"};
- background-color: ${(props) => props.color};
- border: ${(props) =>
- `${props?.borderColor ? `1px solid ${props?.borderColor}` : ""}`};
- border-radius: 4px;
- display: flex;
- justify-content: center;
- align-items: center;
-`;
-
-const StyledCardText = styled.div`
- color: ${(props) => `${props?.color}`};
-`;
+const CardText = ({ children, color }: { children: any; color: string }) => (
+
{children}
+);
type ColorCardProps = {
color: string;
@@ -42,9 +50,9 @@ const ColorCard = ({ color, width, height }: ColorCardProps) => {
const complementaryColor = calcComplementaryColor(color, "rgb");
return (
-
- {color}
-
+
+ {color}
+
);
};
diff --git a/components/ColorPickerGroup.tsx b/components/ColorPickerGroup.tsx
index 0bace8c..dac31eb 100644
--- a/components/ColorPickerGroup.tsx
+++ b/components/ColorPickerGroup.tsx
@@ -1,18 +1,11 @@
import { useState } from "react";
-import styled from "styled-components";
-import ColorPicker, { DEFAULT_RGBA } from "./ColorPicker";
+import ColorPicker from "./ColorPicker";
import Space from "./Space";
type ColorPickerType = React.ComponentProps
;
type ColorValue = Parameters[0];
-const StyleColorPickerGroup = styled.div`
- display: flex;
- /* justify-content: space-between; */
- width: 100%;
-`;
-
const ColorPickerGroup = ({
sum = 2,
onChange,
@@ -32,7 +25,12 @@ const ColorPickerGroup = ({
};
return (
-
+
{Array(sum)
.fill(undefined)
@@ -43,7 +41,7 @@ const ColorPickerGroup = ({
/>
))}
-
+
);
};
diff --git a/components/Layout.tsx b/components/Layout.tsx
index 23b4356..fe86a02 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -1,14 +1,16 @@
-import styled from "styled-components";
-
-const StyledLayout = styled.div`
- width: 800px;
- margin: auto;
- display: flex;
- padding-top: 150px;
-`;
-
const Layout = ({ children }: { children: React.ReactNode }) => {
- return {children};
+ return (
+
+ {children}
+
+ );
};
export default Layout;
diff --git a/components/Space.tsx b/components/Space.tsx
index cfa9d94..3934e56 100644
--- a/components/Space.tsx
+++ b/components/Space.tsx
@@ -1,20 +1,3 @@
-import styled from "styled-components";
-
-const StyleSpace = styled.div`
- &:not(:last-of-type) {
- margin-bottom: ${(props) =>
- props.type === "vertical" ? `${props.distance}px` : 0};
- margin-right: ${(props) =>
- props.type === "horizontal" ? `${props.distance}px` : 0};
- }
-`;
-
-const StyledSpaceContainer = styled.div`
- display: flex;
- flex-direction: ${(props) =>
- props.type === "horizontal" ? "row" : "column"};
-`;
-
const Space = ({
children,
type = "horizontal",
@@ -24,22 +7,16 @@ const Space = ({
type?: "horizontal" | "vertical";
distance?: number;
}) => {
- if (Array.isArray(children)) {
- return (
-
- {children?.map((item, index) => (
-
- {item}
-
- ))}
-
- );
- }
-
return (
-
+
{children}
-
+
);
};
diff --git a/components/Tabs.tsx b/components/Tabs.tsx
index bedc83f..e746212 100644
--- a/components/Tabs.tsx
+++ b/components/Tabs.tsx
@@ -1,5 +1,4 @@
-import styled from "styled-components";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
import Space from "./Space";
import { mix2Color } from "@nmsn/color-utils";
import { themeColor, themeColor2 } from "../utils/theme";
@@ -10,42 +9,34 @@ type TabType = { label: string; value: TabValue };
const hoverColor = mix2Color([themeColor2, "white"], "hex", [0.8, 0.2]);
-const StyledTab = styled.div`
- padding: 8px 10px;
- color: white;
- background-color: ${(props) => (props.isActive ? themeColor : themeColor2)};
- width: 150px;
- border-radius: 4px;
- text-align: right;
-
- ${(props) =>
- props.isActive
- ? ``
- : `:hover {
- background-color: ${hoverColor};
- }`}
-
- cursor: pointer;
-`;
-
const Tab = ({
+ children,
isActive,
- label,
value,
onChange,
}: {
+ children: React.ReactNode;
isActive: boolean;
- label: string;
value: TabValue;
onChange: (val: TabValue) => void;
}) => {
return (
- onChange(value) : null}
>
- {label}
-
+ {children}
+