jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-04-17 10:28:46 -04:00
Code Issues Activity

clean up <ColorfulLink />

Browse Source
This commit is contained in:
Jake Jarvis
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

43
components/ColorfulLink/ColorfulLink.tsx
View File

@@ -14,35 +14,28 @@ type Props = {
className?: string;
};
const getFancyLinkStyles = ({ lightColor, darkColor }: Partial<Props>) => {
// spits out a linear-gradient (that's not realy a gradient) with translucent color in rgba() format
const linearGradient = (hex: string, alpha = 0.4) => {
// hex -> rgb, adapted from https://github.com/sindresorhus/hex-rgb/blob/main/index.js
hex = hex.replace(/^#/, "");
const number = Number.parseInt(hex, 16);
const red = number >> 16;
const green = (number >> 8) & 255;
const blue = number & 255;
// spits out properties for link's color and background-image in a linear-gradient (that's not really a gradient) with
// translucent color in rgba() format.
const getColorProperties = (hex: string, alpha = 0.4) => {
// hex -> rgb, pulled from https://github.com/sindresorhus/hex-rgb/blob/main/index.js#L29
const number = Number.parseInt(hex.replace(/^#/, ""), 16);
const red = number >> 16;
const green = (number >> 8) & 255;
const blue = number & 255;
const rgbaString = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
const rgbaString = `rgba(${red},${green},${blue},${alpha})`;
return `linear-gradient(${rgbaString}, ${rgbaString})`;
};
return css.resolve`
a {
color: ${lightColor};
background-image: ${linearGradient(lightColor)};
}
:global([data-theme="dark"]) a {
color: ${darkColor};
background-image: ${linearGradient(darkColor)};
}
`;
// prettier-ignore
return `
color:${hex};
background-image:linear-gradient(${rgbaString},${rgbaString})`.trim();
};
const ColorfulLink = ({ href, lightColor, darkColor, external = false, className, ...rest }: Props) => {
const { className: underlineClassName, styles: underlineStyles } = getFancyLinkStyles({ lightColor, darkColor });
const ColorfulLink = ({ href, lightColor, darkColor, external, className, ...rest }: Props) => {
// prettier-ignore
const { className: underlineClassName, styles: underlineStyles } = css.resolve`
a {${getColorProperties(lightColor)}}
:global([data-theme="dark"]) a {${getColorProperties(darkColor)}}`;
return (
<>