fix: export link attributes to component

sigp · Aug 2, 2023 · bb16d0e · bb16d0e
1 parent b8bf362
commit bb16d0e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/components/DashboardOptions/DashboardOptions.tsx b/src/components/DashboardOptions/DashboardOptions.tsx
@@ -8,6 +8,7 @@ import { ContentView } from '../../constants/enums'
 import { useTranslation } from 'react-i18next'
 import Typography from '../Typography/Typography'
 import { DiscordUrl, LighthouseBookUrl } from '../../constants/constants'
+import ExternalLink from '../ExternalLink/ExternalLink'
 
 const DashboardOptions = () => {
   const { t } = useTranslation()
@@ -35,22 +36,22 @@ const DashboardOptions = () => {
             <Typography className='capitalize'>{t('sidebar.settings')}</Typography>
           </div>
         </DropDownItem>
-        <a href={DiscordUrl} target='_blank' rel='noreferrer'>
+        <ExternalLink href={DiscordUrl}>
           <DropDownItem>
             <div className='w-full flex space-x-2'>
               <i className='bi bi-discord' />
               <Typography className='capitalize'>Discord</Typography>
             </div>
           </DropDownItem>
-        </a>
-        <a href={LighthouseBookUrl} target='_blank' rel='noreferrer'>
+        </ExternalLink>
+        <ExternalLink href={LighthouseBookUrl}>
           <DropDownItem>
             <div className='w-full flex space-x-2'>
               <i className='bi bi-life-preserver' />
               <Typography className='capitalize'>{t('documentation')}</Typography>
             </div>
           </DropDownItem>
-        </a>
+        </ExternalLink>
       </DropDown>
     </div>
   )

diff --git a/src/components/ExternalLink/ExternalLink.tsx b/src/components/ExternalLink/ExternalLink.tsx
@@ -0,0 +1,13 @@
+import { FC, AnchorHTMLAttributes } from 'react'
+
+export type ExternalLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>
+
+const ExternalLink: FC<ExternalLinkProps> = ({ children, ...props }) => {
+  return (
+    <a target='_blank' rel='noreferrer' {...props}>
+      {children}
+    </a>
+  )
+}
+
+export default ExternalLink