sarif-explorer
Version:
A modern SARIF report viewer that converts SARIF files into interactive, shareable HTML reports with file explorer, collapsible issue lists, and code snippets.
33 lines • 2.59 kB
JavaScript
'use client';
import React from 'react';
export const StatsBar = ({ data, inline = false }) => {
const { files, totalViolations, statistics } = data;
const errorCount = statistics.errorCount || 0;
const warningCount = statistics.warningCount || 0;
const infoCount = statistics.infoCount || 0;
const noteCount = statistics.noteCount || 0;
const statsContent = React.createElement('div', { className: 'flex items-center justify-center gap-6' },
// Total Issues
React.createElement('div', { className: 'flex items-center flex-col gap-2' },
//React.createElement('div', { className: 'w-2 h-2 bg-gray-500 rounded-full' }),
React.createElement('span', { className: 'text-base font-semibold text-gray-900' }, totalViolations), React.createElement('span', { className: 'text-xs text-gray-500' }, 'issues')),
// Error Count
errorCount > 0 && React.createElement('div', { className: 'flex items-center flex-col gap-2' },
//React.createElement('div', { className: 'w-2 h-2 bg-red-500 rounded-full' }),
React.createElement('span', { className: 'text-base font-semibold text-gray-900' }, errorCount), React.createElement('span', { className: 'text-xs text-gray-500' }, 'errors')),
// Warning Count
warningCount > 0 && React.createElement('div', { className: 'flex items-center flex-col gap-2' },
//React.createElement('div', { className: 'w-2 h-2 bg-orange-500 rounded-full' }),
React.createElement('span', { className: 'text-base font-semibold text-gray-900' }, warningCount), React.createElement('span', { className: 'text-xs text-gray-500' }, 'warnings')),
// Info Count
infoCount > 0 && React.createElement('div', { className: 'flex items-center flex-col gap-2' },
//React.createElement('div', { className: 'w-2 h-2 bg-blue-500 rounded-full' }),
React.createElement('span', { className: 'text-base font-semibold text-gray-900' }, infoCount), React.createElement('span', { className: 'text-xs text-gray-500' }, 'info')),
// Note Count
noteCount > 0 && React.createElement('div', { className: 'flex items-center flex-col gap-2' }, React.createElement('div', { className: 'w-2 h-2 bg-green-500 rounded-full' }), React.createElement('span', { className: 'text-base font-semibold text-gray-900' }, noteCount), React.createElement('span', { className: 'text-xs text-gray-500' }, 'notes')));
if (inline) {
return statsContent;
}
return React.createElement('div', { className: 'bg-white border-b border-gray-100 px-6 py-4' }, statsContent);
};
//# sourceMappingURL=StatsBar.js.map