You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

42 lines
1.1 KiB

'use client'
import Link from 'next/link';
import { useState } from 'react';
const Card = ({ title, text, url }) => {
const [isHovered, setIsHovered] = useState(false);
const handleMouseEnter = () => {
setIsHovered(true);
};
const handleMouseLeave = () => {
setIsHovered(false);
};
const cardStyle = {
boxShadow: isHovered ? '0 4px 20px rgba(0, 0, 0, 0.2)' : '0 1px 3px rgba(0, 0, 0, 0.1)',
transition: 'box-shadow 0.3s ease-in-out',
};
return (
<div className="col-md-6 mb-4">
<Link href={url} className="text-decoration-none">
<div
className="card h-100"
style={cardStyle}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<div className="card-body text-center">
<h5 className="card-title">{title}</h5>
<p className="card-text">{text}</p>
</div>
</div>
</Link>
</div>
);
};
export default Card;

Powered by TurnKey Linux.