refactor(anni): extract label as generic component

hpi-dhc · Jun 20, 2022 · 1d5d687 · 1d5d687
1 parent b594e42
commit 1d5d687
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/annotation-interface/components/Label.tsx b/annotation-interface/components/Label.tsx
@@ -0,0 +1,20 @@
+import { createElement, ElementType } from 'react';
+
+interface Props<T> extends React.HTMLAttributes<T> {
+    as?: ElementType;
+    title: string;
+}
+
+function Label<T>({ as: parent, title, ...additionalProps }: Props<T>) {
+    return createElement(
+        parent ?? 'span',
+        {
+            className:
+                'border border-black border-opacity-20 text-xs px-2 rounded-full whitespace-nowrap font-semibold align-text-top mr-2',
+            ...additionalProps,
+        },
+        title,
+    );
+}
+
+export default Label;
diff --git a/annotation-interface/pages/bricks/index.tsx b/annotation-interface/pages/bricks/index.tsx
@@ -5,6 +5,7 @@ import Link from 'next/link';
 
 import { displayCategories } from '../../common/constants';
 import FilterTabs, { DisplayFilterProps } from '../../components/FilterTabs';
+import Label from '../../components/Label';
 import PageHeading from '../../components/PageHeading';
 import dbConnect from '../../database/connect';
 import TextBrick from '../../database/models/TextBrick';
@@ -69,18 +70,17 @@ const AllTextBricks = ({
                                             )}
                                         </a>
                                     </Link>
-                                    <button
-                                        className="border border-black border-opacity-20 text-xs px-2 rounded-full whitespace-nowrap font-semibold align-text-top mr-2"
+                                    <Label
+                                        as="button"
+                                        title={brick.usage}
                                         onClick={() =>
                                             display.setCategoryIndex(
                                                 displayCategories.indexOf(
                                                     brick.usage,
                                                 ),
                                             )
                                         }
-                                    >
-                                        {brick.usage}
-                                    </button>
+                                    />
                                 </p>
                             ))}
                         </div>