64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import React, { forwardRef } from "react";
|
|
import Image from "next/image";
|
|
|
|
export interface Recent_CardProps {
|
|
image: string;
|
|
title: string;
|
|
tag: string;
|
|
description: string;
|
|
// Add additional props for event handlers
|
|
onClick?: React.MouseEventHandler<HTMLDivElement>;
|
|
onTouchStart?: React.TouchEventHandler<HTMLDivElement>;
|
|
onTouchEnd?: React.TouchEventHandler<HTMLDivElement>;
|
|
onTouchMove?: React.TouchEventHandler<HTMLDivElement>;
|
|
}
|
|
|
|
const Recent_Card = forwardRef<HTMLDivElement, Recent_CardProps>(({
|
|
image,
|
|
title,
|
|
tag,
|
|
description,
|
|
onClick,
|
|
onTouchStart,
|
|
onTouchEnd,
|
|
onTouchMove,
|
|
...props
|
|
}, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="w-full h-full flex flex-col bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow cursor-pointer"
|
|
onClick={onClick}
|
|
onTouchStart={onTouchStart}
|
|
onTouchEnd={onTouchEnd}
|
|
onTouchMove={onTouchMove}
|
|
{...props}
|
|
>
|
|
{/* Image container with consistent aspect ratio */}
|
|
<div className="relative w-full pt-[75%]">
|
|
<Image
|
|
src={image}
|
|
alt={title}
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, (max-width: 1024px) 33vw, 20vw"
|
|
/>
|
|
<div className="absolute top-2 left-2">
|
|
<span className="bg-black text-white text-xs px-2 py-1 rounded">
|
|
{tag}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content section */}
|
|
<div className="p-3 flex flex-col flex-grow">
|
|
<h4 className="font-medium text-sm mb-1 line-clamp-1">{title}</h4>
|
|
<p className="text-xs text-gray-500">{description}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
Recent_Card.displayName = "Recent_Card";
|
|
|
|
export default Recent_Card; |