leumas-private-shared/src/Cards/DefaultCard.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React from 'react';
import {useTheme} from "../Theme/ThemeContext"
const DefaultCard = ({ model, item = {}, setMode }) => {
    
  const { theme } = useTheme(); 
  const bgColor = theme === 'dark' ? 'bg-blue-500' : 'bg-blue-50';

    return (
        <div className={`border rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out ${bgColor} cursor-pointer `}>
            <div className="p-5">
                <h3 className="text-lg md:text-xl font-semibold mb-2 text-gray-900 dark:text-white">{item?.title || "Untitled Item"}</h3>
                <p className="mt-2 text-xs md:text-sm text-gray-600 dark:text-gray-400">
                    {item?.description || `No description provided for ${model}.`}
                </p>
            </div>
            <div className="px-5 py-3 bg-gray-100 dark:bg-gray-700 flex justify-between items-center">
                <span className="text-xs md:text-sm font-medium text-gray-600 dark:text-gray-300">{item?.date || "No Date"}</span>
                <button
                    className="text-blue-500 dark:text-blue-400 text-xs md:text-sm hover:underline"
                    onClick={() => setMode(`edit/${item?._id}`)}
                >
                    Edit
                </button>
            </div>
        </div>
    );
};

export default DefaultCard;