leumas-private-shared/src/Cards/HomeCard.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 defaultSVG from '../../assets/SharedSVG/AI.svg';
import HomeView from '../Leumas/LeumasSmartHome/HomeView';
import React from 'react';
const HomeCard = ({ model , setMode  }) => {
    console.log(model);

    const handleClick = () => {
        setMode(<HomeView model={model} />);
    };
    const borderGlow = (type) => {
        if(!type) {
            type = 'both'
        }
        switch (type) {
            case 'ai': return 'border-blue-500';
            case 'user': return 'border-white';
            case 'both': return 'border-gradient-r-from-blue-500-to-white';
            default: return '';
        }
    };

    return (
<div onClick={handleClick} 
            className={`w-200 border-2 p-4 rounded-xl bg-opacity-20 bg-white backdrop-blur-md ${borderGlow(model?.type)} shadow-lg transition-transform transform hover:scale-105 cursor-pointer`}>
    <div className="flex items-center">
        <div className="w-10 h-10 bg-contain bg-no-repeat bg-center rounded-full border border-gray-300" style={{ backgroundImage: `url(${model?.image || defaultSVG})` }}></div>
        <div className="ml-4">
            <h2 className="font-bold text-lg hover:text-blue-500 cursor-pointer">{model?.title}</h2>
            <p className="text-sm mt-2">{model?.address}</p>
            <p className=" mb-4 text-xs">Updated: {new Date(model?.updatedAt).toLocaleDateString()}</p>

            <p className="text-xs mt-1 capitalize">{model?.type}</p>
        </div>
    </div>
</div>

    )
}

export default HomeCard;