feat: add PlatformBadges component and associated styles for enhanced platform representation

Author: styler

.markdownlint.yaml

@@ -4,7 +4,7 @@ MD013: false
 MD014: false
 MD024: false
 MD031: false
+MD033: false
 MD040: false
 MD041: false
 MD046: false
-

src/components/PlatformBadges.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import clsx from 'clsx'; // Optional: for conditional classes if needed
+
+// Map platform names (lowercase) to their CSS classes for styling
+const platformClasses = {
+  twitch: 'twitch',
+  kick: 'kick',
+  youtube: 'youtube',
+};
+
+export default function PlatformBadges({ supported }) {
+  if (!supported || supported.length === 0) {
+    return null; // Don't render anything if no platforms are specified
+  }
+
+  return (
+    <div className="platform-badge-container">
+      {supported.map((platform) => {
+        // Ensure platform name is lowercase for class matching
+        const platformKey = platform.toLowerCase();
+        const platformClass = platformClasses[platformKey] || ''; // Get specific class
+
+        return (
+          <span
+            key={platform}
+            // Combine base badge class, our sizing class, and the specific platform class
+            className={clsx('badge', 'platform-badge', platformClass)}
+          >
+            {platform} {/* Display the platform name */}
+          </span>
+        );
+      })}
+    </div>
+  );
+} 

src/css/custom.css

@@ -25,3 +25,32 @@ code {
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+/* Additions for platform badges */
+.platform-badge {
+  padding: 0.1em 0.4em; /* Adjust padding */
+  font-size: 0.75em;   /* Adjust font size */
+  margin-left: 5px;   /* Add some space */
+  vertical-align: middle; /* Align nicely with the title */
+  border-radius: 4px; /* Slightly rounded corners */
+  font-weight: 600; /* Make text slightly bolder */
+}
+
+/* Platform-specific colors */
+.platform-badge.twitch {
+  background-color: #9146FF; 
+  color: white;
+}
+.platform-badge.kick {
+   background-color: #53FC18;
+   color: black;
+}
+.platform-badge.youtube {
+   background-color: #FF0000;
+   color: white;
+}
+
+.platform-badge-container {
+  margin-top: -0.5em; /* Adjust this value to fine-tune vertical spacing */
+  margin-bottom: 1em; /* Ensure some space before the Overview section */
+}