From f5640f41f37b6e1e5015c76d66c48daec7cc072d Mon Sep 17 00:00:00 2001
From: NotNite <hi@notnite.com>
Date: Fri, 28 Apr 2023 17:12:49 -0400
Subject: [PATCH] add tailscale icon

---
 src/app/me/AboutMe.tsx                 |  7 ++++++-
 src/components/icons/TailscaleIcon.tsx | 26 ++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 src/components/icons/TailscaleIcon.tsx

diff --git a/src/app/me/AboutMe.tsx b/src/app/me/AboutMe.tsx
index 90ff8a5..3894512 100644
--- a/src/app/me/AboutMe.tsx
+++ b/src/app/me/AboutMe.tsx
@@ -20,6 +20,7 @@ import inputStyles from "@/components/Input.module.css";
 import Connection from "@/components/Connection";
 import DiscordIcon from "@/components/icons/DiscordIcon";
 import GitHubIcon from "@/components/icons/GitHubIcon";
+import TailscaleIcon from "@/components/icons/TailscaleIcon";
 
 type UpdateResponse = {
   ok: boolean;
@@ -214,7 +215,11 @@ export default function AboutMe({
                       authState={githubState}
                       icon={GitHubIcon}
                     />
-                    <Connection service="Tailscale" unavailable />
+                    <Connection
+                      service="Tailscale"
+                      unavailable
+                      icon={TailscaleIcon}
+                    />
                     <Connection service="Migadu" unavailable />
                   </div>
                 </div>
diff --git a/src/components/icons/TailscaleIcon.tsx b/src/components/icons/TailscaleIcon.tsx
new file mode 100644
index 0000000..3de1ec3
--- /dev/null
+++ b/src/components/icons/TailscaleIcon.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+// https://tailscale.com/files/dist/tailscale-press-kit.zip
+export default function TailscaleIcon() {
+  return (
+    <svg
+      fill="none"
+      height="120"
+      viewBox="30 30 60 60"
+      width="120"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g fill="currentColor">
+        <circle cx="40.625" cy="59.5" r="6.625" />
+        <circle cx="60.4999" cy="59.5" r="6.625" />
+        <circle cx="40.625" cy="79.375" opacity=".2" r="6.625" />
+        <circle cx="80.375" cy="79.375" opacity=".2" r="6.625" />
+        <circle cx="60.4999" cy="79.375" r="6.625" />
+        <circle cx="80.375" cy="59.5" r="6.625" />
+        <circle cx="40.625" cy="39.625" opacity=".2" r="6.625" />
+        <circle cx="60.4999" cy="39.625" opacity=".2" r="6.625" />
+        <circle cx="80.375" cy="39.625" opacity=".2" r="6.625" />
+      </g>
+    </svg>
+  );
+}