diff --git a/components/[serviceName].tsx b/components/[serviceName].tsx
index 9d65cd7d7d0d9881a3e34e10d3e5f4b780707cdc..90cfeef8864fe3825cf060b83102b88789b4a918 100644
--- a/components/[serviceName].tsx
+++ b/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'
diff --git a/components/it-standards/ContactInfoSingle.tsx b/components/it-standards/ContactInfoSingle.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f7edbb857f316b7e78e7702da5a5c060d68b6107
--- /dev/null
+++ b/components/it-standards/ContactInfoSingle.tsx
@@ -0,0 +1,101 @@
+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
diff --git a/components/it-standards/ContactInformation.tsx b/components/it-standards/ContactInformation.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cdc58a6275356ba815e32de78d154d279fffe8d6
--- /dev/null
+++ b/components/it-standards/ContactInformation.tsx
@@ -0,0 +1,37 @@
+// 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>
+ )
+}
diff --git a/views/it-standards/InfoBoxes.tsx b/components/it-standards/InfoBoxes.tsx
similarity index 92%
rename from views/it-standards/InfoBoxes.tsx
rename to components/it-standards/InfoBoxes.tsx
index fe5d2aff5ea78ff4799aec590c344d4551daee3e..ba257131222672982a777ad37be00f1946d5419f 100644
--- a/views/it-standards/InfoBoxes.tsx
+++ b/components/it-standards/InfoBoxes.tsx
@@ -1,4 +1,5 @@
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">
</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 != '' && (
diff --git a/pages/standards/[serviceName].tsx b/pages/standards/[serviceName].tsx
index 6c1c3c47bc47393361ffda76fbb0750a647676dc..8f8d33342daed9db3c1b1fd784306c89426d5399 100644
--- a/pages/standards/[serviceName].tsx
+++ b/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,