docs/src/components/SidebarCategoryIcon.js at 89c18fbe562d3fdb65ec1fcd48393c275970cc6e · keploy/docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React from 'react';
import {
  FaBook,
  FaRocket,
  FaCloud,
  FaCode,
  FaCog,
  FaShieldAlt,
  FaPlug,
  FaDatabase,
  FaServer,
  FaTerminal,
  FaLightbulb,
  FaGraduationCap,
  FaTools,
  FaLayerGroup,
  FaProjectDiagram,
  FaChartLine,
  FaLock,
} from 'react-icons/fa';
import {
  SiKubernetes,
  SiDocker,
  SiGithubactions,
} from 'react-icons/si';
import { TbBrandRust } from 'react-icons/tb';

/**
 * SidebarCategoryIcon - Icon component for sidebar top-level categories
 *
 * Usage: Import and use in custom sidebar item components
 *
 * @param {string} category - The category identifier
 */

const categoryIcons = {
  // Main categories
  'integration-testing': FaPlug,
  'api-testing': FaRocket,
  'keploy-cloud': FaCloud,
  'quickstart': FaRocket,
  'quickstarts': FaRocket,
  'concepts': FaLightbulb,
  'explanation': FaBook,
  'installation': FaTerminal,
  'configuration': FaCog,
  'running-keploy': FaTerminal,
  'ci-cd': SiGithubactions,
  'security': FaShieldAlt,
  'operation': FaTools,

  // Language / Framework categories
  'java': FaCode,
  'golang': FaCode,
  'python': FaCode,
  'javascript': FaCode,
  'typescript': FaCode,
  'rust': FaCode,

  // Infrastructure
  'docker': SiDocker,
  'kubernetes': SiKubernetes,
  'k8s': SiKubernetes,

  // Features
  'mocking': FaDatabase,
  'mock-registry': FaLayerGroup,
  'deduplication': FaProjectDiagram,
  'test-generation': FaChartLine,

  // Other
  'server': FaServer,
  'gsoc': FaGraduationCap,
  'hacktoberfest': FaGraduationCap,
  'enterprise': FaLock,
  'dependencies': FaLayerGroup,
};

export function getCategoryIcon(categoryLabel) {
  const key = categoryLabel.toLowerCase().replace(/\s+/g, '-');
  return categoryIcons[key] || null;
}

export default function SidebarCategoryIcon({
  category,
  size = 16,
  className = '',
}) {
  const Icon = getCategoryIcon(category);

  if (!Icon) return null;

  return (
    <span
      className={`sidebar-category-icon ${className}`}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '24px',
        height: '24px',
        marginRight: '0.5rem',
        borderRadius: '6px',
        background: 'rgba(139, 92, 246, 0.1)',
        color: '#7c3aed',
        flexShrink: 0,
      }}
    >
      <Icon size={size} />
      <style>{`
        html[data-theme="dark"] .sidebar-category-icon {
          background: rgba(139, 92, 246, 0.15);
          color: #a78bfa;
        }
      `}</style>
    </span>
  );
}

// Export icon mapping for use in sidebar configuration
export { categoryIcons };