feat(ui): add CircularIcon

Author: avivkeller

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

@@ -0,0 +1,27 @@
+@reference "../../styles/index.css";
+
+.icon {
+  @apply flex
+    items-center
+    justify-center
+    rounded-full
+    font-semibold
+    text-white;
+
+  &.lg {
+    @apply h-12
+      w-12
+      text-2xl;
+  }
+
+  &.md {
+    @apply h-10
+      w-10
+      text-xl;
+  }
+
+  &.sm {
+    @apply h-8
+      w-8;
+  }
+}

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

@@ -0,0 +1,18 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import CircularIcon from '#ui/Common/CircularIcon';
+
+type Story = StoryObj<typeof CircularIcon>;
+type Meta = MetaObj<typeof CircularIcon>;
+
+export const Icons: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <CircularIcon symbol="B" color="#3b82f6" size="sm" />
+      <CircularIcon symbol="G" color="#10b981" size="md" />
+      <CircularIcon symbol="R" color="#ef4444" size="lg" />
+    </div>
+  ),
+};
+
+export default { component: CircularIcon } as Meta;

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

@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+
+import styles from './index.module.css';
+
+interface CircularIconProps {
+  symbol: string;
+  color: string;
+  size?: 'lg' | 'md' | 'sm';
+}
+
+export default function CircularIcon({
+  symbol,
+  color,
+  size = 'md',
+}: CircularIconProps) {
+  return (
+    <div
+      className={classNames(styles.icon, styles[size])}
+      style={{ backgroundColor: color }}
+    >
+      <span>{symbol}</span>
+    </div>
+  );
+}