fix: update recognition badges layout and data integration

src/sections/Community/Handbook/BadgeRow.js

@@ -0,0 +1,41 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const cell = { padding: "12px", verticalAlign: "middle" };
+const badgeImg = { height: "50px", width: "50px", verticalAlign: "middle" };
+
+const BadgeRow = ({ image, name, title, badgeKey, keycode, keyProp, description }) => {
+  const displayName = name || title || "—";
+  const displayKey = badgeKey || keycode || keyProp || "—";
+
+  return (
+    <tr>
+      <td style={cell}>
+        {typeof image === "string" ? (
+          <img src={image} style={badgeImg} alt={displayName} />
+        ) : (
+          image
+        )}
+      </td>
+      <td style={cell}>
+        <b>{displayName}</b>
+      </td>
+      <td style={cell}>
+        <code>{displayKey}</code>
+      </td>
+      <td style={cell}>{description || "—"}</td>
+    </tr>
+  );
+};
+
+BadgeRow.propTypes = {
+  image: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  name: PropTypes.string,
+  title: PropTypes.string,
+  badgeKey: PropTypes.string,
+  keycode: PropTypes.string,
+  keyProp: PropTypes.string,
+  description: PropTypes.node,
+};
+
+export default BadgeRow;

src/sections/Community/Handbook/badge-item.js

@@ -0,0 +1,57 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const imgStyle = {
+  height: "50px",
+  width: "50px",
+  verticalAlign: "middle",
+  marginRight: "1rem",
+};
+
+
+const BadgeItem = ({ title, description, image, href, to }) => {
+  const content = (
+    <>
+      {typeof image === "string" ? (
+        <img src={image} alt={title} style={imgStyle} />
+      ) : (
+        image
+      )}
+      <b>{title}</b>
+      {description ? <> — {description}</> : null}
+    </>
+  );
+
+  if (href) {
+    return (
+      <li style={{ marginBottom: "0.5rem" }}>
+        <a href={href} target="_blank" rel="noopener noreferrer">
+          {content}
+        </a>
+      </li>
+    );
+  }
+
+  if (to) {
+    return (
+      <li style={{ marginBottom: "0.5rem" }}>
+        <a href={to}>{content}</a>
+      </li>
+    );
+  }
+
+  return <li style={{ marginBottom: "0.5rem" }}>{content}</li>;
+};
+
+BadgeItem.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.node,
+  image: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node,
+  ]),
+  href: PropTypes.string,
+  to: PropTypes.string,
+};
+
+export default BadgeItem;