ResultTable.tsx

import { ChevronDownIcon } from '@heroicons/react/24/outline'
import { SarifApiResponse } from '../lib/apiClient'
import { cn } from '../lib/utils'
import { Badge } from './ui/badge'

const people = [
    {
        name: 'Lindsay Walton',
        title: 'Front-end Developer',
        email: 'lindsay.walton@example.com',
        role: 'Member',
    },
    // More people...
]
interface Props {
    currentScan: SarifApiResponse
}

export default function ResultTable({ currentScan }: Props) {
    return (
        <div className="">
            {currentScan?.runs[0].properties.badges
                .sort((a, b) => a.badgeId.localeCompare(b.badgeId))
                .map((badge) => (
                    <div
                        key={`${badge.badgeId}-${badge.badgeLevel}`}
                        className="mt-8 rounded-lg bg-gray-100 px-4 py-2"
                    >
                        <details className="">
                            <summary className="relative flex cursor-pointer flex-row justify-between text-lg font-medium text-gray-900">
                                <span>
                                    Details on: {badge.badgeId}{' '}
                                    {badge.badgeLevel}
                                    <Badge
                                        variant={
                                            badge.badgeGranted
                                                ? 'default'
                                                : 'destructive'
                                        }
                                        className="ml-2"
                                    >
                                        {badge.badgeGranted
                                            ? 'Granted'
                                            : 'Not granted'}
                                    </Badge>
                                </span>

                                <ChevronDownIcon className="w-5" />
                            </summary>
                            <div className="mt-8">
                                <div className="overflow-x-aut">
                                    <div className="inline-block min-w-full py-2 align-middle">
                                        <table className="min-w-full divide-y divide-gray-400">
                                            <thead>
                                                <tr className="grid grid-cols-6">
                                                    <th
                                                        scope="col"
                                                        className="col-span-1 py-3.5 pl-4 pr-3 text-left font-semibold sm:pl-6 lg:pl-8"
                                                    >
                                                        Check
                                                    </th>
                                                    <th
                                                        scope="col"
                                                        className="col-span-1 px-3 py-3.5 text-left font-semibold"
                                                    >
                                                        Status
                                                    </th>
                                                    <th
                                                        scope="col"
                                                        className="col-span-2 px-3 py-3.5 text-left font-semibold"
                                                    >
                                                        Description
                                                    </th>
                                                    <th
                                                        scope="col"
                                                        className="col-span-2 px-3 py-3.5 text-left font-semibold"
                                                    >
                                                        Evidence
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody className="divide-y divide-gray-300">
                                                {badge.badgeExplanation.criteria.map(
                                                    (criteria) => (
                                                        <tr
                                                            key={`${badge.badgeId}-${badge.badgeLevel}-${criteria.ruleId}`}
                                                            className="grid grid-cols-6"
                                                        >
                                                            <td
                                                                title={
                                                                    criteria.ruleId
                                                                }
                                                                className="col-span-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-4 pl-4 pr-3 font-medium text-gray-900 sm:pl-6 lg:pl-8"
                                                            >
                                                                {
                                                                    criteria.ruleId.split(
                                                                        ':',
                                                                    )[0]
                                                                }
                                                            </td>
                                                            <td className="col-span-1 whitespace-nowrap px-3 py-4">
                                                                <div className="flex items-center justify-end gap-x-2 sm:justify-start">
                                                                    <span className="relative flex size-2">
                                                                        <span
                                                                            className={cn(
                                                                                'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75',
                                                                                criteria.status ===
                                                                                    'pass'
                                                                                    ? 'bg-green-400'
                                                                                    : criteria.status ===
                                                                                        'open'
                                                                                      ? 'bg-gray-400'
                                                                                      : 'bg-red-400',
                                                                            )}
                                                                        ></span>
                                                                        <span
                                                                            className={cn(
                                                                                'relative inline-flex size-2 rounded-full',
                                                                                criteria.status ===
                                                                                    'pass'
                                                                                    ? 'bg-green-400'
                                                                                    : criteria.status ===
                                                                                        'open'
                                                                                      ? 'bg-gray-400'
                                                                                      : 'bg-red-400',
                                                                            )}
                                                                        ></span>
                                                                    </span>
                                                                    <div className="hidden sm:block">
                                                                        {
                                                                            criteria.status
                                                                        }
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td className="col-span-2 px-3 py-4">
                                                                {
                                                                    criteria.description
                                                                }
                                                            </td>
                                                            <td className="col-span-2 px-3 py-4">
                                                                {
                                                                    criteria.evidence
                                                                }
                                                            </td>
                                                        </tr>
                                                    ),
                                                )}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </details>
                    </div>
                ))}
        </div>
    )
}