mirror of
https://github.com/urbit/developers.urbit.org.git
synced 2024-09-11 13:55:59 +03:00
43 lines
1016 B
JavaScript
43 lines
1016 B
JavaScript
import { sigil, reactRenderer } from "@tlon/sigil-js";
|
|
|
|
export const foregroundFromBackground = (background) => {
|
|
const rgb = {
|
|
r: parseInt(background.slice(1, 3), 16),
|
|
g: parseInt(background.slice(3, 5), 16),
|
|
b: parseInt(background.slice(5, 7), 16),
|
|
};
|
|
const brightness = (299 * rgb.r + 587 * rgb.g + 114 * rgb.b) / 1000;
|
|
const whiteBrightness = 255;
|
|
|
|
return whiteBrightness - brightness < 50 ? "black" : "white";
|
|
};
|
|
|
|
export const Sigil = ({
|
|
patp,
|
|
size,
|
|
color = "#24201E",
|
|
icon,
|
|
className = "",
|
|
}) => {
|
|
if (patp.length > 14) {
|
|
return <div />;
|
|
}
|
|
const foreground = foregroundFromBackground(color);
|
|
return (
|
|
<div
|
|
className={(icon ? "p-1 " : "") + className}
|
|
style={{ backgroundColor: icon ? color || "black" : "transparent" }}
|
|
>
|
|
{sigil({
|
|
patp: patp,
|
|
renderer: reactRenderer,
|
|
size: icon ? size / 2 : size,
|
|
colors: [color, foreground],
|
|
icon: icon || false,
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Sigil;
|