Completed contact information

components/[serviceName].tsx

@@ -3,7 +3,7 @@ import NavHeader from '@/views/it-standards/Navigationheader'
 import { Header } from '@/views/it-standards/Service'
 
 import { ServiceContent } from '../types/ServiceContent'
-import { InfoBoxes } from '@/views/it-standards/InfoBoxes'
+import { InfoBoxes } from '@/components/it-standards/InfoBoxes'
 
 import useContent from 'shared/use-content'
 import useImgPath from 'shared/use-img-path'

components/it-standards/ContactInfoSingle.tsx

+import MY_CONSTANTS from '@/lib/constants-standards.js'
+import Link from 'next/link'
+import useImgPath from 'shared/use-img-path'
+
+const { getImgPath } = useImgPath()
+
+export type Contact = {
+    name: string
+    link: string
+    mail: string
+    phone: string
+    contactform: string
+}
+
+type ContactInfoSingleOptions = {
+    contactType: string
+    contact: Contact
+}
+
+function getContactTypeName(contactType: string) {
+    const found = MY_CONSTANTS.CONTACT_TYPES.filter((item) => item.id === contactType)[0]
+    return (found !== undefined ? found.text : '#INVALID')
+}
+
+export function ContactInfoSingle({ contactType, contact }: ContactInfoSingleOptions) {
+    const imagePath = `/img/standards/roles/${contactType}.svg`
+    return (
+        (contact.name != '' ?
+            <div className="contact-single text-sm p-1 mt-1 leading-6">
+                {/* Role icon and contact type row */}
+                <div className="flex grow align-bottom bg-neutral-100 items-center">
+
+                    {/* Role icon */}
+                    <div className="w-4 ml-1 mr-2 max-h-5 flex items-center">
+                        <img
+                            src={getImgPath(imagePath)}
+                            alt={`${contactType}`}
+                        />
+                    </div>
+
+                    {/* Contact type */}
+                    <div className="font-semibold">
+                        {getContactTypeName(contactType)}
+                    </div>
+                </div>
+
+                {/* organisation row */}
+                {
+                    contact.link != '' ?
+                        <div>
+                            <Link href = {contact.link} target="_blank" rel="noopener noreferrer">
+                                {contact.name}
+                            </Link>
+                        </div>
+                        : <div>{contact.name}</div>
+                }
+
+                {/* E-Mail row */}
+                {
+                    contact.mail != '' ?
+                        <div className="flex">
+                            <div className={`${MY_CONSTANTS.INFOBOX_1ST_COLUMN_WIDTH} font-semibold`}>E-Mail</div>
+                            <div>
+                                <Link href = {'mailto:' + contact.mail}>
+                                    {contact.mail}
+                                </Link>
+                            </div>
+                        </div>
+                        : null
+                }
+
+                {/* Phone no. */}
+                {
+                    contact.phone != '' ?
+                        <div className="flex">
+                            <div className={`${MY_CONSTANTS.INFOBOX_1ST_COLUMN_WIDTH} font-semibold`}>Telefon</div>
+                            <div>{contact.phone}</div>
+                        </div>
+                        : null
+                }
+
+                {/* Contact form {contact.phone} */}
+                {
+                    contact.contactform != '' ?
+                        <div className="flex">
+                            <div className="font-semibold">
+                                <Link href = {contact.link} target="_blank" rel="noopener noreferrer">
+                                    Kontaktformular
+                                </Link>
+                            </div>
+                        </div>
+                        : null
+                }
+                <hr />
+            </div>
+            : null
+        )
+    )
+}
+
+export default ContactInfoSingle

components/it-standards/ContactInformation.tsx

