Feat: Added chip component (planning#423)

components/Chip.tsx

+type ChipOptions = {
+  text: string,
+  style: string
+}
+
+export default ({ text, style }: ChipOptions) => {
+  return (
+    <div className={`mx-px my-2 px-3 py-1 text-sm rounded-full text-white ${style}`}>
+      {text}
+    </div>
+  );
+};

pages/resources/index.tsx

@@ -4,6 +4,7 @@ import { fetchServices, ServiceType, Tag } from '@/lib/contentful'
 import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
 import { IconArrowBigRight, IconSearch } from '@tabler/icons'
 import Tooltip from '@/components/Tooltip'
+import Chip from "@/components/Chip";
 
 export default function ({ services }) {
   const router = useRouter()
@@ -253,11 +254,8 @@ export default function ({ services }) {
                             </p>
                             <div className="container flex">
                               {service.tags.map((tag : Tag) => {
-                                debugger;
                                 if (tag.fields && tag.fields.name) {
-                                  return <div className="mx-px my-2 px-3 py-1 text-sm rounded-full text-white  bg-yellow-400">
-                                            {tag.fields.name}
-                                          </div>
+                                  return <Chip text={tag.fields.name} style={'bg-yellow-400'} />
                                 }
                               })}
                             </div>
@@ -269,9 +267,7 @@ export default function ({ services }) {
                             delayOut={600}
                             content="Bei diesem Inhalt handelt es sich um einen externen Inhalt, der keiner Qualitätssicherung seitens der FITKO unterliegt."
                           >
-                            <div className="px-3 py-1 text-sm rounded-full text-white  bg-indigo-500 ">
-                              externer Inhalt
-                            </div>
+                            <Chip text={'externer Inhalt'} style={'bg-indigo-500'} />
                           </Tooltip>
                         : ''}
                       </div>