image optimizations

src/app/(home)/log-parser/page.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { LuaToJsonConverter } from '@/app/(home)/log-parser/lua-parser'
-import { OptimizedImage } from '@/components/optimized-image'
 import {
   Card,
   CardContent,
@@ -36,6 +35,7 @@ import {
 } from '@/components/ui/tooltip'
 import { jokers } from '@/shared/jokers'
 import { useFormatter } from 'next-intl'
+import Image from 'next/image'
 import { Fragment, useState } from 'react'
 import { type PvpBlind, PvpBlindsCard } from './_components/pvp-blinds'
 // Define the structure for individual log events within a game
@@ -928,7 +928,7 @@ export default function LogParser() {
                                         <div
                                           className={`${event.text.includes('Opponent') ? 'flex justify-end' : ''}`}
                                         >
-                                          <OptimizedImage
+                                          <Image
                                             src={event.img}
                                             alt={event.img}
                                           />
@@ -998,7 +998,7 @@ export default function LogParser() {
                                             'flex flex-col items-center justify-center gap-2'
                                           }
                                         >
-                                          <OptimizedImage
+                                          <Image
                                             src={`/cards/${jokerName}.png`}
                                             alt={cleanName}
                                           />
@@ -1037,7 +1037,7 @@ export default function LogParser() {
                                             'flex flex-col items-center justify-center gap-2'
                                           }
                                         >
-                                          <OptimizedImage
+                                          <Image
                                             src={`/cards/${jokerName}.png`}
                                             alt={cleanName}
                                           />

src/app/(home)/major-league-balatro/_components/player-card.tsx

@@ -1,8 +1,7 @@
 import type { Player } from '@/app/(home)/major-league-balatro/types'
-import { OptimizedImage } from '@/components/optimized-image'
-import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
 import { SiTwitch, SiYoutube } from '@icons-pack/react-simple-icons'
+import Image from 'next/image'
 import Link from 'next/link'
 
 export type PlayerCardProps = {
@@ -16,7 +15,7 @@ export function PlayerCard(player: PlayerCardProps) {
     <Card className='overflow-hidden py-0'>
       <div className='relative aspect-square bg-muted'>
         <div className='absolute inset-0 flex items-center justify-center'>
-          <OptimizedImage
+          <Image
             src={player.picture}
             alt={player.name}
             className={'h-full w-full object-cover'}

src/app/(home)/page.tsx

@@ -1,5 +1,4 @@
 import { GithubLinks } from '@/app/_components/github-links'
-import { OptimizedImage } from '@/components/optimized-image'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
@@ -45,7 +44,7 @@ export default function Home() {
               </Button>
             </div>
             <div className='mt-8 w-full max-w-5xl rounded-lg border bg-card p-4 shadow-xl'>
-              <OptimizedImage
+              <Image
                 src='/multiplayer-screenshot.jpeg'
                 width={1200}
                 height={600}
@@ -339,7 +338,7 @@ export default function Home() {
                 </div>
               </div>
               <div className='flex items-center justify-center'>
-                <OptimizedImage
+                <Image
                   src='/multiplayer-screenshot.jpeg'
                   width={500}
                   height={500}

src/app/_components/joker-card.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { OptimizedImage } from '@/components/optimized-image'
+import Image from 'next/image'
 import type { ElementType } from 'react'
 import slugify from 'slugify'
 
@@ -17,7 +17,7 @@ export function JokerCard({ name, img, h = 3 }: JokerCardProps) {
       className={'flex scroll-mt-36 flex-col items-center gap-2'}
       id={`${slugify(name, { lower: true, strict: true })}-toc`}
     >
-      <OptimizedImage
+      <Image
         src={img}
         height={190}
         width={142}

src/components/optimized-image.tsx

@@ -1,8 +0,0 @@
-'use client'
-
-import Image from 'next/image'
-import type { ComponentPropsWithoutRef } from 'react'
-
-export function OptimizedImage(props: ComponentPropsWithoutRef<typeof Image>) {
-  return <Image {...props} />
-}