feat: enhance ExternalLink component and update footer links; replace…

… anchor tags with ExternalLink for consistency
TCP1P · Jan 14, 2025 · 0bd5cff · 0bd5cff
1 parent 1c35e1a
commit 0bd5cff
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 34 deletions.
diff --git a/src/app/_components/external-link.tsx b/src/app/_components/external-link.tsx
@@ -3,11 +3,16 @@ import React, { ReactNode } from 'react';
 interface ExternalLinkProps {
   href: string;
   children: ReactNode;
+  className?: string;
+  mode?: 'red' | 'grey';
 }
 
-const ExternalLink: React.FC<ExternalLinkProps> = ({ href, children }) => {
+const ExternalLink: React.FC<ExternalLinkProps> = ({ href, children, className, mode = 'grey' }) => {
+  const baseClass = "text-sm transition-colors duration-300";
+  const modeClass = mode === 'red' ? 'text-red-400 hover:text-red-300' : 'text-gray-400 hover:text-gray-300';
+
   return (
-    <a href={href} target="_blank" className="mt-4 cursor-pointer">
+    <a href={href} target="_blank" className={`${baseClass} ${modeClass} ${className}`}>
       {children}
     </a>
   );

diff --git a/src/app/_components/footer.tsx b/src/app/_components/footer.tsx
@@ -3,6 +3,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCode, faEnvelope, faFlag } from '@fortawesome/free-solid-svg-icons';
 import { faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons';
+import ExternalLink from './external-link';
 
 const Footer: React.FC = () => {
   return (
@@ -25,35 +26,41 @@ const Footer: React.FC = () => {
           <div className="col-span-1">
             <h3 className="text-white font-medium mb-4">Quick Links</h3>
             <ul className="space-y-2">
-              <li><a href="https://playground.tcp1p.team/" className="text-gray-400 hover:text-red-400 text-sm">Playground</a></li>
-              <li><a href="https://github.com/TCP1P/" className="text-gray-400 hover:text-red-400 text-sm">Resources</a></li>
-              {/* <li><a href="https://dimasma0305.github.io/Cyber-Security-Learning-Resources/" className="text-gray-400 hover:text-red-400 text-sm">Blog</a></li> */}
+              <li>
+                <ExternalLink href='https://playground.tcp1p.team/'>Playground</ExternalLink>
+              </li>
+              <li>
+                <ExternalLink href="https://github.com/TCP1P/">Resources</ExternalLink>
+              </li>
+              {/* <li><ExternalLink href="https://dimasma0305.github.io/Cyber-Security-Learning-Resources/">Blog</ExternalLink></li> */}
             </ul>
           </div>
 
           <div className="col-span-1">
-            <h3 className="text-white font-medium mb-4">Communnity</h3>
+            <h3 className="text-white font-medium mb-4">Community</h3>
             <ul className="space-y-2">
-              <li><a href="https://discord.gg/Gj6h9TjN3D" className="text-gray-400 hover:text-red-400 text-sm">Discord</a></li>
-              {/* <li><a href="https://www.facebook.com/groups/531741829733995/" className="text-gray-400 hover:text-red-400 text-sm">Facebook</a></li> */}
+              <li>
+                <ExternalLink href="https://discord.gg/Gj6h9TjN3D">Discord</ExternalLink>
+              </li>
+              {/* <li><ExternalLink href="https://www.facebook.com/groups/531741829733995/">Facebook</ExternalLink></li> */}
             </ul>
           </div>
 
           <div className="col-span-1">
             <h3 className="text-white font-medium mb-4">Connect</h3>
             <div className="flex space-x-4">
-              <a href="https://github.com/TCP1P" className="w-8 h-8 bg-red-900/30 rounded-lg flex items-center justify-center hover:bg-red-900/50 transition-colors">
+              <ExternalLink href="https://github.com/TCP1P" className="w-8 h-8 bg-red-900/30 rounded-lg flex items-center justify-center hover:bg-red-900/50 transition-colors">
                 <FontAwesomeIcon icon={faGithub} className="text-red-400" />
-              </a>
-              <a href="mailto:[email protected]" className="w-8 h-8 bg-red-900/30 rounded-lg flex items-center justify-center hover:bg-red-900/50 transition-colors">
+              </ExternalLink>
+              <ExternalLink href="mailto:[email protected]" className="w-8 h-8 bg-red-900/30 rounded-lg flex items-center justify-center hover:bg-red-900/50 transition-colors">
                 <FontAwesomeIcon icon={faEnvelope} className="text-red-400" />
-              </a>
-              <a href="https://ctftime.org/team/187248" className="w-8 h-8 bg-red-900/30 rounded-lg flex items-center justify-center hover:bg-red-900/50 transition-colors">
+              </ExternalLink>
+              <ExternalLink href="https://ctftime.org/team/187248" className="w-8 h-8 bg-red-900/30 rounded-lg flex items-center justify-center hover:bg-red-900/50 transition-colors">
                 <FontAwesomeIcon icon={faFlag} className="text-red-400" />
-              </a>
-              <a href="https://www.linkedin.com/company/tcp1p/" className="w-8 h-8 bg-red-900/30 rounded-lg flex items-center justify-center hover:bg-red-900/50 transition-colors">
+              </ExternalLink>
+              <ExternalLink href="https://www.linkedin.com/company/tcp1p/" className="w-8 h-8 bg-red-900/30 rounded-lg flex items-center justify-center hover:bg-red-900/50 transition-colors">
                 <FontAwesomeIcon icon={faLinkedin} className="text-red-400" />
-              </a>
+              </ExternalLink>
             </div>
           </div>
         </div>

diff --git a/src/app/_components/old/footer.tsx b/src/app/_components/old/footer.tsx
@@ -1,21 +1,31 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGithub, faLinkedin } from "@fortawesome/free-brands-svg-icons";
-import { faEnvelope} from "@fortawesome/free-solid-svg-icons";
+import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
 import Image from "next/image";
 
-import ctftimelogo from "../../../public/ctftime.png"
+import ctftimelogo from "../../../public/ctftime.png";
+import ExternalLink from "../external-link";
+
 export function TopFooter() {
-    return <>
-        <footer className="footer footer-center p-10 p-t text-base-content rounded">
+    return (
+        <footer className="footer footer-center p-10 text-base-content rounded">
             <nav>
                 <div className="grid grid-flow-col gap-4 p-4">
-                    <a href="https://www.linkedin.com/company/tcp1p/" target="_blank"><FontAwesomeIcon icon={faLinkedin} className="text-3xl" /></a>
-                    <a href="https://github.com/TCP1P" target="_blank"><FontAwesomeIcon icon={faGithub} className="text-3xl" /></a>
-                    <a href="https://ctftime.org/team/187248" target="_blank"><Image src={ctftimelogo} width={28} height={28} alt={"CTFtime"}></Image></a>
-                    <a href="mailto:[email protected]" target="_blank"><FontAwesomeIcon icon={faEnvelope} className="text-3xl" /></a>
+                    <ExternalLink href="https://www.linkedin.com/company/tcp1p/" mode="red">
+                        <FontAwesomeIcon icon={faLinkedin} className="text-3xl" />
+                    </ExternalLink>
+                    <ExternalLink href="https://github.com/TCP1P" mode="red">
+                        <FontAwesomeIcon icon={faGithub} className="text-3xl" />
+                    </ExternalLink>
+                    <ExternalLink href="https://ctftime.org/team/187248" mode="red">
+                        <Image src={ctftimelogo} width={28} height={28} alt={"CTFtime"} />
+                    </ExternalLink>
+                    <ExternalLink href="mailto:[email protected]" mode="red">
+                        <FontAwesomeIcon icon={faEnvelope} className="text-3xl" />
+                    </ExternalLink>
                 </div>
                 <p>TCP1P • © 2024</p>
             </nav>
         </footer>
-    </>
+    );
 }
diff --git a/src/app/ctfs/timeline.tsx b/src/app/ctfs/timeline.tsx
@@ -9,6 +9,7 @@ import {
     faHandsHolding,
     faLadderWater
 } from "@fortawesome/free-solid-svg-icons";
+import ExternalLink from "../_components/external-link";
 
 export const timelineData = [
     {
@@ -103,9 +104,10 @@ export const timelineData = [
                         description: (
                             <>
                                 TCP1PCTF 2023 took place in October 2023 and achieved a favorable rating on{" "}
-                                <a href="https://ctftime.org/event/2001" className="link" target="_blank">
+                                <ExternalLink href="https://ctftime.org/event/2001" className="link" mode="red">
                                     CTFtime
-                                </a>
+                                </ExternalLink>
+
                                 , with a score of 24.85.
                             </>
                         ),

diff --git a/src/app/indonesia-ctf-2025/faq.tsx b/src/app/indonesia-ctf-2025/faq.tsx
@@ -1,3 +1,5 @@
+import ExternalLink from "../_components/external-link";
+
 export function FAQ() {
     const faqs = [
         {
@@ -21,14 +23,14 @@ export function FAQ() {
         },
         {
             text: 'How to join?',
-            description: `
+            description: <>
                 To join this CTF, we recommend that you first create a team on CTFtime. Once you have formed
-                your team, you can add this <a class="link" target="_blank"
+                your team, you can add this <a className="link" target="_blank"
                     href="https://ctftime.org/event/2256/">event</a> and wait for the start of the CTF on
                 October 11th. Lastly, don't forget to join our Discord server for more information. Here is the
-                link: <a class="link" target="_blank" rel="noopener noreferrer"
-                    href="https://discord.gg/Gj6h9TjN3D">Discord</a>.
-            `
+                link: <ExternalLink href="https://discord.gg/Gj6h9TjN3D" mode="red">Discord</ExternalLink>.
+            </>
+                
         }
     ];
 
@@ -37,7 +39,7 @@ export function FAQ() {
             {faqs.map((faq, index) => (
                 <div key={index} className="bg-gray-900/50 backdrop-blur-xl rounded-xl border border-red-500/10 p-6 hover:border-red-400/30 transition-all duration-300">
                     <div className="text-xl font-medium text-white mb-4">{faq.text}</div>
-                    <div className="text-gray-400" dangerouslySetInnerHTML={{ __html: faq.description }}></div>
+                    <div className="text-gray-400">{faq.description}</div>
                 </div>
             ))}
         </div>

diff --git a/src/app/indonesia-ctf-2025/page.tsx b/src/app/indonesia-ctf-2025/page.tsx
@@ -1,3 +1,4 @@
+import ExternalLink from "../_components/external-link";
 import { Categories } from "./categories";
 import { Countdown } from "./countdown";
 import { CrateTemplate } from "./crate";
@@ -44,7 +45,7 @@ export default function Page() {
                         <h2 className="text-4xl text-white mb-10">Discord</h2>
                         <div className="divider mb-10"></div>
                         <p className="text-gray-300">
-                            Join our Discord server for more information. Here is the link: <a className="text-red-400 hover:text-red-300 transition-colors duration-300" target="_blank" rel="noopener noreferrer" href="https://discord.gg/Gj6h9TjN3D">Discord</a>.
+                            Join our Discord server for more information. Here is the link: <ExternalLink mode="red"  href="https://discord.gg/Gj6h9TjN3D">Discord</ExternalLink>.
                         </p>
                     </section>
                     {/* <section className="my-16 p-8">