通用组件开发

src/components/Bubble/BubbleItem.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { BubbleOption } from './index';
+import './bubbleItem.scss';
+
+export interface BubbleItemProps {
+  option: BubbleOption;
+  isSelected: boolean;
+  size: 'small' | 'medium' | 'large';
+  disabled: boolean;
+  onClick: (option: BubbleOption) => void;
+}
+
+const BubbleItem: React.FC<BubbleItemProps> = ({
+  option,
+  isSelected,
+  size,
+  disabled,
+  onClick
+}) => {
+  return (
+    <button
+      className={`bubble-option ${size} ${isSelected ? 'selected' : ''} ${
+        option.disabled || disabled ? 'disabled' : ''
+      }`}
+      onClick={() => onClick(option)}
+      disabled={option.disabled || disabled}
+    >
+      {option.icon && <span className="bubble-icon">{option.icon}</span>}
+      <span className="bubble-label">{option.label}</span>
+      {option.description && <span className="bubble-description">{option.description}</span>}
+    </button>
+  );
+};
+
+export default BubbleItem;