Card improvement

enshi/src/Pages/RandomPostsPage/PostCard/PostCard.tsx

@@ -1,21 +1,25 @@
 import { CalendarIcon } from "@radix-ui/react-icons";
 import {
-    Box,
+	Card,
-    Card,
+	Flex,
-    Flex,
+	Heading,
-    Heading,
+	Inset,
-    Inset,
+	Text,
-    Text,
+	Tooltip
-    Tooltip,
 } from "@radix-ui/themes";
 import dayjs from "dayjs";
 import "dayjs/locale/ru";
-import { useMemo } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Post } from "../../../@types/PostTypes";
 
 export default function PostCard(props: Post) {
 	const navigate = useNavigate();
+	const ref = useRef<HTMLDivElement>(null);
+
+	const [windowWidth, setWindowWidth] = useState<number>(window.innerWidth);
+	const [isImageLoaded, setIsImageLoaded] = useState(false);
+	const [isHovered, setIsHovered] = useState(false);
 
 	const parsedDate = dayjs(props.created_at)
 		.locale("ru")
@@ -25,24 +29,55 @@ export default function PostCard(props: Post) {
 		navigate(`/posts/${props.post_id.toString()}`);
 	};
 
-    const seed = useMemo(() => {
+	const seed = useMemo(() => {
-        return Math.floor(Math.random() * (1 + Math.random()) * 100000);
+		return Math.floor(Math.random() * (1 + Math.random()) * 100000);
-    }, []);
+	}, []);
+
+	useEffect(() => {
+		const f = () => {
+			setWindowWidth(window.innerWidth);
+			console.log(`Window width: ${window.innerWidth} px`);
+			
+		}
+
+		f()
+
+		window.addEventListener('resize', f);
+		return () => window.removeEventListener('resize', f);
+	}, []);
 
 	return (
 		<Card
-			className="flex cursor-pointer"
+			ref={ref}
+			className="flex w-full cursor-pointer"
 			onClick={clickHandler}
+			onMouseEnter={() => setIsHovered(true)}
+			onMouseLeave={() => setIsHovered(false)}
 		>
-			<Box className="flex-1 h-full min-w-[550px]">
+			<Inset
-				<Inset side={"left"} clip={"padding-box"}>
+				side={"left"}
+				clip={"padding-box"}
+				className={`max-w-[${
+					isHovered ? "100%" : "225px"
+				}] transition-all duration-[250ms] 
+				${
+					isHovered ? "flex-1" : "flex-[0.5]"
+				}
+				relative overflow-hidden h-72`}
+			>
 					<img
-						className="w-full h-72"
+						style={{
-						src={`https://picsum.photos/seed/${seed}/550/288?grayscale`}
+							minWidth: `${Math.min(windowWidth, ref.current?.clientWidth || 0) / 2}px`,
+							transform: `${
+								isHovered ? "translateX(0)" : `translateX(calc(-60% + ${windowWidth / 6}px))`
+							}`
+						}}
+						className={`h-72 transition-all duration-[250ms]`}
+						src={`https://picsum.photos/seed/${seed}/1000/600?grayscale`}
 						alt="Bold typography"
+						onLoadedData={() => setIsImageLoaded(true)}
 					/>
-				</Inset>
+			</Inset>
-			</Box>
 
 			<Flex
 				direction={"column"}

enshi/src/Pages/RandomPostsPage/RandomPostsPage.tsx

@@ -46,13 +46,13 @@ export default function RandomPostsPage() {
 					<Flex direction={"column"} gap={"4"}>
 						{data?.pages.map((post, i) => {
 							return (
-								<Flex direction={"column"} gap={"4"} key={`${i}`}>
+								<Flex
+									direction={"column"}
+									gap={"4"}
+									key={`${i}`}
+								>
 									{post.selected_posts.map((post, j) => {
-										return (
+										return <PostCard key={j} {...post} />;
-											<div key={`${j}${post.post_id}`}>
-												<PostCard {...post} />
-											</div>
-										);
 									})}
 								</Flex>
 							);