mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-26 09:25:22 -04:00
126 lines
3.4 KiB
TypeScript
126 lines
3.4 KiB
TypeScript
import Link from "../Link";
|
||
import { GoHeartFill } from "react-icons/go";
|
||
import { SiNextdotjs } from "react-icons/si";
|
||
import { styled, theme, keyframes } from "../../lib/styles/stitches.config";
|
||
import config from "../../lib/config";
|
||
import type { ComponentPropsWithoutRef } from "react";
|
||
|
||
const Wrapper = styled("footer", {
|
||
width: "100%",
|
||
padding: "1.25em 1.5em",
|
||
borderTop: `1px solid ${theme.colors.kindaLight}`,
|
||
backgroundColor: theme.colors.backgroundOuter,
|
||
color: theme.colors.mediumDark,
|
||
transition: `background ${theme.transitions.fade}, border ${theme.transitions.fade}`,
|
||
|
||
"@medium": {
|
||
padding: "1em 1.25em",
|
||
},
|
||
});
|
||
|
||
const Row = styled("div", {
|
||
display: "flex",
|
||
width: "100%",
|
||
maxWidth: theme.sizes.maxLayoutWidth,
|
||
margin: "0 auto",
|
||
justifyContent: "space-between",
|
||
fontSize: "0.8em",
|
||
lineHeight: 2.3,
|
||
|
||
// stack columns on left instead of flexboxing across
|
||
"@medium": {
|
||
display: "block",
|
||
},
|
||
});
|
||
|
||
const PlainLink = styled(Link, {
|
||
color: theme.colors.mediumDark,
|
||
});
|
||
|
||
const Icon = styled("svg", {
|
||
display: "inline",
|
||
width: "1.25em",
|
||
height: "1.25em",
|
||
verticalAlign: "-0.25em",
|
||
margin: "0 0.075em",
|
||
});
|
||
|
||
const Heart = styled("span", {
|
||
display: "inline-block",
|
||
color: theme.colors.error, // somewhat ironically color the heart with the themed "error" red... </3
|
||
|
||
"@media (prefers-reduced-motion: no-preference)": {
|
||
animation: `${keyframes({
|
||
"0%": { transform: "scale(1)" },
|
||
"2%": { transform: "scale(1.25)" },
|
||
"4%": { transform: "scale(1)" },
|
||
"6%": { transform: "scale(1.2)" },
|
||
"8%": { transform: "scale(1)" },
|
||
// pause for ~9 out of 10 seconds
|
||
"100%": { transform: "scale(1)" },
|
||
})} 10s ease 7.5s infinite`,
|
||
willChange: "transform",
|
||
},
|
||
});
|
||
|
||
export type FooterProps = ComponentPropsWithoutRef<typeof Wrapper>;
|
||
|
||
const Footer = ({ ...rest }: FooterProps) => {
|
||
return (
|
||
<Wrapper {...rest}>
|
||
<Row>
|
||
<div>
|
||
Content{" "}
|
||
<PlainLink href="/license/" title={config.license} underline={false}>
|
||
licensed under {config.licenseAbbr}
|
||
</PlainLink>
|
||
,{" "}
|
||
<PlainLink href="/previously/" title="Previously on..." underline={false}>
|
||
{config.copyrightYearStart}
|
||
</PlainLink>{" "}
|
||
– {new Date(process.env.RELEASE_DATE || Date.now()).getUTCFullYear()}.
|
||
</div>
|
||
|
||
<div>
|
||
Made with{" "}
|
||
<Heart title="Love">
|
||
<Icon as={GoHeartFill} css={{ strokeWidth: 2 }} />
|
||
</Heart>{" "}
|
||
and{" "}
|
||
<PlainLink
|
||
href="https://nextjs.org/"
|
||
title="Powered by Next.js"
|
||
aria-label="Next.js"
|
||
underline={false}
|
||
css={{
|
||
"&:hover, &:focus-visible": {
|
||
color: theme.colors.medium,
|
||
},
|
||
}}
|
||
>
|
||
<Icon as={SiNextdotjs} />
|
||
</PlainLink>
|
||
.{" "}
|
||
<PlainLink
|
||
href={`https://github.com/${config.githubRepo}`}
|
||
title="View Source on GitHub"
|
||
underline={false}
|
||
css={{
|
||
paddingBottom: "2px",
|
||
borderBottom: `1px solid ${theme.colors.light}`,
|
||
|
||
"&:hover, &:focus-visible": {
|
||
borderColor: theme.colors.kindaLight,
|
||
},
|
||
}}
|
||
>
|
||
View source.
|
||
</PlainLink>
|
||
</div>
|
||
</Row>
|
||
</Wrapper>
|
||
);
|
||
};
|
||
|
||
export default Footer;
|