✨ Use internal to setup target in links (#114)

octahedroid · Sep 10, 2024 · 7453f13 · 7453f13
1 parent f2a494d
commit 7453f13
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 8 deletions.
diff --git a/starters/next/components/ui/CTA/CTA.tsx b/starters/next/components/ui/CTA/CTA.tsx
@@ -48,14 +48,21 @@ export const CTA = ({
       {actions && actions.length > 0 && (
         <div className="flex flex-wrap justify-center gap-4">
           {actions.slice(0, 2).map(
-            ({ text, href, variant }, index) =>
+            ({ text, href, variant, internal, ...actionProps }, index) =>
               href && (
                 <Button
                   key={index}
                   variant={variant || index === 1 ? 'outline' : 'default'}
                   asChild
+                  {...actionProps}
                 >
-                  <a href={href}>{text}</a>
+                  <a
+                    target={internal ? '_self' : '_blank'}
+                    rel="noopener noreferrer"
+                    href={href}
+                  >
+                    {text}
+                  </a>
                 </Button>
               )
           )}

diff --git a/starters/next/components/ui/Hero/Hero.tsx b/starters/next/components/ui/Hero/Hero.tsx
@@ -42,14 +42,21 @@ export const Hero = ({
           {actions && actions.length > 0 && (
             <div className="flex flex-wrap justify-center gap-4 lg:justify-start">
               {actions.slice(0, 2).map(
-                ({ text, href, variant }, index) =>
+                ({ text, href, variant, internal, ...actionProps }, index) =>
                   href && (
                     <Button
                       key={index}
                       variant={variant || index === 1 ? 'outline' : 'default'}
                       asChild
+                      {...actionProps}
                     >
-                      <a href={href}>{text}</a>
+                      <a
+                        target={internal ? '_self' : '_blank'}
+                        rel="noopener noreferrer"
+                        href={href}
+                      >
+                        {text}
+                      </a>
                     </Button>
                   )
               )}

diff --git a/starters/remix/app/components/ui/CTA/CTA.tsx b/starters/remix/app/components/ui/CTA/CTA.tsx
@@ -48,14 +48,21 @@ export const CTA = ({
       {actions && actions.length > 0 && (
         <div className="flex flex-wrap justify-center gap-4">
           {actions.slice(0, 2).map(
-            ({ text, href, variant }, index) =>
+            ({ text, href, variant, internal, ...actionProps }, index) =>
               href && (
                 <Button
                   key={index}
                   variant={variant || index === 1 ? 'outline' : 'default'}
                   asChild
+                  {...actionProps}
                 >
-                  <a href={href}>{text}</a>
+                  <a
+                    target={internal ? '_self' : '_blank'}
+                    rel="noopener noreferrer"
+                    href={href}
+                  >
+                    {text}
+                  </a>
                 </Button>
               )
           )}

diff --git a/starters/remix/app/components/ui/Hero/Hero.tsx b/starters/remix/app/components/ui/Hero/Hero.tsx
@@ -42,14 +42,21 @@ export const Hero = ({
           {actions && actions.length > 0 && (
             <div className="flex flex-wrap justify-center gap-4 lg:justify-start">
               {actions.slice(0, 2).map(
-                ({ text, href, variant }, index) =>
+                ({ text, href, variant, internal, ...actionProps }, index) =>
                   href && (
                     <Button
                       key={index}
                       variant={variant || index === 1 ? 'outline' : 'default'}
                       asChild
+                      {...actionProps}
                     >
-                      <a href={href}>{text}</a>
+                      <a
+                        target={internal ? '_self' : '_blank'}
+                        rel="noopener noreferrer"
+                        href={href}
+                      >
+                        {text}
+                      </a>
                     </Button>
                   )
               )}