all

Downloads/Voltaserve/ui/src/components/common/email-tokenizer.tsx

@@ -0,0 +1,32 @@
+import { useMemo } from 'react'
+import { Tag } from '@chakra-ui/react'
+import cx from 'classnames'
+import parseEmailList from '@/helpers/parse-email-list'
+
+export type EmailTokenizerProps = {
+  value: string
+}
+
+const EmailTokenizer = ({ value }: EmailTokenizerProps) => {
+  const emails = useMemo(() => parseEmailList(value), [value])
+  return (
+    <>
+      {emails.length > 0 ? (
+        <div className={cx('flex', 'flex-wrap', 'gap-0.5')}>
+          {emails.map((email, index) => (
+            <Tag
+              key={index}
+              size="md"
+              variant="solid"
+              className={cx('rounded-full')}
+            >
+              {email}
+            </Tag>
+          ))}
+        </div>
+      ) : null}
+    </>
+  )
+}
+
+export default EmailTokenizer