39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
'use client'
|
|
import { useHover } from "usehooks-ts";
|
|
import { useRef } from "react";
|
|
|
|
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}>
|
|
<img className={'object-cover w-full rounded-t-lg'}
|
|
src={!isHover ?
|
|
'//res-academy.cache.wpscdn.com/static/cover/xls_v2.png' :
|
|
'//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'>
|
|
<img className='w-4 h-5'
|
|
alt={''}
|
|
src={'//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>
|
|
)
|
|
}
|