added headings

OpenCatalogi · Feb 28, 2024 · 38f2b18 · 38f2b18
1 parent b51d083
commit 38f2b18
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css
@@ -166,6 +166,10 @@
   grid-template-columns: 1fr 1fr;
 }
 
+.test {
+  flex: 1;
+}
+
 .cardsContainer {
   grid-template-columns: 1fr 1fr;
 }
@@ -174,6 +178,15 @@
   margin-block-end: var(--web-app-size-md);
 }
 
+.cardsHeaderContainer {
+  grid-template-columns: 1fr 1fr;
+  margin-block-end: var(--web-app-size-md) !important;
+}
+
+.cardsHeaderContainer > :not(:last-child) {
+  margin-block-end: var(--web-app-size-md);
+}
+
 .badgeLayout {
   margin-inline-start: var(--web-app-size-xs);
 }
@@ -253,10 +266,19 @@
     gap: var(--web-app-size-xl);
   }
 
+  .cardsHeaderContainer {
+    display: flex;
+    gap: var(--web-app-size-xl);
+  }
+
   .cardsContainer > :not(:last-child) {
     margin-block-end: 0;
   }
 
+  .cardsHeaderContainer > :not(:last-child) {
+    margin-block-end: 0;
+  }
+
   .noOrganizationCardAvailable {
     padding-block-end: unset;
     padding-block-start: unset;

diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
@@ -14,6 +14,7 @@ import {
   TableHeader,
   TableHeaderCell,
   StatusBadge,
+  Heading3,
 } from "@utrecht/component-library-react/dist/css-module";
 import {
   Container,
@@ -295,6 +296,11 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
               )}
             </div>
           </div>
+          <div className={styles.cardsHeaderContainer}>
+            <Heading3 className={styles.test}>{t("Application")}</Heading3>
+            <Heading3 className={styles.test}>{t("Organization")}</Heading3>
+            <Heading3 className={styles.test}>{t("Rating")}</Heading3>
+          </div>
 
           <div className={styles.cardsContainer}>
             {application && (
@@ -309,7 +315,7 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
                 layoutClassName={styles.organizationCardContainer}
               />
             )}
-            {!_getComponent?.data?.embedded?.url?.embedded?.application && (
+            {!_getComponent?.data?.embedded?.applicationSuite && (
               <span className={styles.noOrganizationCardAvailable}>{t("No application found")}</span>
             )}