leumas-private-shared/src/Cards/ConvoCard.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 ChatArea from '../Leumas/ChatArea';
import {friendlyTime} from "../../helpers/friendlyTime"
import MonitorSelector from '../NPMDev/MonitorSelector/MonitorSelector';
import {useAuthUser} from "react-auth-kit"
import React from 'react';
const ConvoCard = ({ model , setMode  }) => {
    // console.log(model);
    const auth = useAuthUser()
    const handleClick = () => {
        // console.log("Opening chatArea")
        setMode(<ChatArea setMode={setMode} messages={model.messages} convoId={model._id} auth={auth}/>);
    };
    const borderGlow = (type) => {
        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 h-80 relative p-4 border-2 rounded-xl backdrop-blur-xl bg-opacity-20 bg-white ${borderGlow(model.type)} shadow-xl transition-transform transform hover:scale-105 cursor-pointer`}>
       
            
            {/* Background Hexagon Shape */}
            <div className="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 w-48 h-48 bg-blue-200" style={{ clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)' }}></div>

            {/* User Image within a Circle, centered on the card */}
            <div className="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 w-32 h-32 bg-contain bg-no-repeat bg-center rounded-full border-4 border-gray-300" style={{ backgroundImage: `url(${model.image || defaultSVG})` }}></div>

            {/* Text Details at the Bottom */}
            <div className="absolute bottom-0 left-0 p-4">
                <h2 className="font-bold text-lg hover:text-blue-500 cursor-pointer">{model.title}</h2>
                <p className="text-sm mt-2 ">{model.participants?.length} participants</p>
                <p className="text-sm mt-1 ">{model.messages?.length} messages</p>
                <p className="text-xs mt-1 ">{friendlyTime(model.lastUpdated)}</p>
            </div>

            {/* Glassmorphic Hover Effect */}
            <div className="absolute inset-0 backdrop-blur-sm transition-all duration-300 ease-in-out opacity-100 hover:opacity-0"></div>

            <div className="absolute z-10 top-4 right-4"> {/* Position the button on the top right corner */}
                <MonitorSelector component={<div>Testing</div>} />
            </div>
        </div>
    )
}

export default ConvoCard;