Refine navigation and post UI

components/meta-item.tsx

@@ -0,0 +1,26 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { ReactNode } from 'react';
+import clsx from 'clsx';
+
+interface MetaItemProps {
+  icon: IconDefinition;
+  children: ReactNode;
+  className?: string;
+  tone?: 'default' | 'muted';
+}
+
+export function MetaItem({ icon, children, className, tone = 'default' }: MetaItemProps) {
+  return (
+    <span
+      className={clsx(
+        'inline-flex items-center gap-1.5 text-xs transition-colors duration-180 ease-snappy',
+        tone === 'muted' ? 'text-slate-500 dark:text-slate-400' : 'text-slate-600 dark:text-slate-200',
+        className
+      )}
+    >
+      <FontAwesomeIcon icon={icon} className="h-3.5 w-3.5 text-slate-400 dark:text-slate-500" />
+      <span>{children}</span>
+    </span>
+  );
+}