leumas-private-shared/src/Cards/FileCard.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 useHandleCardClick from './Helpers/handleCardClick';
import axios from 'axios';
import { useOpenAIKey } from '../../helpers/OpenAI/OpenAIContext';
import { FaTrash } from 'react-icons/fa';
import HomepageCreator from '../Grid/components/HomepageCreator';
import React from 'react';
const FileCard = ({ file , onSelect , setMode }) => {
    const [contextApiKey] = useOpenAIKey();

    const onCardClick = useHandleCardClick(<HomepageCreator />, { file }, setMode);

    const onDelete = async () => {
        try {
            await axios.delete(`https://api.openai.com/v1/files/${file.id}`, {
                headers: {
                    'Authorization': `Bearer ${contextApiKey}`
                }
            });
            // Handle post-delete actions here, like refetching the list or updating the UI.
            alert("File deleted successfully!");
        } catch (error) {
            console.error('Error deleting file:', error);
            alert("Error deleting file.");
        }
    };

    return (
        <div onClick={onCardClick}
                className="relative overflow-hidden border-2 border-gray-300 hover:border-blue-500 transition-all duration-300 p-4 w-full h-auto rounded-xl backdrop-blur-xl bg-opacity-20 bg-white hover:bg-opacity-30 cursor-pointer shadow-md">
            
            {/* Horizontal Stripe on top */}
            <div className="absolute z-0 top-0 left-0 w-full h-16 bg-blue-100"></div>
    
            {/* Triangular shape on the bottom left */}
            <div className="absolute z-0 bottom-0 left-0 w-32 h-32 bg-blue-100" style={{ clipPath: 'polygon(0 0, 100% 0, 0 100%)' }}></div>
    
            {/* File Info */}
            <div className="z-10 relative mt-4">
                <h3 className="font-bold text-lg text-blue-500 mb-2">{file.filename}</h3>
                <p className="text-sm">ID: {file.id}</p>
                <p className="text-sm ">Size: {file.bytes} bytes</p>
                <p className="text-sm mb-2">Created At: {new Date(file.created_at * 1000).toLocaleDateString()}</p>
                <p className="text-xs ">Purpose: {file.purpose}</p>
            </div>
            
            {/* Delete Button */}
            <button className="z-20 absolute top-2 right-2 text-red-500 hover:text-red-700 transition-all duration-300 focus:outline-none" onClick={onDelete}>
                <FaTrash size={20} />
            </button>
        </div>
    );
    
    
};

export default FileCard