Use Buttons instead of <a>

components/CharacterHovercard/index.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
+import jconv from 'jconv'
 
 import {
   Hovercard,
   HovercardContent,
   HovercardTrigger,
 } from '~components/Hovercard'
+import Button from '~components/Button'
 import WeaponLabelIcon from '~components/WeaponLabelIcon'
 import UncapIndicator from '~components/UncapIndicator'
 
@@ -15,10 +17,10 @@ import {
   aetherialMastery,
   permanentMastery,
 } from '~data/overMastery'
+import { characterAwakening } from '~data/awakening'
 import { ExtendedMastery } from '~types'
 
 import './index.scss'
-import { characterAwakening } from '~data/awakening'
 
 interface Props {
   gridCharacter: GridCharacter
@@ -55,10 +57,13 @@ const CharacterHovercard = (props: Props) => {
   ]
 
   const tintElement = Element[props.gridCharacter.object.element]
-  const wikiUrl = `https://gbf.wiki/${props.gridCharacter.object.name.en.replaceAll(
-    ' ',
-    '_'
-  )}`
+
+  function goTo() {
+    const urlSafeName = props.gridCharacter.object.name.en.replaceAll(' ', '_')
+    const url = `https://gbf.wiki/${urlSafeName}`
+
+    window.open(url, '_blank')
+  }
 
   function characterImage() {
     let imgSrc = ''
@@ -85,7 +90,7 @@ const CharacterHovercard = (props: Props) => {
 
     if (canonicalMastery) {
       return (
-        <li className="ExtendedMastery">
+        <li className="ExtendedMastery" key={canonicalMastery.id}>
           <img
             alt={canonicalMastery.name[locale]}
             src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/mastery/${canonicalMastery.slug}.png`}
@@ -200,6 +205,15 @@ const CharacterHovercard = (props: Props) => {
     }
   }
 
+  const wikiButton = (
+    <Button
+      className={tintElement}
+      text={t('buttons.wiki')}
+      onClick={goTo}
+      contained={true}
+    />
+  )
+
   return (
     <Hovercard openDelay={350}>
       <HovercardTrigger asChild onClick={props.onTriggerClick}>
@@ -242,19 +256,16 @@ const CharacterHovercard = (props: Props) => {
               type="character"
               ulb={props.gridCharacter.object.uncap.ulb || false}
               flb={props.gridCharacter.object.uncap.flb || false}
-              special={false}
+              transcendenceStage={props.gridCharacter.transcendence_step}
+              special={props.gridCharacter.object.special}
             />
           </div>
         </div>
+        {wikiButton}
         {awakeningSection()}
         {overMasterySection()}
         {aetherialMasterySection()}
         {permanentMasterySection()}
-        <section className="Footer">
-          <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">
-            {t('buttons.wiki')}
-          </a>
-        </section>
       </HovercardContent>
     </Hovercard>
   )

components/SummonHovercard/index.tsx

@@ -7,6 +7,7 @@ import {
   HovercardContent,
   HovercardTrigger,
 } from '~components/Hovercard'
+import Button from '~components/Button'
 import WeaponLabelIcon from '~components/WeaponLabelIcon'
 import UncapIndicator from '~components/UncapIndicator'
 
@@ -27,10 +28,13 @@ const SummonHovercard = (props: Props) => {
   const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
 
   const tintElement = Element[props.gridSummon.object.element]
-  const wikiUrl = `https://gbf.wiki/${props.gridSummon.object.name.en.replaceAll(
-    ' ',
-    '_'
-  )}`
+
+  function goTo() {
+    const urlSafeName = props.gridSummon.object.name.en.replaceAll(' ', '_')
+    const url = `https://gbf.wiki/${urlSafeName}`
+
+    window.open(url, '_blank')
+  }
 
   function summonImage() {
     let imgSrc = ''
@@ -63,6 +67,15 @@ const SummonHovercard = (props: Props) => {
     return imgSrc
   }
 
+  const wikiButton = (
+    <Button
+      className={tintElement}
+      text={t('buttons.wiki')}
+      onClick={goTo}
+      contained={true}
+    />
+  )
+
   return (
     <Hovercard openDelay={350}>
       <HovercardTrigger asChild onClick={props.onTriggerClick}>
@@ -91,9 +104,7 @@ const SummonHovercard = (props: Props) => {
             />
           </div>
         </div>
-        <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">
-          {t('buttons.wiki')}
-        </a>
+        {wikiButton}
       </HovercardContent>
     </Hovercard>
   )

components/WeaponHovercard/index.tsx

@@ -7,6 +7,7 @@ import {
   HovercardContent,
   HovercardTrigger,
 } from '~components/Hovercard'
+import Button from '~components/Button'
 import WeaponLabelIcon from '~components/WeaponLabelIcon'
 import UncapIndicator from '~components/UncapIndicator'
 
@@ -79,6 +80,13 @@ const WeaponHovercard = (props: Props) => {
     '_'
   )}`
 
+  function goTo() {
+    const urlSafeName = props.gridWeapon.object.name.en.replaceAll(' ', '_')
+    const url = `https://gbf.wiki/${urlSafeName}`
+
+    window.open(url, '_blank')
+  }
+
   const hovercardSide = () => {
     if (props.gridWeapon.position == -1) return 'right'
     else if ([6, 7, 8, 9, 10, 11].includes(props.gridWeapon.position))
@@ -222,6 +230,15 @@ const WeaponHovercard = (props: Props) => {
     </section>
   )
 
+  const wikiButton = (
+    <Button
+      className={tintElement}
+      text={t('buttons.wiki')}
+      onClick={goTo}
+      contained={true}
+    />
+  )
+
   return (
     <Hovercard openDelay={350}>
       <HovercardTrigger asChild onClick={props.onTriggerClick}>
@@ -275,10 +292,7 @@ const WeaponHovercard = (props: Props) => {
         {props.gridWeapon.weapon_keys && props.gridWeapon.weapon_keys.length > 0
           ? keysSection
           : ''}
-
-        <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">
-          {t('buttons.wiki')}
-        </a>
+        {wikiButton}
       </HovercardContent>
     </Hovercard>
   )