106 lines
2.7 KiB
TypeScript
106 lines
2.7 KiB
TypeScript
import { useState } from "react";
|
|
import ReactGA from "react-ga4";
|
|
import { useRecoilState, useResetRecoilState } from "recoil";
|
|
import {
|
|
ArrowCounterClockwise,
|
|
CheckCircle,
|
|
DiceFive,
|
|
Link,
|
|
} from "@phosphor-icons/react";
|
|
import { IconStyle } from "@phosphor-icons/core";
|
|
|
|
import { useTransientState } from "@/hooks";
|
|
import {
|
|
iconWeightAtom,
|
|
iconSizeAtom,
|
|
iconColorAtom,
|
|
resetSettingsSelector,
|
|
} from "@/state";
|
|
|
|
import "./SettingsActions.css";
|
|
|
|
const SettingsActions = () => {
|
|
const [weight, setWeight] = useRecoilState(iconWeightAtom);
|
|
const [size, setSize] = useRecoilState(iconSizeAtom);
|
|
const [color, setColor] = useRecoilState(iconColorAtom);
|
|
const reset = useResetRecoilState(resetSettingsSelector);
|
|
|
|
const [copied, setCopied] = useTransientState<boolean>(false, 2000);
|
|
const [booped, setBooped] = useState<boolean>(false);
|
|
|
|
const copyDeepLinkToClipboard = () => {
|
|
const paramString = new URLSearchParams([
|
|
["weight", weight.toString()],
|
|
["size", size.toString()],
|
|
["color", color.replace("#", "")],
|
|
]).toString();
|
|
void navigator.clipboard
|
|
?.writeText(`${window.location.host}?${paramString}`)
|
|
.then(() => {
|
|
setCopied(true);
|
|
})
|
|
.catch(() => {
|
|
alert("Clipboard permissions must be enabled to copy links!");
|
|
});
|
|
};
|
|
|
|
const randomizeSettings = () => {
|
|
if (booped) setBooped(false);
|
|
setBooped(true);
|
|
|
|
const rWeight = Object.values(IconStyle).filter((w) => w !== weight)[
|
|
Math.floor(Math.random() * 5)
|
|
];
|
|
const rSize = 16 + Math.floor(Math.random() * 20 + 1) * 4;
|
|
const rColor =
|
|
"#" +
|
|
Math.floor(Math.random() * (0xffffff + 1))
|
|
.toString(16)
|
|
.padStart(6, "0");
|
|
|
|
setWeight(rWeight);
|
|
setColor(rColor);
|
|
setSize(rSize);
|
|
|
|
ReactGA.event({ category: "Settings", action: "Random" });
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
className="tool-button"
|
|
title="Restore default settings"
|
|
onClick={reset}
|
|
>
|
|
<ArrowCounterClockwise size={24} />
|
|
</button>
|
|
<button
|
|
className="tool-button"
|
|
title="Copy URL for current settings"
|
|
onClick={copyDeepLinkToClipboard}
|
|
>
|
|
{copied ? (
|
|
<CheckCircle size={24} color="var(--olive)" weight="fill" />
|
|
) : (
|
|
<Link size={24} />
|
|
)}
|
|
</button>
|
|
<button
|
|
className="tool-button"
|
|
title="Randomize"
|
|
onClick={randomizeSettings}
|
|
>
|
|
<span
|
|
className={booped ? "bounce" : ""}
|
|
style={{ display: "flex" }}
|
|
onAnimationEnd={() => setBooped(false)}
|
|
>
|
|
<DiceFive className={booped ? "spin" : ""} size={24} />
|
|
</span>
|
|
</button>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SettingsActions;
|