image optimizations

This commit is contained in:
2025-06-15 11:42:46 +02:00
parent 82b9d252aa
commit a72e3016ad
5 changed files with 10 additions and 20 deletions

View File

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

View File

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

View File

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

View File

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

View File

@@ -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} />
}