49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
"use client";
|
|
import { useHover } from "usehooks-ts";
|
|
import { useRef } from "react";
|
|
import Image from "next/image";
|
|
|
|
export default function Page() {
|
|
const ref = useRef(null);
|
|
const isHover = useHover(ref);
|
|
|
|
return (
|
|
<div className="bg-white rounded-lg cursor-pointer w-64">
|
|
<div className="relative w-full h-auto" ref={ref}>
|
|
<Image
|
|
width={500}
|
|
height={250}
|
|
className={"object-cover w-full rounded-t-lg"}
|
|
src={
|
|
!isHover
|
|
? "https://res-academy.cache.wpscdn.com/static/cover/xls_v2.png"
|
|
: "https://res-academy.cache.wpscdn.com/youtube-gif/20220419/144426_H3Ns3Os0zqE_72_10.gif"
|
|
}
|
|
alt={"img"}
|
|
/>
|
|
<div
|
|
className={`absolute bottom-2 right-2
|
|
bg-gray-600 text-white text-xs
|
|
px-1 py-0.5 rounded-md
|
|
${isHover ? "hidden" : "flex"}`}
|
|
>
|
|
03:14
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-between text-xs mt-2 text-gray-500 px-2">
|
|
<div className="flex items-center gap-1 my-1">
|
|
<Image
|
|
width={32}
|
|
height={38}
|
|
alt={""}
|
|
src="https://res-academy.cache.wpscdn.com/static/images/icon_excel.png"
|
|
/>
|
|
<span>Spread</span>
|
|
</div>
|
|
<div>18.0K views</div>
|
|
</div>
|
|
<h1 className="text-md font-semibold mt-2 px-2 pb-3">How use WPS</h1>
|
|
</div>
|
|
);
|
|
}
|