First iteration of blog

components/social-icons/index.tsx

@@ -0,0 +1,57 @@
+import {
+  Mail,
+  Github,
+  Facebook,
+  Youtube,
+  Linkedin,
+  Twitter,
+  X,
+  Mastodon,
+  Threads,
+  Instagram,
+} from './icons'
+
+const components = {
+  mail: Mail,
+  github: Github,
+  facebook: Facebook,
+  youtube: Youtube,
+  linkedin: Linkedin,
+  twitter: Twitter,
+  x: X,
+  mastodon: Mastodon,
+  threads: Threads,
+  instagram: Instagram,
+}
+
+type SocialIconProps = {
+  kind: keyof typeof components
+  href: string | undefined
+  size?: number
+}
+
+const SocialIcon = ({ kind, href, size = 8 }: SocialIconProps) => {
+  if (
+    !href ||
+    (kind === 'mail' && !/^mailto:[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(href))
+  )
+    return null
+
+  const SocialSvg = components[kind]
+
+  return (
+    <a
+      className="text-sm text-gray-500 transition hover:text-gray-600"
+      target="_blank"
+      rel="noopener noreferrer"
+      href={href}
+    >
+      <span className="sr-only">{kind}</span>
+      <SocialSvg
+        className={`fill-current text-gray-700 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-${size} w-${size}`}
+      />
+    </a>
+  )
+}
+
+export default SocialIcon