added scale tags in template cards #278 (#282)

Author: akyriako

src/components/Templates/TemplateCard.tsx

@@ -20,32 +20,43 @@ const TemplateCard: React.FC<TemplateItem> = ({ title, logo, description, type,
     }
     : {};
 
+  const tags = type
+    .split(',')
+    .map(t => t.trim())
+    .filter(Boolean)
+
   return (
-  <Wrapper {...wrapperProps} className={styles.card}>
-    <div className={styles.header}>
-      <div className={styles.logo}>
-        <img
-          src={logo}
-          alt={`${title} logo`}
-          className={styles.logoImg}
-        />
+    <Wrapper {...wrapperProps} className={styles.card}>
+      <div className={styles.header}>
+        <div className={styles.logo}>
+          <img
+            src={logo}
+            alt={`${title} logo`}
+            className={styles.logoImg}
+          />
+        </div>
+        {partner && (
+          <span className={styles.partnerLabel}>
+            Partner Template
+          </span>
+        )}
       </div>
-      {partner && (
-        <span className={styles.partnerLabel}>
-          Partner Template
-        </span>
-      )}
-    </div>
 
-    <div className={styles.content}>
-      <div className={styles.text}>
-        <div className={styles.title}>{title}</div>
-        <div className={styles.description}>{description}</div>
+      <div className={styles.content}>
+        <div className={styles.text}>
+          <div className={styles.title}>{title}</div>
+          <div className={styles.description}>{description}</div>
+        </div>
+        <div className={styles.tagsContainer}>
+          {tags.map((tag, i) => (
+            <scale-tag color="teal" key={i}>
+              <span className={styles.type}>{tag}</span>
+            </scale-tag>
+          ))}
+        </div>
       </div>
-      <span className={styles.type}>{type}</span>
-    </div>
-  </Wrapper>
-);
+    </Wrapper>
+  );
 
 };
 

src/components/Templates/styles.module.css

@@ -132,4 +132,16 @@ html[data-theme='dark'] .card {
   --text-weak: var(--ifm-color-emphasis-200);
   --shadow-hover: 0px 16px 64px 0px #e20074, 0px 8px 16px 0px #e20074;
   --telekom-shadow-raised-hover: 0px 16px 64px 0px #e20074, 0px 8px 16px 0px #e20074;
+}
+
+.tagsContainer {
+  display: flex;
+  flex-wrap: nowrap;      /* never wrap onto a second line */
+  column-gap: 0.4rem;     /* horizontal gap only */
+  overflow-x: auto;       /* scroll if they overflow */
+}
+
+.tagsContainer :global(scale-tag) {
+  display: inline-flex;   /* reset any block-level margins */
+  margin: 0;              /* remove leftover bottom-margins */
 }