"use client";

import { cn } from "@/lib/utils";

type ResourceCardProps = {
  title: string;
  category: string;
  previewImage: string;
  description?: string;
  iconUrl?: string;
  iconBg?: string;
  isNew?: boolean;
  onSave?: () => void;
  onClick?: () => void;
};

export function ResourceCard({
  title,
  category,
  previewImage,
  description,
  iconUrl,
  iconBg = "#1a1a1a",
  isNew = false,
  onSave,
  onClick
}: ResourceCardProps) {
  return (
    <div
      className="group cursor-pointer w-full"
      onClick={onClick}
    >
      <div className="flex flex-col">
        <div
          className="p-5 h-[341px] flex flex-col justify-center items-center"
          style={{ backgroundColor: 'rgb(222, 227, 225)' }}
        >
          <div
            className="relative aspect-[16/10] overflow-hidden"
          >
            <img
              src={previewImage}
              alt={title}
              className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.02]"
            />
          </div>
        </div>
        <div className="flex items-center gap-3 pt-3">
          <div
            className="w-11 h-11 lg:w-12 lg:h-12 overflow-hidden flex-shrink-0 flex items-center justify-center"
            style={{ backgroundColor: iconBg }}
          >
            {iconUrl ? (
              <img
                src={iconUrl}
                alt={`${title} icon`}
                className="w-6 h-6 lg:w-7 lg:h-7 object-contain"
              />
            ) : (
              <span className="text-white text-lg lg:text-xl font-medium">
                {title.charAt(0)}
              </span>
            )}
          </div>
          <div className="flex flex-col min-w-0">
            <span className="text-foreground text-[15px] sm:text-base lg:text-[17px] font-medium truncate leading-tight">
              {title}
            </span>
            <span className="text-muted-foreground text-[13px] sm:text-sm lg:text-[15px] truncate leading-snug mt-0.5">
              {description || category}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

Prop	Type	Default	Description

title*	`string`	—	Resource title
category*	`string`	—	Category label
previewImage*	`string`	—	Preview image URL
description	`string`	—	Short description
iconUrl	`string`	—	Icon image URL
iconBg	`string`	`"#1a1a1a"`	Icon background color
isNew	`boolean`	`false`	Show new badge
onClick	`() => void`	—	Click handler

ResourceCard

API Reference

Source Code