69 lines
1.8 KiB
TypeScript
Executable File
69 lines
1.8 KiB
TypeScript
Executable File
import * as React from "react";
|
|
import Image from "next/image";
|
|
import { ChevronRight } from "lucide-react";
|
|
import { cn } from "@/shared/utils/utils";
|
|
|
|
export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
href?: string;
|
|
image?: string;
|
|
tag?: string;
|
|
title: string;
|
|
description?: string;
|
|
}
|
|
|
|
export function Card({
|
|
href,
|
|
image,
|
|
tag,
|
|
title,
|
|
description,
|
|
className,
|
|
...props
|
|
}: Readonly<CardProps>) {
|
|
const componentProps = href ? { href } : {};
|
|
|
|
return (
|
|
<div
|
|
{...componentProps}
|
|
className={cn(
|
|
"group relative overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{image && (
|
|
<div className="relative h-48 w-full overflow-hidden">
|
|
<Image
|
|
src={image}
|
|
alt={title}
|
|
fill
|
|
className="object-cover transition-transform group-hover:scale-105"
|
|
/>
|
|
{tag && (
|
|
<div className="absolute top-3 right-3 bg-secondary text-gray-800 text-xs font-medium px-2 py-1 rounded">
|
|
{tag}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="p-4">
|
|
<h3 className="text-lg font-medium text-gray-900 mb-2">{title}</h3>
|
|
{description && (
|
|
<p className="text-sm text-zinc-700 line-clamp-2 mb-3">
|
|
{description}
|
|
</p>
|
|
)}
|
|
{href && (
|
|
<div className="flex items-center text-primary text-sm font-medium">
|
|
<span>Lihat selengkapnya</span>
|
|
<ChevronRight
|
|
size={16}
|
|
className="ml-1 transition-transform group-hover:translate-x-1"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|