97 lines
2.7 KiB
React
97 lines
2.7 KiB
React
import { Card, Button } from '@heroui/react';
|
|
import { PencilIcon, EllipsisVerticalIcon } from '@heroicons/react/24/outline';
|
|
|
|
const statusStyles = {
|
|
Active: 'bg-green-100 text-green-700',
|
|
Inactive: 'bg-gray-100 text-gray-600'
|
|
};
|
|
|
|
function CourseCard({ course, image, handleClick }) {
|
|
const { code, title, description, status, lastUpdate } = course;
|
|
|
|
const formattedDate = new Date(lastUpdate).toLocaleDateString('en-GB', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric'
|
|
});
|
|
|
|
return (
|
|
<Card
|
|
variant="default"
|
|
className="w-full max-w-100 overflow-hidden rounded-lg border border-gray-300 bg-white shadow-none"
|
|
onClick={handleClick}
|
|
>
|
|
{/* Image */}
|
|
<div className="relative h-48 cursor-pointer overflow-hidden border-b border-gray-300">
|
|
<img src={image} alt={title} className="h-full w-full object-cover" />
|
|
|
|
<div className="absolute left-4 top-4 rounded-sm border border-gray-300 bg-white px-3 py-1.5">
|
|
<span className="text-lg font-semibold text-gray-800">{code}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<Card.Content className="cursor-pointer px-5 py-5">
|
|
<h3 className="mb-3 text-xl font-bold leading-tight text-gray-900">
|
|
{title}
|
|
</h3>
|
|
|
|
<p className="line-clamp-2 text-md leading-8 text-gray-700">
|
|
{description}
|
|
</p>
|
|
</Card.Content>
|
|
|
|
{/* Footer */}
|
|
<Card.Footer
|
|
className="mx-5 flex items-center justify-between border-t border-gray-300 px-0 py-5"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
// handle edit
|
|
}}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className={`rounded-full px-2.5 py-1 text-sm font-medium ${
|
|
statusStyles[status] ?? 'bg-gray-100 text-gray-600'
|
|
}`}
|
|
>
|
|
{status}
|
|
</span>
|
|
|
|
<span className="text-sm text-gray-600">Updated {formattedDate}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1">
|
|
<Button
|
|
isIconOnly
|
|
variant="ghost"
|
|
size="sm"
|
|
aria-label={`Edit ${title}`}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
// handle edit
|
|
}}
|
|
>
|
|
<PencilIcon className="h-5 w-5" />
|
|
</Button>
|
|
|
|
<Button
|
|
isIconOnly
|
|
variant="ghost"
|
|
size="sm"
|
|
aria-label={`More actions for ${title}`}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
// handle edit
|
|
}}
|
|
>
|
|
<EllipsisVerticalIcon className="h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
</Card.Footer>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default CourseCard;
|