frontend for tags

Author: taniaholst

packages/nextjs/src/components/_common/headers/headerWithParent/HeaderWithParent.module.scss

@@ -15,4 +15,20 @@
         font-size: 40px;
         line-height: 52px;
     }
+
+    .tagsList {
+        display: flex;
+        list-style: none;
+        padding: 0;
+        align-items: center;
+        gap: 5px;
+        margin: 0;
+        flex-wrap: wrap;
+
+        .tag {
+            background-color: var(--a-surface-neutral-subtle);
+            border-radius: 2px;
+            padding: 3px 6px;
+        }
+    }
 }

packages/nextjs/src/components/_common/headers/headerWithParent/HeaderWithParent.tsx

@@ -10,9 +10,10 @@ type Props = {
     };
     textAboveTitle?: string;
     className?: string;
+    tags?: string[];
 };
 
-export const HeaderWithParent = ({ contentProps, textAboveTitle, className }: Props) => {
+export const HeaderWithParent = ({ contentProps, textAboveTitle, className, tags }: Props) => {
     const { data } = contentProps;
 
     return (
@@ -23,6 +24,15 @@ export const HeaderWithParent = ({ contentProps, textAboveTitle, className }: Pr
             <Heading level="1" size="large" spacing className={style.header}>
                 {data.title}
             </Heading>
+            {tags && (
+                <ul className={style.tagsList}>
+                    {tags.map((tag, index) => (
+                        <li key={index} className={style.tag}>
+                            {tag}
+                        </li>
+                    ))}
+                </ul>
+            )}
         </div>
     );
 };