52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import Image from 'next/image';
|
|
|
|
import { Project } from '@/types';
|
|
|
|
import styles from '@/styles/ProjectCard.module.css';
|
|
|
|
interface ProjectCardProps {
|
|
project: Project;
|
|
}
|
|
|
|
const ProjectCard = ({ project }: ProjectCardProps) => {
|
|
return (
|
|
<a
|
|
href={project.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={styles.card}
|
|
>
|
|
<div className={styles.content}>
|
|
<div className={styles.logoWrapper}>
|
|
<Image
|
|
src={project.logo}
|
|
alt={`${project.title} logo`}
|
|
width={24}
|
|
height={24}
|
|
className={styles.logo}
|
|
/>
|
|
</div>
|
|
<p className={styles.type}>{project.type}</p>
|
|
<h3 className={styles.title}>{project.title}</h3>
|
|
<p className={styles.description}>{project.description}</p>
|
|
|
|
|
|
</div>
|
|
<div className={styles.footer}>
|
|
<p className={styles.date}>{project.date}</p>
|
|
<p className={styles.status} data-status={project.status.toLowerCase()}>
|
|
{project.status}
|
|
</p>
|
|
{/* <p className={styles.skills}>{project.skills}</p> */}
|
|
|
|
</div>
|
|
</a>
|
|
);
|
|
};
|
|
|
|
// Add hover effect to the card
|
|
// Add a gradient overlay on hover
|
|
|
|
|
|
export default ProjectCard;
|