@ducor/react/dist/components/result.js

admin template ui interface

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// Define the SVG icons as components
const SuccessIcon = () => (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: '48', height: '48', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'text-green-500', children: [_jsx("path", { d: 'M5 13l4 4L19 7' }), _jsx("circle", { cx: '12', cy: '12', r: '10', stroke: 'currentColor', strokeWidth: '2', fill: 'none' })] }));
const ErrorIcon = () => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: '48', height: '48', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'text-red-500', children: _jsx("path", { d: 'M12 9v2m0 4v2M21 12c0-5.5-4.5-10-10-10S1 6.5 1 12s4.5 10 10 10 10-4.5 10-10z' }) }));
const InfoIcon = () => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: '48', height: '48', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'text-blue-500', children: _jsx("path", { d: 'M12 9v2m0 4v2M21 12c0-5.5-4.5-10-10-10S1 6.5 1 12s4.5 10 10 10 10-4.5 10-10z' }) }));
const WarningIcon = () => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: '48', height: '48', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'text-yellow-500', children: _jsx("path", { d: 'M12 9v2m0 4v2M21 12c0-5.5-4.5-10-10-10S1 6.5 1 12s4.5 10 10 10 10-4.5 10-10z' }) }));
const NotFoundIcon = () => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: '48', height: '48', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'text-gray-500', children: _jsx("path", { d: 'M3 3l18 18M3 21L21 3' }) }));
const CustomIcon = () => (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: '48', height: '48', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'text-purple-500', children: [_jsx("circle", { cx: '12', cy: '12', r: '10' }), _jsx("path", { d: 'M12 6v6' })] }));
// Determine icon based on status
const getStatusIcon = (status) => {
    switch (status) {
        case "success":
            return _jsx(SuccessIcon, {});
        case "error":
            return _jsx(ErrorIcon, {});
        case "info":
            return _jsx(InfoIcon, {});
        case "warning":
            return _jsx(WarningIcon, {});
        case "404":
            return _jsx(NotFoundIcon, {});
        case "500":
            return _jsx(CustomIcon, {});
        default:
            return null;
    }
};
const Result = ({ status, title, subTitle, footer }) => {
    return (_jsxs("div", { className: 'flex flex-col items-center justify-center p-10 space-y-4 max-w-md mx-auto bg-white', children: [_jsx("div", { className: 'text-6xl', children: getStatusIcon(status) }), _jsx("div", { className: `text-5xl font-semibold text-center text-${status === "success" ? "green" : status === "error" ? "red" : "gray"}-500`, children: _jsx("h1", { children: title }) }), subTitle && (_jsx("div", { className: 'text-lg text-gray-600', children: _jsx("p", { children: subTitle }) })), _jsx("div", { className: 'mt-4 space-x-4 flex justify-center', children: footer })] }));
};
export default Result;