💄 feat(components/shared): new Chip component

Author: ythecombinator

src/components/pages/posts/all-posts-section-item.tsx

@@ -7,7 +7,6 @@ import { BlogEntry } from 'services/posts-content-service';
 import { formatDate } from 'utils/date';
 
 import Link from 'components/shared/link';
-import Tag from 'components/shared/tag';
 
 /*~
  * TYPES
@@ -41,12 +40,6 @@ const AllPostsSectionItem: FunctionComponent<
             {language === 'pt' ? `🇧🇷 • ${title}` : `${title}`}
           </Link>
         </h2>
-        {/* TODO: Move this back once we have tags. */}
-        {/* <div className="flex flex-wrap gap-3 my-2">
-          {tags.map((tag) => (
-            <Tag key={tag} text={tag} />
-          ))}
-        </div> */}
         <div className="prose max-w-none text-gray-500 dark:prose-dark dark:text-gray-400">
           {summary}
         </div>

src/components/shared/chip.tsx

@@ -0,0 +1,18 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+
+/*~
+ * COMPONENT
+ */
+
+const Chip: FunctionComponent<PropsWithChildren<{}>> = ({ children }) => {
+  return (
+    <span className="no-underline relative inline-block text-sm font-medium text-blue-700 group mr-4">
+      <span className="absolute inset-0 transition-transform translate-x-0.5 translate-y-0.5 bg-blue-700 group-hover:translate-y-0 group-hover:translate-x-0"></span>
+      <em className="relative block px-2 py-1 bg-white border border-current">
+        {children}
+      </em>
+    </span>
+  );
+};
+
+export default Chip;