ApiSmallDemo.tsx

// Copyright 2025 Zentrum für Digitale Souveränität der Öffentlichen Verwaltung (ZenDiS) GmbH.
// SPDX-License-Identifier: MIT

import { useState } from 'react'
import { SarifApiResponse } from '../../lib/apiClient'
import CheckRepoForm from '../CheckRepoForm'
import { Toaster } from '../ui/toaster'
import ResultGrid from '../ResultGrid'

export default function ApiSmallDemo() {
    const [currentScan, setCurrentScan] = useState<SarifApiResponse | null>(
        null,
    )

    const handleScanFinished = (scanReport: SarifApiResponse) => {
        setCurrentScan(scanReport)
    }
    return (
        <div className="mx-auto mt-16 max-w-7xl" id="api-small-demo">
            <Toaster />
            <div className="relative isolate overflow-hidden bg-blue-900 px-6 py-24 shadow-2xl sm:rounded-3xl sm:px-24 xl:py-32">
                <h2 className="mx-auto max-w-3xl text-center text-4xl font-semibold tracking-tight text-white sm:text-5xl">
                    Testen Sie die Badge API
                </h2>
                <p className="mx-auto mt-6 max-w-lg text-center text-lg text-zinc-200">
                    Geben Sie die URL eines öffentlichen openCode-Repositorys
                    ein, um zu sehen, welche der offiziellen Badges
                    vergeben werden.
                </p>
                <div className="mx-auto mt-12 max-w-4xl">
                    <CheckRepoForm onScanFinished={handleScanFinished} />
                </div>
                <div className="absolute inset-0 -z-20 size-[64rem] overflow-hidden bg-gradient-to-r from-blue-800">
                    <svg
                        className="absolute opacity-20"
                        width="1096"
                        height="520"
                        viewBox="0 0 1096 520"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            d="M-24 363.645L52.8404 363.645C89.7778 363.645 107.965 343.08 107.965 343.08L170.309 281.082C170.309 281.082 186.133 260.701 216.35 260.701L366.578 260.701C404.001 260.701 421.409 283.667 421.409 283.667L610.638 471.848C610.638 471.848 626.8 489.712 654.513 489.712L700.49 489.712C728.202 489.712 746.831 471.168 746.831 471.168L1096.42 121.584L1446 -228"
                            stroke="url(#paint0_linear_2866_45205)"
                            strokeWidth="59.3123"
                            strokeMiterlimit="10"
                        ></path>
                        <defs>
                            <linearGradient
                                id="paint0_linear_2866_45205"
                                x1="108"
                                y1="347.301"
                                x2="1040"
                                y2="347.301"
                                gradientUnits="userSpaceOnUse"
                            >
                                <stop
                                    stopColor="#1544FF"
                                    stopOpacity="0"
                                ></stop>
                                <stop offset="0.295" stopColor="#1544FF"></stop>
                                <stop
                                    offset="0.700368"
                                    stopColor="#00E6CC"
                                    stopOpacity="0.5"
                                ></stop>
                                <stop
                                    offset="1"
                                    stopColor="#00E6CC"
                                    stopOpacity="0"
                                ></stop>
                            </linearGradient>
                        </defs>
                    </svg>
                </div>
            </div>
            <div>
                <ResultGrid currentScan={currentScan} />
            </div>
        </div>
    )
}