leumas-private-shared/src/Cards/AICard.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, { useState, useEffect } from 'react';
import { FaInfoCircle } from 'react-icons/fa';
import defaultImage from '../../assets/SharedSVG/Phantom.svg';
import ToggleStatus from '../../helpers/LMS-WildCard-Helpers/UniversalCrud/ToggleStatus';
import { useAuthUser } from 'react-auth-kit';
import AIView from '../Leumas/LeumasAI/AIView';

const AICard = ({ model, selected, onSelect = () => {}, item, isPublic , setMode }) => {

    const [isPublished, setIsPublished] = useState(model.isPublished);
    console.log(model)
    useEffect(() => {
        setIsPublished(model.isPublished);
    }, [model]);

    const handleToggleChange = (newStatus) => {
        setIsPublished(newStatus);
    };


    const handleClick = (e) => {
        e.stopPropagation();
        setMode(<AIView model={model} />);
    };

    const auth = useAuthUser();

    return (
<div 
    className="p-4 max-w-100 max-h-150  rounded-lg transition-shadow duration-300 cursor-pointer relative shadow-md hover:shadow-lg hoverEffect" 
    onClick={handleClick}
>
    {/* Geometric shape background */}
    <div className="absolute top-0 left-0 w-full h-full rounded-lg overflow-hidden">
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-48 h-48 bg-gray-100" 
            style={{ clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)', boxShadow: 'inset 3px 3px 5px #babecc, inset -3px -3px 5px #ffffff' }}>
        </div>
    </div>

    {/* Card Content */}
    <div className="z-10 relative">
        <div className="group flex justify-end items-start">
            <FaInfoCircle className="text-gray-500 hover:text-gray-600 transition-colors duration-200" />
            <div className="hidden group-hover:block absolute -top-8 -right-8 bg-gray-200 text-xs text-gray-600 p-2 border rounded shadow-sm" 
                 style={{ boxShadow: '3px 3px 5px #babecc, -3px -3px 5px #ffffff' }}>
                {model.description}
            </div>
        </div>
        <img src={defaultImage} alt={model.name} className="w-full h-40 object-cover rounded-lg mb-4" />
        
        {!isPublic && (
            <ToggleStatus 
                model={"AIModel"} 
                endpoint="LeumasAPI" 
                itemId={model._id} 
                token={auth()?.token}
                onToggleChange={handleToggleChange} 
            />
        )}
        <h2 className="text-lg font-semibold">{model.name || model?.title}</h2>
    </div>
</div>

    );
};

export default AICard;