+//  Creates the content for Info box 'Kontaktinformationen'
+//  JVo, 2023.09.30
+//
+
+import { Contact, ContactInfoSingle } from './ContactInfoSingle'
+import MY_CONSTANTS from '@/lib/constants-standards.js'
+
+type ContactDetailsOptions = {
+    productOwner: Contact
+    developer: Contact
+    contact: Contact
+}
+
+export function ContactInformation({
+    productOwner,
+    developer,
+    contact,
+}: ContactDetailsOptions) {
+    return (
+        <div className="w-80 border-2 mb-4 rounded-md">
+            <div className={`${MY_CONSTANTS.BG_COLORS.ROLES} p-1 font-bold`}>Kontaktinformationen</div>
+            <div className={`${MY_CONSTANTS.INFOBOX_1ST_COLUMN_WIDTH} font-semibold`}></div>
+            <ContactInfoSingle
+                contactType = {'productOwner'}
+                contact = { productOwner }
+            />
+            <ContactInfoSingle
+                contactType = {'developer'}
+                contact = { developer }
+            />
+            <ContactInfoSingle
+                contactType = {'contact'}
+                contact = { contact }
+            />
+        </div>
+    )
+}

views/it-standards/InfoBoxes.tsx → components/it-standards/InfoBoxes.tsx

 import MY_CONSTANTS from '@/lib/constants-standards.js'
+import { ContactInformation } from '@/components/it-standards/ContactInformation'
 import { ChildResource, LinkItem } from 'types/content'
 import Link from 'next/link'
 
@@ -57,23 +58,18 @@ export function InfoBoxes({
     lastUpdate,
 }: InfoboxOptions) {
     return (
-        <div className="infoboxes">
+        <div className= "infoboxes" >
             {/* Dummy to ensure Tailwind classes are imported */}
             <div className="hidden w-20 bg-red-100 bg-yellow-100 bg-slate-100">
                 &nbsp;
             </div>
 
-            {lastUpdate && (
-                <div className="w-80 border-2 mb-4 rounded-md">
-                    <div className={`${MY_CONSTANTS.BG_COLORS.ROLES} p-1 font-bold`}>Kontaktinformationen</div>
-                    <div className="text-sm p-1">
-                        <div className="flex">
-                            <div className={`${MY_CONSTANTS.INFOBOX_1ST_COLUMN_WIDTH} font-semibold`}></div>
-                            <div>The content</div>
-                        </div>
-                    </div>
-                </div>
-            )}
+            {/* CONTACT INFORMATION */}
+            <ContactInformation
+                productOwner = { productOwner }
+                developer = { developer }
+                contact = { contact }
+            />
 
             {/* SUPPORT LINKS */}
             {supportInfo.length > 0 && supportInfo[0].name != '' && (

pages/standards/[serviceName].tsx

@@ -3,7 +3,7 @@ import NavHeader from '@/views/it-standards/Navigationheader'
 import { Header } from '@/views/it-standards/Service'
 
 import { ServiceContent } from '../../types/ServiceContent'
-import { InfoBoxes } from '@/views/it-standards/InfoBoxes'
+import { InfoBoxes } from '@/components/it-standards/InfoBoxes'
 
 import useContent from 'shared/use-content'
 import useImgPath from 'shared/use-img-path'
@@ -29,7 +29,7 @@ export default function ({ contentString }) {
             <header className="lg:col-start-1 xl:col-start-1 lg:col-span-12 xl:col-span-12 flex flex-row pt-4 font-medium">
                 Föderaler IT-Standard - Detailansicht
             </header>
-            <div className="flex">
+            <div className="grid grid-cols-12">
                 <main className="lg:col-span-9 xl:col-span-9">
                     <Header
                         contact={{
@@ -57,21 +57,21 @@ export default function ({ contentString }) {
 
                     <InfoBoxes
                         productOwner={{
-                            name: content.productOwner.name,
+                            name: content.productOwner.organisation,
                             mail: content.productOwner.mail,
                             link: content.productOwner.url,
                             phone: content.productOwner.phone,
                             contactform: content.productOwner.contactform,
                         }}
                         developer={{
-                            name: content.developer.name,
+                            name: content.developer.organisation,
                             mail: content.developer.mail,
                             link: content.developer.url,
                             phone: content.developer.phone,
                             contactform: content.developer.contactform,
                         }}
                         contact={{
-                            name: content.contactInformation.name,
+                            name: content.contactInformation.organisation,
                             mail: content.contactInformation.mail,
                             link: content.contactInformation.url,
                             phone: content.contactInformation.phone,