From 033ce47d01beaf3f251a41c2cce1bc116ed3ad99 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Wed, 11 Dec 2024 13:31:21 +0800
Subject: [PATCH] feat: add Dot and Tag components for enhanced UI
 representation

---
 .../documents/detail/completed/common/dot.tsx      | 11 +++++++++++
 .../documents/detail/completed/common/tag.tsx      | 14 ++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 web/app/components/datasets/documents/detail/completed/common/dot.tsx
 create mode 100644 web/app/components/datasets/documents/detail/completed/common/tag.tsx

diff --git a/web/app/components/datasets/documents/detail/completed/common/dot.tsx b/web/app/components/datasets/documents/detail/completed/common/dot.tsx
new file mode 100644
index 0000000000..c791b93e2d
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/completed/common/dot.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Dot = () => {
+  return (
+    <div className='text-text-quaternary text-xs font-medium'>·</div>
+  )
+}
+
+Dot.displayName = 'Dot'
+
+export default React.memo(Dot)
diff --git a/web/app/components/datasets/documents/detail/completed/common/tag.tsx b/web/app/components/datasets/documents/detail/completed/common/tag.tsx
new file mode 100644
index 0000000000..9517d38f1e
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/completed/common/tag.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+const Tag = ({ text }: { text: string }) => {
+  return (
+    <div className='inline-flex items-center gap-x-0.5'>
+      <span className='text-text-quaternary text-xs font-medium'>#</span>
+      <span className='text-text-tertiary text-xs'>{text}</span>
+    </div>
+  )
+}
+
+Tag.displayName = 'Tag'
+
+export default React.memo(Tag)