Service.tsx

import React from 'react'
import Link from 'next/link'
import PageHeaderCard from '@/components/PageHeaderCard'
import { decodeEmail } from '@/lib/utils'

type HeaderOptions = {
  title: string
  description: string
  img?: {
    src: string
    alt?: string
  }
  developer: {
    name: string
    link: string
  }
  contact: {
    name: string
    mail: string
  }
  statusLabel: string
  documentationURL: string
  sourceURL?: string
  tosURL?: string
  issuesURL?: string
  resources: any[]
}

export function Header({
    title,
    description,
    img,
    developer,
    contact,
    tosURL,
    statusLabel,
    documentationURL,
    sourceURL,
    issuesURL,
    resources,
}: HeaderOptions) {
    return (
        <PageHeaderCard title={title} description={description} img={img}>
            {developer && (
                <div className="sm:col-span-1 text-left">
                    <dt className="text-sm font-medium text-gray-500">Verantwortlich</dt>
                    <dd className="ml-0 mt-1 text-sm text-gray-900 hover:cursor-pointer">
                        <a href={developer.link} target={'_blank'}>
                            {developer.name}
                        </a>
                    </dd>
                </div>
            )}
            {contact && (
                <div className="sm:col-span-1">
                    <dt className="text-sm font-medium text-gray-500">Kontakt</dt>
                    <dd className="ml-0 mt-1 text-sm text-gray-900 hover:cursor-pointer">
                        <a
                            target={'_blank'}
                            onClick={(event) => {
                                window.open(`mailto:${contact.mail}`, '_blank')
                                event.preventDefault()
                            }}
                        >
                            {contact.name ? contact.name : contact.mail}
                        </a>
                    </dd>
                </div>
            )}
            {statusLabel && (
                <div className="sm:col-span-1">
                    <dt className="text-sm font-medium text-gray-500">Status</dt>
                    <dd className="ml-0 mt-1 text-sm text-gray-900">
                        {statusLabel}
                    </dd>
                </div>
            )}
            {sourceURL && (
                <div className="sm:col-span-1">
                    <dt className="text-sm font-medium text-gray-500">Quellcode</dt>
                    <dd className="ml-0 mt-1 text-sm text-gray-900 hover:cursor-pointer">
                        <a href={sourceURL} target={'_blank'}>
                            {sourceURL}
                        </a>
                    </dd>
                </div>
            )}
            {resources.length > 0 && (
                <div className="sm:col-span-1">
                    <dt className="text-sm font-medium text-gray-500">Ressourcen</dt>
                    {resources.map((resource, index) => (

                        <dd key={index} className="ml-0 mt-1 text-sm text-gray-900 hover:cursor-pointer">
                            <Link href={`/resources/${resource.slug}`} passHref legacyBehavior>
                                <a target={'_blank'}>
                                    {resource.name}
                                </a>
                            </Link>
                        </dd>

                    ))}
                </div>
            )}
            {tosURL && (
                <div className="sm:col-span-1">
                    <dt className="text-sm font-medium text-gray-500">
            Nutzungsbedingungen
                    </dt>
                    <dd className="ml-0 mt-1 text-sm text-gray-900 hover:cursor-pointer">
                        <a href={tosURL} target={'_blank'}>
                            {tosURL}
                        </a>
                    </dd>
                </div>
            )}
            {issuesURL && (
                <div className="sm:col-span-1">
                    <dt className="text-sm font-medium text-gray-500">
            Nutzungsbedingungen
                    </dt>
                    <dd className="ml-0 mt-1 text-sm text-gray-900 hover:cursor-pointer">
                        <a href={issuesURL} target={'_blank'}>
                            {issuesURL}
                        </a>
                    </dd>
                </div>
            )}
            {documentationURL && (
                <div className="sm:col-span-1">
                    <div className="sm:text-center sm:max-w-lg lg:mxw-0 flex items-stretch flex-grow">
                        <a className="text-center text-lg relative inline-flex space-x-2 px-4 py-2 font-medium rounded-md text-white bg-yellow-400 hover:bg-yellow-300 hover:cursor-pointer shadow-sm" href={documentationURL}>
              Zur Ressource
                        </a>
                    </div>
                </div>
            )}
        </PageHeaderCard>
    )
}