69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { getNameChar } from '@/helper';
|
|
import useLocaleStore from '@/stores/localeStore';
|
|
import { CharacterBasic } from '@/types';
|
|
import ParseText from '../parseText';
|
|
import Image from 'next/image';
|
|
|
|
interface CharacterCardProps {
|
|
data: CharacterBasic
|
|
}
|
|
|
|
export default function CharacterCard({ data }: CharacterCardProps) {
|
|
const { locale } = useLocaleStore();
|
|
const text = getNameChar(locale, data)
|
|
return (
|
|
<li
|
|
className="z-10 flex flex-col items-center rounded-xl shadow-xl
|
|
bg-linear-to-br from-base-300 via-base-100 to-warning/70
|
|
transform transition-transform duration-300 ease-in-out
|
|
hover:scale-105 cursor-pointer min-h-[170px] sm:min-h-[180px] md:min-h-[210px] lg:min-h-[220px] xl:min-h-[240px] 2xl:min-h-[340px]"
|
|
>
|
|
<div
|
|
className={`w-full rounded-md bg-linear-to-br ${data.rank === "CombatPowerAvatarRarityType5"
|
|
? "from-yellow-400 via-yellow-600/70 to-yellow-800/50"
|
|
: "from-purple-400 via-purple-600/70 to-purple-800/50"
|
|
}`}
|
|
>
|
|
|
|
<div className="relative w-full h-full">
|
|
<Image
|
|
width={376}
|
|
height={512}
|
|
src={`https://api.hakush.in/hsr/UI/avatarshopicon/${data.id}.webp`}
|
|
priority={true}
|
|
className="w-full h-full rounded-md object-cover"
|
|
alt="ALT"
|
|
/>
|
|
<Image
|
|
width={32}
|
|
height={32}
|
|
|
|
src={`/icon/${data.damageType.toLowerCase()}.webp`}
|
|
className="absolute top-0 left-0 w-6 h-6 rounded-full"
|
|
alt={data.damageType.toLowerCase()}
|
|
/>
|
|
<Image
|
|
width={32}
|
|
height={32}
|
|
src={`/icon/${data.baseType.toLowerCase()}.webp`}
|
|
className="absolute top-0 right-0 w-6 h-6 rounded-full"
|
|
alt={data.baseType.toLowerCase()}
|
|
style={{
|
|
boxShadow: "inset 0 0 8px 4px #9CA3AF"
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<ParseText
|
|
locale={locale}
|
|
text={text}
|
|
className="mt-2 px-1 text-center text-shadow-white font-bold leading-tight text-sm sm:text-base 2xl:text-lg"
|
|
/>
|
|
</li>
|
|
|
|
);
|
|
}
|