jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-07-17 05:25:57 -04:00
Code Issues Activity

clean up <ColorfulLink />

Browse Source
This commit is contained in:
jake
2022-01-24 12:16:14 -05:00
parent e91595c8bf
commit 2d9702f779
1 changed files with 18 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ColorfulLink/ColorfulLink.tsx
+18 -25
View File
@@ -14,35 +14,28 @@ type Props = {
className?: string; className?: string;
}; };
const getFancyLinkStyles = ({ lightColor, darkColor }: Partial<Props>) => { // spits out properties for link's color and background-image in a linear-gradient (that's not really a gradient) with
// spits out a linear-gradient (that's not realy a gradient) with translucent color in rgba() format // translucent color in rgba() format.
const linearGradient = (hex: string, alpha = 0.4) => { const getColorProperties = (hex: string, alpha = 0.4) => {
// hex -> rgb, adapted from https://github.com/sindresorhus/hex-rgb/blob/main/index.js // hex -> rgb, pulled from https://github.com/sindresorhus/hex-rgb/blob/main/index.js#L29
hex = hex.replace(/^#/, ""); const number = Number.parseInt(hex.replace(/^#/, ""), 16);
const number = Number.parseInt(hex, 16); const red = number >> 16;
const red = number >> 16; const green = (number >> 8) & 255;
const green = (number >> 8) & 255; const blue = number & 255;
const blue = number & 255;
const rgbaString = `rgba(${red}, ${green}, ${blue}, ${alpha})`; const rgbaString = `rgba(${red},${green},${blue},${alpha})`;
return `linear-gradient(${rgbaString}, ${rgbaString})`; // prettier-ignore
}; return `
color:${hex};
return css.resolve` background-image:linear-gradient(${rgbaString},${rgbaString})`.trim();
a {
color: ${lightColor};
background-image: ${linearGradient(lightColor)};
}
:global([data-theme="dark"]) a {
color: ${darkColor};
background-image: ${linearGradient(darkColor)};
}
`;
}; };
const ColorfulLink = ({ href, lightColor, darkColor, external = false, className, ...rest }: Props) => { const ColorfulLink = ({ href, lightColor, darkColor, external, className, ...rest }: Props) => {
const { className: underlineClassName, styles: underlineStyles } = getFancyLinkStyles({ lightColor, darkColor }); // prettier-ignore
const { className: underlineClassName, styles: underlineStyles } = css.resolve`
a {${getColorProperties(lightColor)}}
:global([data-theme="dark"]) a {${getColorProperties(darkColor)}}`;
return ( return (
<> <>