From 12c73165245b5e12e6981ff2a2b7b77dc39fb250 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Fri, 10 Oct 2025 17:04:26 +0200
Subject: [PATCH] Refactor buttons

---
 web/components/buttons/general-button.tsx | 18 ++++++++++++++
 web/pages/organization.tsx                | 26 +++++---------------
 web/pages/social.tsx                      | 30 ++++++-----------------
 3 files changed, 32 insertions(+), 42 deletions(-)
 create mode 100644 web/components/buttons/general-button.tsx

diff --git a/web/components/buttons/general-button.tsx b/web/components/buttons/general-button.tsx
new file mode 100644
index 00000000..410f3c7e
--- /dev/null
+++ b/web/components/buttons/general-button.tsx
@@ -0,0 +1,18 @@
+import Link from "next/link";
+
+export const GeneralButton = (props: {
+  url: string
+  content: string
+}) => {
+  const {url, content} = props
+  return <div className="rounded-xl shadow p-6 flex flex-col items-center">
+    <Link
+      href={url}
+      className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition"
+      target={url.startsWith('http') ? '_blank' : undefined}
+      rel={url.startsWith('http') ? 'noopener noreferrer' : undefined}
+    >
+      {content}
+    </Link>
+  </div>;
+}
\ No newline at end of file
diff --git a/web/pages/organization.tsx b/web/pages/organization.tsx
index b6cb0d82..44fc7ccb 100644
--- a/web/pages/organization.tsx
+++ b/web/pages/organization.tsx
@@ -1,21 +1,7 @@
 import {LovePage} from 'web/components/love-page'
+import {GeneralButton} from "web/components/buttons/general-button";
 
 
-export const Block = (props: {
-  url: string
-  content: string
-}) => {
-  const {url, content} = props
-  return <div className="rounded-xl shadow p-6 flex flex-col items-center">
-    <a
-      href={url}
-      className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition"
-    >
-      {content}
-    </a>
-  </div>;
-}
-
 export default function Organization() {
   return (
     <LovePage trackPageView={'social'}>
@@ -24,11 +10,11 @@ export default function Organization() {
           <div className="relative py-8 mt-12 overflow-hidden">
             <div className="relative z-10 max-w-3xl mx-auto px-4">
               <h3 className="text-4xl font-bold text-center mt-8 mb-8">Organization</h3>
-              <Block url={'/support'} content={'Support'}/>
-              <Block url={'/constitution'} content={'Constitution'}/>
-              <Block url={'/financials'} content={'Financials'}/>
-              <Block url={'/terms'} content={'Terms and Conditions'}/>
-              <Block url={'/privacy'} content={'Privacy Policy'}/>
+              <GeneralButton url={'/support'} content={'Support'}/>
+              <GeneralButton url={'/constitution'} content={'Constitution'}/>
+              <GeneralButton url={'/financials'} content={'Financials'}/>
+              <GeneralButton url={'/terms'} content={'Terms and Conditions'}/>
+              <GeneralButton url={'/privacy'} content={'Privacy Policy'}/>
             </div>
           </div>
         </div>
diff --git a/web/pages/social.tsx b/web/pages/social.tsx
index d57eeffc..2ae22ab2 100644
--- a/web/pages/social.tsx
+++ b/web/pages/social.tsx
@@ -1,22 +1,8 @@
 import {LovePage} from 'web/components/love-page'
-import {discordLink, githubRepo, redditLink, stoatLink, xLink, supportEmail} from "common/constants";
+import {discordLink, githubRepo, redditLink, stoatLink, supportEmail, xLink} from "common/constants";
+import {GeneralButton} from "web/components/buttons/general-button";
 
 
-export const Block = (props: {
-  url: string
-  content: string
-}) => {
-  const {url, content} = props
-  return <div className="rounded-xl shadow p-6 flex flex-col items-center">
-    <a
-      href={url}
-      className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition"
-    >
-      {content}
-    </a>
-  </div>;
-}
-
 export default function Social() {
   return (
     <LovePage trackPageView={'social'}>
@@ -25,12 +11,12 @@ export default function Social() {
           <div className="relative py-8 mt-12 overflow-hidden">
             <div className="relative z-10 max-w-3xl mx-auto px-4">
               <h3 className="text-4xl font-bold text-center mt-8 mb-8">Social</h3>
-              <Block url={discordLink} content={'Discord'}/>
-              <Block url={stoatLink} content={'Revolt / Stoat'}/>
-              <Block url={redditLink} content={'Reddit'}/>
-              <Block url={githubRepo} content={'GitHub'}/>
-              <Block url={xLink} content={'X'}/>
-              <Block url={`mailto:${supportEmail}`} content={`${supportEmail}`}/>
+              <GeneralButton url={discordLink} content={'Discord'}/>
+              <GeneralButton url={stoatLink} content={'Revolt / Stoat'}/>
+              <GeneralButton url={redditLink} content={'Reddit'}/>
+              <GeneralButton url={githubRepo} content={'GitHub'}/>
+              <GeneralButton url={xLink} content={'X'}/>
+              <GeneralButton url={`mailto:${supportEmail}`} content={`${supportEmail}`}/>
             </div>
           </div>
         </div>