Eliminate ServiceTag.tsx

components/it-standards/LifecyclePicture.tsx

-import { Tag } from 'types/content/'
 import useImgPath from 'shared/use-img-path'
 
 const { getImgPath } = useImgPath()
 
-export default function LifecyclePicture(lifecyclephase:Tag) {
-    /* beim tag 'status' soll das zugehörige Lebenszyklus-Bild ausgegeben werden */
-    const imagePath = `/img/standards/lifecycle/${lifecyclephase.value}.svg`
+type LifecylceOptions = {
+    status: string
+  }
+// Display the image corresponding to the lifecycle phase
+export default ({ status } : LifecylceOptions) => {
+    const imagePath = `/img/standards/lifecycle/${status}.svg`
+    console.log(status)
+
     return (
         <div className="border border-gray-300 rounded-lg overflow-hidden py-2">
             {/* Die Next.js Image-Komponente verwendet das "src" Attribut */}
             <img
                 src={getImgPath(imagePath)}
-                alt={`Bild für Tag ${lifecyclephase.value}`}
+                alt={`Bild für Tag ${status}`}
                 width={500} // Breite des Bildes
                 height={0} // Höhe des Bildes
             />

pages/standards/[serviceName].tsx

@@ -14,6 +14,8 @@ const { getImgPath } = useImgPath()
 
 export default function ({ contentString }) {
     const content: ServiceContent = JSON.parse(contentString)
+    console.log(content.status)
+    console.log('statusLabel = ' + translateStatusLableValue(content.status))
     return (
         <div className={'mx-auto max-w-screen-xl it-standard'}>
             <div className="col-start-1 col-span-12 ">
@@ -35,11 +37,12 @@ export default function ({ contentString }) {
                         }}
                         title={content?.name}
                         description={content?.text}
+                        tags = {content.tags}
                         developer={{
                             name: content?.developer.name,
                             link: content?.developer.url,
                         }}
-                        statusLabel={translateStatusLableValue(content.status)}
+                        statusLabel={content.status}
                         documentationURL={content.docsUrl}
                         sourceURL={content.sourceCodeUrl}
                         resources={content.childResources}

pages/standards/components/PageHeaderCard.tsx

 import React, { ReactElement } from 'react'
 import { IconBooks } from '@tabler/icons-react'
+import LifecyclePicture from '@/components/it-standards/LifecyclePicture'
 
 type HeaderOptions = {
   title: string
@@ -8,10 +9,11 @@ type HeaderOptions = {
     src: string
     alt?: string
   }
+  status?: string
   children?: ReactElement[]
 }
 
-export default ({ title, description, img, children }: HeaderOptions) => {
+export default ({ title, description, img, status, children }: HeaderOptions) => {
     return (
         <section className="bg-white mt-10 w-full mx-auto relative z-10 lg:pb-32" aria-labelledby="heading">
             <h2 className="sr-only" id="heading">
@@ -19,6 +21,8 @@ export default ({ title, description, img, children }: HeaderOptions) => {
             </h2>
             <div className="flex flex-col bg-white border-r-4">
                 <div className="flex-1 relative pt-24 px-6 pb-8 md:px-8">
+
+                    {/* Icon + Title */}
                     <div className="h-32 top-0 p-4 inline-block transform -translate-y-1/2">
                         <header className={'flex justify-between space-x-6 items-center'}>
                             {img && img.src
@@ -37,6 +41,13 @@ export default ({ title, description, img, children }: HeaderOptions) => {
                             </h1>
                         </header>
                     </div>
+
+                    {/* Life cycle phase */}
+                    <div className="flex">
+                        <LifecyclePicture status = {status} />
+                    </div>
+
+                    {/* Detailed description */}
                     <div className="flex flex-col md:flex-row md:items-center">
                         <div
                             className="cms-blog-text text-xl text-gray-800 mt-5 md:flex-1"

views/it-standards/Service.tsx

 import React from 'react'
 import Link from 'next/link'
 import PageHeaderCard from '@/../pages/standards/components/PageHeaderCard'
-import { decodeEmail } from '@/lib/utils'
+// import { decodeEmail } from '@/lib/utils'
+import { Tag } from 'types/content'
 
 type HeaderOptions = {
   title: string
@@ -10,6 +11,7 @@ type HeaderOptions = {
     src: string
     alt?: string
   }
+  tags: Tag[]
   developer: {
     name: string
     link: string
@@ -30,6 +32,7 @@ export function Header({
     title,
     description,
     img,
+    tags,
     developer,
     contact,
     tosURL,
@@ -39,8 +42,9 @@ export function Header({
     issuesURL,
     resources,
 }: HeaderOptions) {
+    console.log(statusLabel)
     return (
-        <PageHeaderCard title={title} description={description} img={img}>
+        <PageHeaderCard title={title} description={description} img={img} status={statusLabel} >
             {developer && (
                 <div className="sm:col-span-1 text-left">
                     <dt className="text-sm font-medium text-gray-500">Verantwortlich</dt>