From cdf8f6065583eb49feb00ff7e13ae6a4996c910b Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Tue, 25 May 2021 15:57:51 -0300
Subject: [PATCH] refactor: extract Tag to its own component

---
 app/assets/javascripts/components/NoteTags.tsx |  7 ++-----
 app/assets/javascripts/components/Tag.tsx      | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 app/assets/javascripts/components/Tag.tsx

diff --git a/app/assets/javascripts/components/NoteTags.tsx b/app/assets/javascripts/components/NoteTags.tsx
index 534b4964d..f91bcc509 100644
--- a/app/assets/javascripts/components/NoteTags.tsx
+++ b/app/assets/javascripts/components/NoteTags.tsx
@@ -1,7 +1,7 @@
 import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
 import { toDirective } from './utils';
-import { Icon } from './Icon';
+import { Tag } from './Tag';
 import { AutocompleteTagInput } from './AutocompleteTagInput';
 import { WebApplication } from '@/ui_models/application';
 
@@ -14,10 +14,7 @@ const NoteTags = observer(({ application, appState }: Props) => {
   return (
     <div className="flex flex-wrap">
       {appState.notes.activeNoteTags.map((tag) => (
-        <span key={tag.uuid} className="bg-contrast rounded text-xs color-text p-1 flex items-center mt-2 mr-2">
-          <Icon type="hashtag" className="small color-neutral mr-1" />
-          {tag.title}
-        </span>
+        <Tag key={tag.uuid} title={tag.title} className="mt-2 mr-2" />
       ))}
       <AutocompleteTagInput application={application} appState={appState} />
     </div>
diff --git a/app/assets/javascripts/components/Tag.tsx b/app/assets/javascripts/components/Tag.tsx
new file mode 100644
index 000000000..53f4d1709
--- /dev/null
+++ b/app/assets/javascripts/components/Tag.tsx
@@ -0,0 +1,16 @@
+import { FunctionalComponent } from 'preact';
+import { Icon } from './Icon';
+
+type TagProps = {
+  title: string;
+  className?: string;
+};
+
+export const Tag: FunctionalComponent<TagProps> = ({ title, className }) => (
+  <span
+    className={`bg-contrast rounded text-xs color-text p-1 flex items-center ${className ?? ''}`}
+  >
+    <Icon type="hashtag" className="small color-neutral mr-1" />
+    {title}
+  </span>
+);