mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-06-30 22:06:38 -04:00
Jake Jarvis
eccf2108c7
* gymnastics to make theme script work with react 18 hydration * try next 12.1.3 canary to fix SSG head tags? * revert theme script changes * next 12.1.3-canary.3 * double-revert some of the use-theme.tsx changes * separate theme restoration script & move to _document * bump next * bump next (again) * clean up some theme stuff * use hashed image URLs in webmanifest and feeds * text experimental react config * Update ThemeScript.tsx * switch selfie image to `layout="raw"` * use `layout="raw"` for all non-imported images * revert raw images in some places, messes up responsiveness * fix nitpicky "no divs inside buttons" html validation error * fix react-player hydration errors * fix hydration errors from server/client time zone differences * clean up hydration fixes * Update format-date.ts * last-minute cleanup
63 lines
1.3 KiB
TypeScript
63 lines
1.3 KiB
TypeScript
import { memo } from "react";
|
|
import NextLink from "next/link";
|
|
import NextImage from "next/image";
|
|
import { styled } from "../../lib/styles/stitches.config";
|
|
import type { ComponentProps } from "react";
|
|
|
|
import selfieJpg from "../../public/static/images/selfie.jpg";
|
|
|
|
const Image = styled(NextImage, {
|
|
display: "block",
|
|
width: "50px",
|
|
height: "50px",
|
|
border: "1px solid $light !important",
|
|
borderRadius: "50%",
|
|
|
|
"@medium": {
|
|
width: "70px",
|
|
height: "70px",
|
|
borderWidth: "2px !important",
|
|
},
|
|
});
|
|
|
|
const Link = styled("a", {
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
color: "$mediumDark",
|
|
textDecoration: "none",
|
|
|
|
"&:hover": {
|
|
color: "$link",
|
|
|
|
"@medium": {
|
|
[`${Image}`]: {
|
|
borderColor: "$linkUnderline !important",
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
const Name = styled("span", {
|
|
margin: "0 0.6em",
|
|
fontSize: "1.2em",
|
|
fontWeight: 500,
|
|
lineHeight: 1,
|
|
|
|
"@medium": {
|
|
display: "none",
|
|
},
|
|
});
|
|
|
|
export type SelfieProps = ComponentProps<typeof Link>;
|
|
|
|
const Selfie = ({ ...rest }: SelfieProps) => (
|
|
<NextLink href="/" passHref={true}>
|
|
<Link {...rest}>
|
|
<Image src={selfieJpg} alt="Photo of Jake Jarvis" width={50} height={50} quality={60} layout="raw" priority />
|
|
<Name>Jake Jarvis</Name>
|
|
</Link>
|
|
</NextLink>
|
|
);
|
|
|
|
export default memo(Selfie);
|