Merge pull request #15 from rk9595/openLinkInNewTab

Open link in new tab
razorpay · Oct 27, 2023 · 0ec05cd · 0ec05cd
2 parents 24f33b1 + c738ca4
commit 0ec05cd
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 8 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -20,34 +20,52 @@ const Footer = () => (
       <nav
         className={`mt-8 md:mt-0 md:ml-auto lg:mr-6 font-semibold flex flex-col md:flex-row items-center gap-6 dark:text-slate-300 text-slate-700'`}
       >
-        <a href="https://github.com/razorpay/public-presentations">Talks</a>
-        <a href="https://engineering.razorpay.com/">Engineering Blog</a>
-        <a href="https://razorpay.com/jobs/">Careers</a>
-        <a href="https://razorpay.com/docs/">Documentation</a>
+        <a
+          href="https://github.com/razorpay/public-presentations"
+          target="_blank"
+        >
+          Talks
+        </a>
+        <a href="https://engineering.razorpay.com/" target="_blank">
+          Engineering Blog
+        </a>
+        <a href="https://razorpay.com/jobs/" target="_blank">
+          Careers
+        </a>
+        <a href="https://razorpay.com/docs/" target="_blank">
+          Documentation
+        </a>
       </nav>
 
       {/* Social links */}
       <nav
         className={`flex justify-center md:justify-start space-x-6 dark:text-slate-300 text-slate-700`}
       >
-        <a href="https://github.com/Razorpay" aria-label="Open Razorpay GitHub">
+        <a
+          href="https://github.com/Razorpay"
+          aria-label="Open Razorpay GitHub"
+          target="_blank"
+        >
           <FaGithub size="1rem" />
         </a>
         <a
           href="https://twitter.com/Razorpay"
           aria-label="Open Razorpay Twitter"
+          target="_blank"
         >
           <FaXTwitter size="1rem" />
         </a>
         <a
           href="https://linkedin.com/company/razorpay"
           aria-label="Open Razorpay LinkedIn"
+          target="_blank"
         >
           <FaLinkedinIn size="1rem" />
         </a>
         <a
           href="https://www.instagram.com/razorpay/"
           aria-label="Open Razorpay Instagram"
+          target="_blank"
         >
           <FaInstagram size="1rem" />
         </a>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -8,9 +8,12 @@ const Navigation = ({ className, ...props }: PropsOfHtmlElement) => (
   <nav className={`font-semibold text-sm ${className}`} {...props}>
     <a href="/#projects">Projects</a>
     <a href="/#talks">Talks</a>
-    <a href="https://razorpay.com/jobs">Careers</a>
+    <a href="https://razorpay.com/jobs" target="_blank">
+      Careers
+    </a>
     <a
       href="https://github.com/razorpay"
+      target="_blank"
       className="flex items-center justify-center"
     >
       <FaGithub size="0.875rem" className="mr-1.5" />

diff --git a/src/components/Projects/Card.tsx b/src/components/Projects/Card.tsx
@@ -38,6 +38,7 @@ const ProjectCard = ({
 }: Project) => (
   <a
     href={html_url}
+    target="_blank"
     className="m-4 h-36 flex flex-col min-w-0 bg-white dark:bg-slate-800 rounded px-6 py-4 shadow shadow-black/5 group transition transform hover:-translate-y-0.5 hover:scale-1015 hover:shadow-black/10"
   >
     <div className="flex justify-between items-center">

diff --git a/src/components/Talks/Card.tsx b/src/components/Talks/Card.tsx
@@ -20,6 +20,7 @@ const Speaker = ({
 }: Talk['speakers'][0] & { className?: string }) => (
   <a
     href={url}
+    target="_blank"
     className={`rounded-full overflow-hidden border-4 border-slate-800 transition-colors hover:border-sky-500 ${className}`}
     aria-label={`View more about ${name}`}
   >
@@ -33,7 +34,7 @@ const Speaker = ({
 
 const TalkCard = ({ published, slides, speakers, title, url }: Talk) => (
   <div className="flex flex-col px-8 py-6 bg-slate-800 rounded overflow-hidden transform transition shadow-lg">
-    <a href={url}>
+    <a href={url} target="_blank">
       <h2 className="text-xl font-semibold text-white tracking-wide leading-relaxed transition-colors hover:text-sky-500">
         {title}
       </h2>
@@ -62,6 +63,7 @@ const TalkCard = ({ published, slides, speakers, title, url }: Talk) => (
       {slides && (
         <a
           href={slides}
+          target="_blank"
           className="flex items-center transition-colors hover:text-sky-500"
         >
           Slides

diff --git a/src/pages/index.page.tsx b/src/pages/index.page.tsx
@@ -29,12 +29,13 @@ export const Page = ({ projects, talks, members }: PageData) => {
         </h1>
 
         <div className="flex flex-col sm:flex-row mt-12 space-y-4 sm:space-x-4 sm:space-y-0 justify-center mx-auto max-w-xs ">
-          <Button as="a" href="https://razorpay.com/jobs/">
+          <Button as="a" href="https://razorpay.com/jobs/" target="_blank">
             Join Razorpay
           </Button>
           <Button
             as="a"
             href="https://stackshare.io/razorpay/open-source-showcase"
+            target="_blank"
           >
             View Stack
           </Button>