fixup!

Author: avivkeller

packages/ui-components/Common/CircularIcon/index.module.css

@@ -19,6 +19,34 @@
   }
 
   &.sm {
-    @apply size-8
+    @apply size-8;
+  }
+
+  &.event {
+    @apply bg-purple-600;
+  }
+
+  &.method {
+    @apply bg-info-600;
+  }
+
+  &.property {
+    @apply bg-green-600;
+  }
+
+  &.class {
+    @apply bg-warning-600;
+  }
+
+  &.module {
+    @apply bg-red-600;
+  }
+
+  &.classMethod {
+    @apply bg-blue-600;
+  }
+
+  &.ctor {
+    @apply bg-pink-600;
   }
 }

packages/ui-components/Common/CircularIcon/index.stories.tsx

@@ -1,16 +1,25 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import CircularIcon from '#ui/Common/CircularIcon';
+import CircularIcon, { type CircularIconProps } from '#ui/Common/CircularIcon';
 
 type Story = StoryObj<typeof CircularIcon>;
 type Meta = MetaObj<typeof CircularIcon>;
 
 export const Icons: Story = {
   render: () => (
-    <div className="flex items-center gap-4">
-      <CircularIcon symbol="B" color="#3b82f6" size="sm" />
-      <CircularIcon symbol="G" color="#10b981" size="md" />
-      <CircularIcon symbol="R" color="#ef4444" size="lg" />
+    <div className="grid grid-cols-3 gap-6 p-6">
+      {['event', 'method', 'property', 'class', 'module', 'classMethod', 'ctor']
+        .map(kind =>
+          ['sm', 'md', 'lg'].map(size => (
+            <div key={`${kind}-${size}`} className="flex justify-center">
+              <CircularIcon
+                kind={kind as CircularIconProps['kind']}
+                size={size as CircularIconProps['size']}
+              />
+            </div>
+          ))
+        )
+        .flat()}
     </div>
   ),
 };

packages/ui-components/Common/CircularIcon/index.tsx

@@ -2,23 +2,32 @@ import classNames from 'classnames';
 
 import styles from './index.module.css';
 
-interface CircularIconProps {
-  symbol: string;
-  color: string;
+export type CircularIconProps = {
+  kind:
+    | 'event'
+    | 'method'
+    | 'property'
+    | 'class'
+    | 'module'
+    | 'classMethod'
+    | 'ctor';
   size?: 'lg' | 'md' | 'sm';
-}
+};
+
+const symbolMap = {
+  event: 'E',
+  method: 'M',
+  property: 'P',
+  class: 'C',
+  module: 'M',
+  classMethod: 'S',
+  ctor: 'C',
+} as const;
 
-export default function CircularIcon({
-  symbol,
-  color,
-  size = 'md',
-}: CircularIconProps) {
+export default function CircularIcon({ kind, size = 'md' }: CircularIconProps) {
   return (
-    <div
-      className={classNames(styles.icon, styles[size])}
-      style={{ backgroundColor: color }}
-    >
-      <span>{symbol}</span>
+    <div className={classNames(styles.icon, styles[size], styles[kind])}>
+      <span>{symbolMap[kind]}</span>
     </div>
   );
 }