From 36868295773661271b2db55e7ae87bb9186645cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrgen=20Voskuhl?= <juergen.voskuhl@itcv-software.com>
Date: Thu, 28 Sep 2023 23:42:17 +0200
Subject: [PATCH] Eliminate ServiceTag.tsx
---
components/it-standards/LifecyclePicture.tsx | 14 +++++++++-----
pages/standards/[serviceName].tsx | 5 ++++-
pages/standards/components/PageHeaderCard.tsx | 13 ++++++++++++-
views/it-standards/Service.tsx | 8 ++++++--
4 files changed, 31 insertions(+), 9 deletions(-)
diff --git a/components/it-standards/LifecyclePicture.tsx b/components/it-standards/LifecyclePicture.tsx
index ed9ecf2..a5cf27b 100644
--- a/components/it-standards/LifecyclePicture.tsx
+++ b/components/it-standards/LifecyclePicture.tsx
@@ -1,17 +1,21 @@
-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
/>
diff --git a/pages/standards/[serviceName].tsx b/pages/standards/[serviceName].tsx
index 3cce070..3e956c1 100644
--- a/pages/standards/[serviceName].tsx
+++ b/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}
diff --git a/pages/standards/components/PageHeaderCard.tsx b/pages/standards/components/PageHeaderCard.tsx
index ed8c995..5e131b5 100644
--- a/pages/standards/components/PageHeaderCard.tsx
+++ b/pages/standards/components/PageHeaderCard.tsx
@@ -1,5 +1,6 @@
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"
diff --git a/views/it-standards/Service.tsx b/views/it-standards/Service.tsx
index 7ea16c4..59a745a 100644
--- a/views/it-standards/Service.tsx
+++ b/views/it-standards/Service.tsx
@@ -1,7 +1,8 @@
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>
--
GitLab