Add OperationDisplay component to visually represent operation types with icons and tags

src/components/Dashboard/common/OperationDisplay.jsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Space, Tag } from 'antd'
+import QuestionCircleIcon from '../../Icons/QuestionCircleIcon'
+import PlusIcon from '../../Icons/PlusIcon'
+import BinIcon from '../../Icons/BinIcon'
+import EditIcon from '../../Icons/EditIcon'
+
+const OperationDisplay = ({
+  operation,
+  showIcon = true,
+  showText = true,
+  showColor = true
+}) => {
+  var tagText = 'False'
+  var tagIcon = <QuestionCircleIcon />
+  var tagColor = 'default'
+  switch (operation) {
+    case 'new':
+      tagText = 'New'
+      tagIcon = <PlusIcon />
+      tagColor = 'success'
+      break
+    case 'delete':
+      tagText = 'Delete'
+      tagIcon = <BinIcon />
+      tagColor = 'error'
+      break
+    case 'edit':
+      tagText = 'Edit'
+      tagIcon = <EditIcon />
+      tagColor = 'blue'
+      break
+    default:
+      break
+  }
+  return (
+    <Space>
+      <Tag
+        style={{ margin: 0 }}
+        color={showColor ? tagColor : 'default'}
+        icon={showIcon ? tagIcon : undefined}
+      >
+        {showText ? tagText : null}
+      </Tag>
+    </Space>
+  )
+}
+
+OperationDisplay.propTypes = {
+  operation: PropTypes.bool.isRequired,
+  showIcon: PropTypes.bool,
+  showText: PropTypes.bool,
+  showColor: PropTypes.bool
+}
+
+export default OperationDisplay