itm-holding-package/dist/components/Avatar.js

ITM HOLDING PACKAGES

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { FiAlertCircle, FiCamera, FiKey, FiUpload } from 'react-icons/fi';
import '../index.css';
const Avatar = () => {
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('');
    const [screenshot, setScreenshot] = useState(null);
    const [apiKey, setApiKey] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [show, setshow] = useState(false);
    const handleScreenshotChange = (e) => {
        if (e.target.files && e.target.files[0]) {
            setScreenshot(e.target.files[0]);
        }
    };
    const handleSubmit = async (e) => {
        e.preventDefault();
        e.stopPropagation();
        setIsSubmitting(true);
        try {
            const formData = new FormData();
            formData.append('title', title);
            formData.append('description', description);
            formData.append('apiKey', apiKey);
            // Ajouter les informations du navigateur
            const browserInfo = {
                userAgent: navigator.userAgent,
                platform: navigator.platform,
                language: navigator.language
            };
            formData.append('browserInfo', JSON.stringify(browserInfo));
            if (screenshot) {
                formData.append('screenshot', screenshot);
            }
            const response = await fetch('/api/reports', {
                method: 'POST',
                body: formData
            });
            if (!response.ok) {
                throw new Error('Erreur lors de la soumission du rapport');
            }
            // Réinitialiser le formulaire après soumission réussie
            setTitle('');
            setDescription('');
            setScreenshot(null);
            setshow(false);
            alert('Rapport de bug soumis avec succès!');
        }
        catch (error) {
            console.error(error);
            alert('Une erreur est survenue lors de la soumission du rapport');
        }
        finally {
            setIsSubmitting(false);
        }
    };
    return (_jsxs(_Fragment, { children: [_jsxs("div", { onClick: function (e) {
                    e.preventDefault();
                    e.state();
                    setshow(function (state) {
                        return !state;
                    });
                }, className: "space-y-1 p-3 rounded-xl shadow-2xl fixed z-50 cursor-pointer bg-white bottom-10 right-10 rounded-full", children: [_jsxs("h2", { className: "text-md text-center font-bold text-gray-900 flex items-center justify-center", children: [_jsx(FiAlertCircle, { className: "mr-3 text-lg text-yellow-500 animate-pulse" }), "Signaler un bug"] }), _jsx("p", { className: "text-xs text-center text-gray-500", children: "Aidez-nous \u00E0 am\u00E9liorer notre plateforme" })] }), show &&
                _jsx("div", { onClick: function (e) {
                        e.preventDefault();
                        e.stopPropagation();
                        setshow(false);
                    }, className: "w-full z-50 fixed bottom-0 right-10 flex items-center justify-end ", children: _jsxs("form", { onSubmit: handleSubmit, className: "max-w-2xl bg-white p-8 bg-white rounded-xl shadow-2xl transform transition-all duration-300 hover:shadow-3xl", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("h2", { className: "text-3xl font-bold text-gray-900 flex items-center", children: [_jsx(FiAlertCircle, { className: "mr-3 text-yellow-500 animate-pulse" }), "Signaler un bug"] }), _jsx("p", { className: "text-sm text-gray-500", children: "Aidez-nous \u00E0 am\u00E9liorer notre plateforme" })] }), _jsxs("div", { className: "space-y-2 mt-8", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { htmlFor: "title", className: "block text-sm font-medium text-gray-700", children: "Titre du bug" }), _jsxs("span", { className: "text-sm text-gray-500", children: [title.length, "/100"] })] }), _jsx("input", { type: "text", id: "title", value: title, onChange: (e) => setTitle(e.target.value.slice(0, 100)), required: true, className: "block w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all", placeholder: "D\u00E9crivez bri\u00E8vement le probl\u00E8me" })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { htmlFor: "description", className: "block text-sm font-medium text-gray-700", children: "Description d\u00E9taill\u00E9e" }), _jsxs("span", { className: "text-sm text-gray-500", children: [description.length, "/500"] })] }), _jsx("textarea", { id: "description", value: description, onChange: (e) => setDescription(e.target.value.slice(0, 500)), required: true, rows: 5, className: "block w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all", placeholder: "D\u00E9crivez en d\u00E9tail ce qui s'est pass\u00E9..." })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Capture d'\u00E9cran (optionnel)" }), _jsxs("div", { className: "relative group", children: [_jsxs("label", { className: "flex flex-col items-center justify-center p-8 border-2 border-dashed border-gray-200 rounded-lg hover:border-indigo-500 transition-all cursor-pointer", children: [screenshot ? (_jsxs(_Fragment, { children: [_jsx("img", { src: URL.createObjectURL(screenshot), alt: "Preview", className: "w-32 h-32 object-cover rounded-md mb-4" }), _jsx("span", { className: "text-indigo-600 font-medium", children: screenshot.name })] })) : (_jsxs(_Fragment, { children: [_jsx(FiCamera, { className: "w-8 h-8 text-gray-400 group-hover:text-indigo-500 transition-all" }), _jsx("span", { className: "mt-2 text-sm text-gray-500 group-hover:text-indigo-600 transition-all", children: "Glissez-d\u00E9posez ou cliquez pour ajouter une capture" })] })), _jsx("input", { type: "file", accept: "image/*", onChange: handleScreenshotChange, className: "hidden" })] }), screenshot && (_jsx("button", { type: "button", onClick: () => setScreenshot(null), className: "absolute -top-2 -right-2 p-2 bg-red-500 rounded-full text-white hover:bg-red-600 transition-all", children: _jsx(FiAlertCircle, { className: "w-4 h-4" }) }))] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "apiKey", className: "block text-sm font-medium text-gray-700", children: "Entrez votre cl\u00E9 API" }), _jsxs("div", { className: "relative", children: [_jsx(FiKey, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" }), _jsx("input", { type: "text", id: "apiKey", value: apiKey, onChange: (e) => setApiKey(e.target.value), required: true, className: "block w-full pl-10 pr-4 py-3 rounded-lg border-2 border-gray-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all", placeholder: "Coller votre cl\u00E9 API ici" })] })] }), _jsx("div", { className: "pt-6", children: _jsx("button", { type: "submit", disabled: isSubmitting, className: "w-full flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 transition-all transform hover:scale-105", children: isSubmitting ? (_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-3" }), "Envoi en cours..."] })) : (_jsxs(_Fragment, { children: [_jsx(FiUpload, { className: "mr-2" }), "Soumettre le rapport"] })) }) })] }) })] }));
};
export default Avatar;