From a72e3016ade042bd78abea8d71cdb1547a440e52 Mon Sep 17 00:00:00 2001
From: Andres <andres99.dev@gmail.com>
Date: Sun, 15 Jun 2025 11:42:46 +0200
Subject: [PATCH] image optimizations

---
 src/app/(home)/log-parser/page.tsx                        | 8 ++++----
 .../major-league-balatro/_components/player-card.tsx      | 5 ++---
 src/app/(home)/page.tsx                                   | 5 ++---
 src/app/_components/joker-card.tsx                        | 4 ++--
 src/components/optimized-image.tsx                        | 8 --------
 5 files changed, 10 insertions(+), 20 deletions(-)
 delete mode 100644 src/components/optimized-image.tsx

diff --git a/src/app/(home)/log-parser/page.tsx b/src/app/(home)/log-parser/page.tsx
index 2c07741..340fb55 100644
--- a/src/app/(home)/log-parser/page.tsx
+++ b/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}
                                           />
diff --git a/src/app/(home)/major-league-balatro/_components/player-card.tsx b/src/app/(home)/major-league-balatro/_components/player-card.tsx
index b45dbdf..a87ee89 100644
--- a/src/app/(home)/major-league-balatro/_components/player-card.tsx
+++ b/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'}
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index d1c90f1..1c1db22 100644
--- a/src/app/(home)/page.tsx
+++ b/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}
diff --git a/src/app/_components/joker-card.tsx b/src/app/_components/joker-card.tsx
index cb2d1ae..b5028f7 100644
--- a/src/app/_components/joker-card.tsx
+++ b/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}
diff --git a/src/components/optimized-image.tsx b/src/components/optimized-image.tsx
deleted file mode 100644
index d63387e..0000000
--- a/src/components/optimized-image.tsx
+++ /dev/null
@@ -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} />
-}