fix: images

NieR-Rein-Guide · Apr 1, 2024 · d78a6aa · d78a6aa
1 parent 0243705
commit d78a6aa
Show file tree

Hide file tree

Showing 46 changed files with 97 additions and 97 deletions.
diff --git a/src/components/CharacterInfo.tsx b/src/components/CharacterInfo.tsx
@@ -259,7 +259,7 @@ function CostumeDetails({
                   <Element size={32} type={costume.attribute} />
                 </Tooltip>
                 <div className="w-8">
-                  <Image
+                  <img
                     layout="responsive"
                     src={weaponsIcons[costume.weapon_type]}
                     alt={costume.weapon_type}
@@ -459,7 +459,7 @@ function CostumeDetails({
                     "opacity-0 pointer-events-none": isShowingModel,
                   })}
                 >
-                  <Image
+                  <img
                     key={`${CDN_URL}${costume.image_path_base}full${
                       isReplaced ? "_replace" : ""
                     }.png`}
@@ -535,7 +535,7 @@ function CostumeDetails({
                   title="Switch costume artwork"
                   onClick={() => setIsReplaced(!isReplaced)}
                 >
-                  <Image
+                  <img
                     objectFit="contain"
                     src={switchImg}
                     alt="Switch costume design"
@@ -923,7 +923,7 @@ function SingleStat({ name, value, type, icon }): JSX.Element {
   return (
     <div className="flex items-center justify-between pl-4 pr-8">
       <div className="flex items-center gap text-beige-light">
-        <Image
+        <img
           layout="intrinsic"
           src={icon}
           alt={name}

diff --git a/src/components/CompanionThumbnail.tsx b/src/components/CompanionThumbnail.tsx
@@ -56,7 +56,7 @@ export default function CompanionThumbnail({
         }}
       >
         {companion?.name && (
-          <Image
+          <img
             className="z-10"
             layout="fill"
             src={`/decorations/corners_rarity_2.png`}

diff --git a/src/components/CostumeArtwork.tsx b/src/components/CostumeArtwork.tsx
@@ -40,7 +40,7 @@ export default function CostumeArtwork({
               path={getModelPath("character", "costume.costume_id")}
             />
           )) || (
-            <Image
+            <img
               layout="fill"
               objectFit="cover"
               src={`${CDN_URL}${costume.image_path_base}full.png`}

diff --git a/src/components/CostumePanel.tsx b/src/components/CostumePanel.tsx
@@ -120,7 +120,7 @@ export function CostumePanel({ costumeId }) {
             <div className="flex flex-col gap-x-2 ml-2">
               <span className="inline-flex items-center gap-x-2">
                 <span className="inline-block w-8">
-                  <Image
+                  <img
                     layout="responsive"
                     src={weaponsIcons[costume.weapon_type]}
                     alt={costume.weapon_type}
@@ -157,7 +157,7 @@ export function CostumePanel({ costumeId }) {
               <div className="relative mr-4">
                 <SVG src="/decorations/frame.svg" className="h-16 w-16" />
                 <div className="h-8 w-8 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                  <Image
+                  <img
                     layout="fixed"
                     width={32}
                     height={32}

diff --git a/src/components/CostumeThumbnail.tsx b/src/components/CostumeThumbnail.tsx
@@ -62,7 +62,7 @@ export default function CostumeThumbnail({
       >
         {children}
         <div className="mt-1 ml-1">
-          <Image
+          <img
             className="z-10 pointer-events-none"
             layout="fixed"
             width={148}
@@ -79,7 +79,7 @@ export default function CostumeThumbnail({
           }}
         >
           <div className="flex flex-col w-10">
-            <Image src={weaponsIcons[weaponType]} alt={alt} />
+            <img src={weaponsIcons[weaponType]} alt={alt} />
             {isDark && (
               <SVG src="/icons/weapons/dark.svg" className="h-10 w-10" />
             )}
@@ -109,7 +109,7 @@ export default function CostumeThumbnail({
             height: "336px",
           }}
         >
-          <Image
+          <img
             layout="fill"
             objectFit="cover"
             objectPosition="top"
@@ -138,7 +138,7 @@ export default function CostumeThumbnail({
       }}
     >
       {src && (
-        <Image
+        <img
           className="z-10"
           layout="fill"
           src={`/decorations/corners_rarity_${costumeRarity}.png`}
@@ -153,7 +153,7 @@ export default function CostumeThumbnail({
             left: "1px",
           }}
         >
-          <Image layout="fill" src={weaponsIcons[weaponType]} alt={alt} />
+          <img layout="fill" src={weaponsIcons[weaponType]} alt={alt} />
         </div>
       )}
       {attribute && (
@@ -168,7 +168,7 @@ export default function CostumeThumbnail({
         </div>
       )}
 
-      <Image
+      <img
         className={classNames("z-0", imgClasses)}
         layout="fill"
         objectFit="contain"

diff --git a/src/components/Credits.tsx b/src/components/Credits.tsx
@@ -12,7 +12,7 @@ export default function Credits(): JSX.Element {
 
       <div className="px-8">
         <Lines className="mb-12" containerClass="justify-center mt-10 md:mt-0">
-          <Image src={mamaImg} height={148} width={148} alt="Mama" />
+          <img src={mamaImg} height={148} width={148} alt="Mama" />
         </Lines>
 
         <ul className="grid grid-cols-1 place-items-center sm:grid-cols-2 sm:place-items-start md:grid-cols-3 lg:grid-cols-4 gap-y-6 mt-8 md:mt-0">
@@ -29,7 +29,7 @@ function Contributor({ credit, children }): JSX.Element {
   function Content({ children }: { children?: JSX.Element }) {
     return (
       <li className="flex items-center gap-x-6 hover-bg w-full p-2">
-        <Image
+        <img
           height="64"
           width="64"
           className="h-16"

diff --git a/src/components/CurrentEvents.tsx b/src/components/CurrentEvents.tsx
@@ -20,7 +20,7 @@ export default function CurrentEvents({
         {events.map((event) => (
           <div key={event.title} className="flex flex-col place-items-center">
             <div className="w-full relative">
-              <Image
+              <img
                 layout="responsive"
                 src={
                   event.image.formats.medium?.url ??

diff --git a/src/components/DailyQuests.tsx b/src/components/DailyQuests.tsx
@@ -141,13 +141,13 @@ function DailyRow({ dayOfWeek }: DailyRowProps): JSX.Element {
         <div className="flex flex-wrap col-span-2">
           {gems.map((gem, index) => (
             <div key={index} className="relative h-20 w-20">
-              <Image src={gemToIcon(gem)} alt={`${gem} icon`} title={gem} />
+              <img src={gemToIcon(gem)} alt={`${gem} icon`} title={gem} />
             </div>
           ))}
 
           {enhancementMaterials.map((weapon, index) => (
             <div key={index} className="relative h-20 w-20">
-              <Image
+              <img
                 src={weaponToIcon(weapon)}
                 alt={`${weapon} icon`}
                 title={weapon}
@@ -165,7 +165,7 @@ function DailyRow({ dayOfWeek }: DailyRowProps): JSX.Element {
         <div className="flex flex-wrap col-span-2">
           {weaponUpgrades.map((weaponUpgrade, index) => (
             <div key={index} className="relative h-20 w-20">
-              <Image
+              <img
                 src={weaponToIcon(weaponUpgrade)}
                 alt={`${weaponUpgrade} icon`}
                 title={weaponUpgrade}

diff --git a/src/components/DebrisThumbnail.tsx b/src/components/DebrisThumbnail.tsx
@@ -43,15 +43,15 @@ export default function DebrisThumbnail({
       }}
     >
       {image_path_base && (
-        <Image
+        <img
           className="z-10"
           layout="fill"
           src={`/decorations/corners_rarity_${debrisRarity}.png`}
           alt={name}
         />
       )}
 
-      <Image
+      <img
         layout="fill"
         className={classNames("z-0", imgClasses)}
         src={

diff --git a/src/components/Element.tsx b/src/components/Element.tsx
@@ -20,7 +20,7 @@ export default function Element({
   const attribute = type && type.toLowerCase();
 
   return (
-    <Image
+    <img
       src={`/elements/${attribute}.png`}
       height={size}
       width={size}

diff --git a/src/components/EventsSlider.tsx b/src/components/EventsSlider.tsx
@@ -60,7 +60,7 @@ export default function EventsSlider({
                       <SVG src="/decorations/inner-square.svg" />
                     </div>
                   </div>
-                  <Image
+                  <img
                     layout="responsive"
                     objectFit="cover"
                     height={500}
@@ -99,7 +99,7 @@ export default function EventsSlider({
                       <SVG src="/decorations/inner-square.svg" />
                     </div>
                   </div>
-                  <Image
+                  <img
                     layout="responsive"
                     objectFit="cover"
                     height={500}
@@ -116,9 +116,9 @@ export default function EventsSlider({
               <Link
                 href={`/event/${activeEvent.slug}`}
                 className="btn absolute bottom-6 sm:bottom-5 left-1/2 transform -translate-x-1/2 z-20">
-                
+
                   See Event
-                
+
               </Link>
             </div>
           )}
@@ -162,7 +162,7 @@ export default function EventsSlider({
                   className="slider__other-event">
 
                   <div className="border-2 border-beige-text border-opacity-60 hover:border-beige transition-colors relative select-none h-32">
-                    <Image
+                    <img
                       layout="fill"
                       objectFit="cover"
                       height={128}

diff --git a/src/components/Gauge.tsx b/src/components/Gauge.tsx
@@ -44,7 +44,7 @@ export function Gauge({ cooldown_time, gauge_rise_speed }: GaugeProps) {
             Max asc: {getGaugeLevel(cooldown_time * 0.8)} ({cooldown_time * 0.8}
             )
             <div className="absolute top-1/2 right-2 transform -translate-y-1/2">
-              <Image
+              <img
                 className={classNames(
                   "transform transition-transform ease-out-cubic"
                 )}

diff --git a/src/components/GuerillaTimers.tsx b/src/components/GuerillaTimers.tsx
@@ -84,7 +84,7 @@ const guerillaTypes = (dayOfWeek: number, startHour: number): string[] => {
         {guerillaTypes(endDate.getDay(), guerilla.start[1]).map(
           (weapon, index) => (
             <div key={index} className="w-16 h-16 relative">
-              <Image
+              <img
                 key={index}
                 src={weaponToIcon(weapon)}
                 alt={`${weapon} icon`}

diff --git a/src/components/JoinUs.tsx b/src/components/JoinUs.tsx
@@ -21,7 +21,7 @@ function JoinUs(): JSX.Element {
         </div>
       </div>
       <div className="pointer-events-none">
-        <Image
+        <img
           className="opacity-10 filter blur-sm"
           layout="fill"
           objectFit="cover"

diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
@@ -91,7 +91,7 @@ export default function Header(): JSX.Element {
                       )}
                     >
                       <div className="h-16 w-16 md:h-20 md:w-20 lg:h-24 lg:w-24 xl:h-16 xl:w-16">
-                        <Image
+                        <img
                           height={94}
                           width={94}
                           placeholder="blur"
@@ -135,7 +135,7 @@ export default function Header(): JSX.Element {
                   : "text-beige"
               )}
             >
-              <Image
+              <img
                 className={classNames(
                   "transition ease-out-cubic group-hover:opacity-100",
                   router.asPath === item.href ? "opacity-100" : "opacity-50"
@@ -166,7 +166,7 @@ export default function Header(): JSX.Element {
                 : "text-beige"
             )}
           >
-            <Image
+            <img
               className={classNames(
                 "transition ease-out-cubic group-hover:opacity-100",
                 router.asPath === item.href ? "opacity-100" : "opacity-50"

diff --git a/src/components/MemoirThumbnail.tsx b/src/components/MemoirThumbnail.tsx
@@ -32,7 +32,7 @@ export default function MemoirThumbnail({
       }}
     >
       {image_path_base && (
-        <Image
+        <img
           className="z-10"
           layout="fill"
           src={`/decorations/corners_rarity_${memoirRarity}.png`}

diff --git a/src/components/NewCostumes.tsx b/src/components/NewCostumes.tsx
@@ -48,7 +48,7 @@ export default function NewCostumes({ costumes }) {
                     <div className="flex gap-x-2 flex-1">
                       <div className="flex items-center gap-x-2">
                         <div className="w-8">
-                          <Image
+                          <img
                             layout="responsive"
                             src={weaponsIcons[costume.weapon_type]}
                             alt={costume.weapon_type}
@@ -76,9 +76,9 @@ export default function NewCostumes({ costumes }) {
                     )}`}
                     passHref
                     className="btn absolute z-50 -bottom-2 transform -translate-x-1/2 left-1/2">
-                    
+
                       See costume
-                    
+
                   </Link>
                 </div>
               </SwiperSlide>

diff --git a/src/components/Poll.tsx b/src/components/Poll.tsx
@@ -13,7 +13,7 @@ export default function Poll({ event }: PollProps): JSX.Element {
       </h2>
 
       <div key={event.title} className="flex flex-col relative">
-        <Image
+        <img
           layout="responsive"
           src={event.image.formats.small.url}
           alt={`${event.title} thumbnail`}

diff --git a/src/components/Search.tsx b/src/components/Search.tsx
@@ -39,7 +39,7 @@ export function Search({ isOpen, setIsOpen }) {
             onClick={toggleSearchPanel}
             title="Close"
           >
-            <Image
+            <img
               height={36}
               width={67}
               objectFit="contain"

diff --git a/src/components/Skill.tsx b/src/components/Skill.tsx
@@ -57,7 +57,7 @@ export default function Skill({
             />
           </div>
           <div className="h-16 w-16 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
-            <Image
+            <img
               layout="fixed"
               width={64}
               height={64}
@@ -66,7 +66,7 @@ export default function Skill({
               src={`${CDN_URL}${imagePathBase}`}
             />
             <div className="absolute -top-1 right-1">
-              <Image
+              <img
                 className={classNames(
                   "transform transition-transform ease-out-cubic",
                   isMaxAscended ? "scale-100" : "scale-0"

diff --git a/src/components/StatDisplay.tsx b/src/components/StatDisplay.tsx
@@ -19,7 +19,7 @@ export default function StatDisplay({ type, value }) {
         <div className={classNames("relative mr-4")}>
           <SVG src="/decorations/frame-ability.svg" className="h-12 w-12" />
           <div className="h-16 w-16 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center">
-            <Image alt={type} src={statsIcons[type]} />
+            <img alt={type} src={statsIcons[type]} />
           </div>
         </div>
         <div className="flex flex-col items-start">

diff --git a/src/components/StrapiImage.tsx b/src/components/StrapiImage.tsx
@@ -21,7 +21,7 @@ export default function StrapiImage({
 }): JSX.Element {
   const usedFormat = chooseFormat(formats, expectedWidth);
   return (
-    <Image
+    <img
       quality={100}
       layout={layout}
       src={usedFormat?.url}

diff --git a/src/components/TierlistListingItem.tsx b/src/components/TierlistListingItem.tsx
@@ -48,15 +48,15 @@ export default function TierlistListingItem({
       <div className="flex justify-between mt-4">
         <div className="flex items-center justify-center w-7 h-7 bg-grey-lighter text-beige border border-beige-inactive border-opacity-50 rounded-full">
           {type === "costumes" && (
-            <Image
+            <img
               src={`${CDN_URL}ui/character/character001004/character001004_standard.png`}
               height={24}
               width={24}
               alt="Costumes"
             />
           )}
           {type === "weapons" && (
-            <Image
+            <img
               src={`${CDN_URL}ui/weapon/wp001504/wp001504_standard.png`}
               height={24}
               width={24}