From 0b8201b01fa6215ee59d505860eef0c56cd196c7 Mon Sep 17 00:00:00 2001 From: sk1982 Date: Wed, 10 Apr 2024 03:58:27 -0400 Subject: [PATCH] refactor: use next/image --- .../chuni/dashboard/top-rating.tsx | 4 +- .../(with-header)/chuni/music/music-list.tsx | 5 ++- .../(with-header)/chuni/userbox/userbox.tsx | 7 ++-- src/components/chuni/avatar.tsx | 40 +++++++++++++------ src/components/chuni/nameplate.tsx | 6 ++- src/components/chuni/playlog-card.tsx | 3 +- src/components/chuni/trophy.tsx | 10 +++-- src/components/music-player.tsx | 4 +- 8 files changed, 53 insertions(+), 26 deletions(-) diff --git a/src/app/(with-header)/chuni/dashboard/top-rating.tsx b/src/app/(with-header)/chuni/dashboard/top-rating.tsx index 69889d6..ed4c0f4 100644 --- a/src/app/(with-header)/chuni/dashboard/top-rating.tsx +++ b/src/app/(with-header)/chuni/dashboard/top-rating.tsx @@ -7,6 +7,7 @@ import { ChuniDifficultyContainer } from '@/components/chuni/difficulty-containe import { Tooltip } from '@nextui-org/react'; import { ChuniLevelBadge } from '@/components/chuni/level-badge'; import Link from 'next/link'; +import Image from 'next/image'; export type ChuniTopRatingProps = { className?: string, @@ -18,7 +19,8 @@ export const ChuniTopRating = ({ rating, className }: ChuniTopRatingProps) => { {rating.map((music, i) =>
- {music.title diff --git a/src/app/(with-header)/chuni/music/music-list.tsx b/src/app/(with-header)/chuni/music/music-list.tsx index 2cad06d..65b1793 100644 --- a/src/app/(with-header)/chuni/music/music-list.tsx +++ b/src/app/(with-header)/chuni/music/music-list.tsx @@ -10,6 +10,7 @@ import { ChuniLevelBadge } from '@/components/chuni/level-badge'; import { ChuniScoreBadge, ChuniLampSuccessBadge, getVariantFromRank, ChuniLampComboBadge } from '@/components/chuni/score-badge'; import { ChuniRating } from '@/components/chuni/rating'; import Link from 'next/link'; +import Image from 'next/image'; import { HeartIcon as OutlineHeartIcon, Squares2X2Icon } from '@heroicons/react/24/outline'; import { HeartIcon as SolidHeartIcon } from '@heroicons/react/24/solid'; import { Ticker, TickerHoverProvider } from '@/components/ticker'; @@ -84,7 +85,9 @@ const MusicGrid = ({ music, size, setMusicList, fullMusicList }: ChuniMusicListP onMouseLeave={() => setHover(false)}>
- {item.title + {item.title {item.rating && !item.worldsEndTag &&
diff --git a/src/app/(with-header)/chuni/userbox/userbox.tsx b/src/app/(with-header)/chuni/userbox/userbox.tsx index d90035c..7f81fc4 100644 --- a/src/app/(with-header)/chuni/userbox/userbox.tsx +++ b/src/app/(with-header)/chuni/userbox/userbox.tsx @@ -15,6 +15,7 @@ import { SaveIcon } from '@/components/save-icon'; import { useAudio } from '@/helpers/use-audio'; import { Entries } from 'type-fest'; import { useErrorModal } from '@/components/error-modal'; +import Image from 'next/image'; export type ChuniUserboxProps = { profile: ChuniUserData, @@ -128,7 +129,7 @@ export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => { const renderItem = (item: { name: string | undefined | null }, image: string, textClass='', containerClass='') => (
- {item.name + {item.name
{ item.name }
); @@ -240,7 +241,7 @@ export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => {
- {equipped.systemVoice.name { equipped.systemVoice.name }
@@ -297,7 +298,7 @@ export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => { - {equipped.mapIcon.name { equipped.mapIcon.name }
diff --git a/src/components/chuni/avatar.tsx b/src/components/chuni/avatar.tsx index 30ac6ad..301e19c 100644 --- a/src/components/chuni/avatar.tsx +++ b/src/components/chuni/avatar.tsx @@ -1,4 +1,5 @@ import { getImageUrl } from '@/helpers/assets'; +import Image from 'next/image'; export type ChuniAvatarProps = { wear: string | null, @@ -12,45 +13,58 @@ export type ChuniAvatarProps = { export const ChuniAvatar = ({ wear, head, face, skin, item, back, className }: ChuniAvatarProps) => { return (
- + {head?.includes('CHU_UI_Avatar_Tex_01200001') &&
-
}
- +
- +
-
-
-
-
- - -
-
-
) diff --git a/src/components/chuni/nameplate.tsx b/src/components/chuni/nameplate.tsx index 58199c9..9e0c7ae 100644 --- a/src/components/chuni/nameplate.tsx +++ b/src/components/chuni/nameplate.tsx @@ -4,6 +4,7 @@ import { ChuniTrophy } from '@/components/chuni/trophy'; import { PickNullable } from '@/types/pick-nullable'; import { ChuniRating } from '@/components/chuni/rating'; import { formatJst } from '@/helpers/format-jst'; +import Image from 'next/image'; export const CHUNI_NAMEPLATE_PROFILE_KEYS = [ 'trophyName', 'trophyRareType', 'nameplateImage', 'nameplateName', 'teamName', 'characterId', 'level', @@ -63,12 +64,13 @@ export const ChuniNameplate = ({ className, profile }: ChuniNameplateProps) => {
- Character
- {profile.nameplateName ) diff --git a/src/components/chuni/playlog-card.tsx b/src/components/chuni/playlog-card.tsx index 794debd..d92669a 100644 --- a/src/components/chuni/playlog-card.tsx +++ b/src/components/chuni/playlog-card.tsx @@ -10,6 +10,7 @@ import { ChuniDifficultyContainer } from '@/components/chuni/difficulty-containe import { formatJst } from '@/helpers/format-jst'; import { Ticker, TickerHoverProvider } from '@/components/ticker'; import { Divider } from '@nextui-org/react'; +import Image from 'next/image'; export type ChuniPlaylogCardProps = { playlog: ChuniPlaylog['data'][number], @@ -38,7 +39,7 @@ export const ChuniPlaylogCard = ({ playlog, className, badgeClass, showDetails } - {playlog.title diff --git a/src/components/chuni/trophy.tsx b/src/components/chuni/trophy.tsx index acd1da4..e6d009b 100644 --- a/src/components/chuni/trophy.tsx +++ b/src/components/chuni/trophy.tsx @@ -1,3 +1,4 @@ +import Image from 'next/image'; import { getImageUrl } from '@/helpers/assets'; const TROPHY_TYPES = { @@ -29,10 +30,11 @@ export const ChuniTrophy = ({ name, rarity, className }: ChuniTrophyProps) => {
- {name
) diff --git a/src/components/music-player.tsx b/src/components/music-player.tsx index 5c311c2..0ff600c 100644 --- a/src/components/music-player.tsx +++ b/src/components/music-player.tsx @@ -4,6 +4,7 @@ import { Button, Card, CardBody, Slider } from '@nextui-org/react'; import { PauseCircleIcon, PlayCircleIcon } from '@heroicons/react/24/solid'; import { ReactNode, useEffect, useState } from 'react'; import { useAudio } from '@/helpers/use-audio'; +import Image from 'next/image'; export type MusicPlayerProps = { audio: string, @@ -55,7 +56,8 @@ export const MusicPlayer = ({ audio, image, children, className }: MusicPlayerPr
- + Jacket