essential forum code

frontend/src/components/CategoryBadge.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+interface CategoryBadgeProps {
+  category: "item_request" | "technical_support" | "community_resources" | "general_discussion";
+}
+
+const CategoryBadge: React.FC<CategoryBadgeProps> = ({ category }) => {
+  const getCategoryConfig = (cat: string) => {
+    switch (cat) {
+      case 'item_request':
+        return { label: 'Item Request', color: 'primary', icon: 'bi-box-seam' };
+      case 'technical_support':
+        return { label: 'Technical Support', color: 'warning', icon: 'bi-tools' };
+      case 'community_resources':
+        return { label: 'Community Resources', color: 'info', icon: 'bi-people' };
+      case 'general_discussion':
+        return { label: 'General Discussion', color: 'secondary', icon: 'bi-chat-dots' };
+      default:
+        return { label: 'General', color: 'secondary', icon: 'bi-chat' };
+    }
+  };
+
+  const config = getCategoryConfig(category);
+
+  return (
+    <span className={`badge bg-${config.color}`}>
+      <i className={`bi ${config.icon} me-1`}></i>
+      {config.label}
+    </span>
+  );
+};
+
+export default CategoryBadge;