From ee1daec03cf47d4478dde6f6ca1ed20292193eaa Mon Sep 17 00:00:00 2001
From: Vojtech Mares <iam@vojtechmares.com>
Date: Sat, 20 Aug 2022 18:59:07 +0200
Subject: [PATCH] refactor(themes/signpost): make link self-contained component

---
 themes/signpost/components/Grid.tsx | 24 ++--------------------
 themes/signpost/components/Link.tsx | 31 +++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 22 deletions(-)
 create mode 100644 themes/signpost/components/Link.tsx

diff --git a/themes/signpost/components/Grid.tsx b/themes/signpost/components/Grid.tsx
index da29f20..c8f1da8 100644
--- a/themes/signpost/components/Grid.tsx
+++ b/themes/signpost/components/Grid.tsx
@@ -1,4 +1,5 @@
 import type SectionType from './../types/section';
+import Link from './Link';
 
 type Props = {
   sections: SectionType[];
@@ -14,28 +15,7 @@ const Grid = ({ sections }: Props) => (
         <ul>
           {section.items.map((item) => (
             <li key={item.name} className="my-2">
-              <a
-                href={item.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="
-                  block
-                  w-full
-                  text-center
-                  py-2
-                  border-2
-                  border-gray-400
-                  rounded
-                  hover:bg-gray-900
-                  hover:border-gray-900
-                  hover:text-white
-                  transition
-                  focus:ring-2
-                  focus:ring-gray-600 text-gray-800
-                "
-              >
-                {item.name}
-              </a>
+              <Link url={item.url} title={item.name} />
             </li>
           ))}
         </ul>
diff --git a/themes/signpost/components/Link.tsx b/themes/signpost/components/Link.tsx
new file mode 100644
index 0000000..82b31d5
--- /dev/null
+++ b/themes/signpost/components/Link.tsx
@@ -0,0 +1,31 @@
+type Props = {
+  url: string;
+  title: string;
+};
+
+const Link = ({ url, title }: Props) => (
+  <a
+    href={url}
+    target="_blank"
+    rel="noopener noreferrer"
+    className="
+      block
+      w-full
+      text-center
+      py-2
+      border-2
+      border-gray-400
+      rounded
+      hover:bg-gray-900
+      hover:border-gray-900
+      hover:text-white
+      transition
+      focus:ring-2
+      focus:ring-gray-600 text-gray-800
+    "
+  >
+    {title}
+  </a>
+);
+
+export default Link;