51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
import { Inset } from "@radix-ui/themes";
|
|
import { useMemo } from "react";
|
|
|
|
type TInsetImageProps = {
|
|
isHovered: boolean;
|
|
ref_: React.RefObject<HTMLDivElement>;
|
|
windowWidth: number;
|
|
};
|
|
|
|
export default function InsetImage(props: TInsetImageProps) {
|
|
const seed = useMemo(() => {
|
|
return Math.floor(Math.random() * (1 + Math.random()) * 100000);
|
|
}, []);
|
|
|
|
return (
|
|
<Inset
|
|
side={"left"}
|
|
clip={"padding-box"}
|
|
className={`max-w-[${
|
|
props.isHovered ? "100%" : "225px"
|
|
}] transition-[flex] duration-[250ms]
|
|
${props.isHovered ? "flex-1" : "flex-[0.5]"}
|
|
relative overflow-hidden h-72`}
|
|
>
|
|
<img
|
|
style={{
|
|
minWidth: `${
|
|
Math.min(
|
|
props.windowWidth,
|
|
props.ref_.current?.clientWidth || 0
|
|
) / 2
|
|
}px`,
|
|
transform: `${
|
|
props.isHovered
|
|
? "translateX(0)"
|
|
: `translateX(calc(-50% + ${
|
|
Math.min(
|
|
props.windowWidth,
|
|
props.ref_.current?.clientWidth || 0
|
|
) / 6
|
|
}px))`
|
|
}`,
|
|
}}
|
|
className={`h-72 transition-all duration-[250ms]`}
|
|
src={`https://picsum.photos/seed/${seed}/1000/600?grayscale`}
|
|
alt="Bold typography"
|
|
/>
|
|
</Inset>
|
|
);
|
|
}
|