67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { getNameChar } from '@/helper';
|
|
import useLocaleStore from '@/stores/localeStore';
|
|
import { AvatarType } from '@/types';
|
|
|
|
interface CharacterCardProps {
|
|
data: AvatarType
|
|
}
|
|
|
|
export function parseRuby(text: string): string {
|
|
return text.replace(/\{RUBY_B#(.*?)\}(.*?)\{RUBY_E#\}/g, (_, furigana, kanji) => {
|
|
return `<ruby>${kanji}<rt>${furigana}</rt></ruby>`;
|
|
});
|
|
}
|
|
|
|
|
|
export default function CharacterCard({ data }: CharacterCardProps) {
|
|
const { locale } = useLocaleStore();
|
|
const text = getNameChar(locale, data)
|
|
return (
|
|
<li className="z-10 flex flex-col w-28 items-center p-1 rounded-md shadow-lg bg-gradient-to-b from-customStart to-customEnd transform transition-transform duration-300 hover:scale-105 m-1">
|
|
<div
|
|
className={`w-[80px] rounded-md p-[2px] bg-gradient-to-br ${
|
|
data.rank === "CombatPowerAvatarRarityType5"
|
|
? "from-yellow-400 via-yellow-300 to-yellow-500"
|
|
: "from-purple-300 via-purple-200 to-purple-400"
|
|
}`}
|
|
>
|
|
|
|
<div className="relative w-full h-full">
|
|
<img
|
|
loading="lazy"
|
|
src={`https://api.hakush.in/hsr/UI/avatarshopicon/${data.id}.webp`}
|
|
className="w-full h-full rounded-md object-cover"
|
|
alt="ALT"
|
|
/>
|
|
<img
|
|
loading='lazy'
|
|
src={`https://api.hakush.in/hsr/UI/element/${data.damageType.toLowerCase()}.webp`}
|
|
className="absolute top-0 left-0 w-6 h-6"
|
|
alt={data.damageType.toLowerCase()}
|
|
/>
|
|
<img
|
|
loading='lazy'
|
|
src={`https://api.hakush.in/hsr/UI/pathicon/${data.baseType.toLowerCase()}.webp`}
|
|
className="absolute top-0 right-0 w-6 h-6"
|
|
alt={data.baseType.toLowerCase()}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{locale === "jp" ? (
|
|
<div
|
|
className="mt-2 text-center text-base font-normal leading-tight"
|
|
dangerouslySetInnerHTML={{ __html: parseRuby(text) }}
|
|
/>
|
|
) : (
|
|
<div className="mt-2 text-center text-base font-normal leading-tight">
|
|
{text}
|
|
</div>
|
|
)}
|
|
</li>
|
|
|
|
);
|
|
}
|