abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-07 09:25:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Run prettier on all files.

Browse Source
This commit is contained in:
Paul
2021-07-05 11:23:23 +01:00
parent 56058c1e75
commit 7bd33d8d34
181 changed files with 18084 additions and 13521 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/components/ui/ColourSwatches.tsx
View File

@@ -1,130 +1,127 @@
import { useRef } from "preact/hooks";
import { Check } from "@styled-icons/boxicons-regular";
import { Palette } from "@styled-icons/boxicons-solid";
import styled, { css } from "styled-components";
import { useRef } from "preact/hooks";
interface Props {
value: string;
onChange: (value: string) => void;
value: string;
onChange: (value: string) => void;
}
const presets = [
[
"#7B68EE",
"#3498DB",
"#1ABC9C",
"#F1C40F",
"#FF7F50",
"#FD6671",
"#E91E63",
"#D468EE",
],
[
"#594CAD",
"#206694",
"#11806A",
"#C27C0E",
"#CD5B45",
"#FF424F",
"#AD1457",
"#954AA8",
],
[
"#7B68EE",
"#3498DB",
"#1ABC9C",
"#F1C40F",
"#FF7F50",
"#FD6671",
"#E91E63",
"#D468EE",
],
[
"#594CAD",
"#206694",
"#11806A",
"#C27C0E",
"#CD5B45",
"#FF424F",
"#AD1457",
"#954AA8",
],
];
const SwatchesBase = styled.div`
gap: 8px;
display: flex;
gap: 8px;
display: flex;
input {
opacity: 0;
margin-top: 44px;
position: absolute;
pointer-events: none;
}
input {
opacity: 0;
margin-top: 44px;
position: absolute;
pointer-events: none;
}
`;
const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
flex-shrink: 0;
cursor: pointer;
border-radius: 4px;
background-color: ${(props) => props.colour};
flex-shrink: 0;
cursor: pointer;
border-radius: 4px;
background-color: ${(props) => props.colour};
display: grid;
place-items: center;
display: grid;
place-items: center;
&:hover {
border: 3px solid var(--foreground);
transition: border ease-in-out 0.07s;
}
&:hover {
border: 3px solid var(--foreground);
transition: border ease-in-out 0.07s;
}
svg {
color: white;
}
svg {
color: white;
}
${(props) =>
props.type === "small"
? css`
width: 30px;
height: 30px;
${(props) =>
props.type === "small"
? css`
width: 30px;
height: 30px;
svg {
/*stroke-width: 2;*/
}
`
: css`
width: 68px;
height: 68px;
`}
svg {
/*stroke-width: 2;*/
}
`
: css`
width: 68px;
height: 68px;
`}
`;
const Rows = styled.div`
gap: 8px;
display: flex;
flex-direction: column;
gap: 8px;
display: flex;
flex-direction: column;
> div {
gap: 8px;
display: flex;
flex-direction: row;
}
> div {
gap: 8px;
display: flex;
flex-direction: row;
}
`;
export default function ColourSwatches({ value, onChange }: Props) {
const ref = useRef<HTMLInputElement>();
const ref = useRef<HTMLInputElement>();
return (
<SwatchesBase>
<Swatch
colour={value}
type="large"
onClick={() => ref.current.click()}
>
<Palette size={32} />
</Swatch>
<input
type="color"
value={value}
ref={ref}
onChange={(ev) => onChange(ev.currentTarget.value)}
/>
<Rows>
{presets.map((row, i) => (
<div key={i}>
{row.map((swatch, i) => (
<Swatch
colour={swatch}
type="small"
key={i}
onClick={() => onChange(swatch)}
>
{swatch === value && (
<Check size={18} />
)}
</Swatch>
))}
</div>
))}
</Rows>
</SwatchesBase>
);
return (
<SwatchesBase>
<Swatch
colour={value}
type="large"
onClick={() => ref.current.click()}>
<Palette size={32} />
</Swatch>
<input
type="color"
value={value}
ref={ref}
onChange={(ev) => onChange(ev.currentTarget.value)}
/>
<Rows>
{presets.map((row, i) => (
<div key={i}>
{row.map((swatch, i) => (
<Swatch
colour={swatch}
type="small"
key={i}
onClick={() => onChange(swatch)}>
{swatch === value && <Check size={18} />}
</Swatch>
))}
</div>
))}
</Rows>
</SwatchesBase>
);
}