init

src/components/card/characterCard.tsx

@@ -0,0 +1,66 @@
+"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>
+
+  );
+}