init

src/components/card/characterCard.tsx

@@ -0,0 +1,83 @@
+"use client";
+import { getNameChar } from '@/helper';
+import useLocaleStore from '@/stores/localeStore';
+import { AvatarDetail } from '@/types';
+import ParseText from '../parseText';
+import Image from 'next/image';
+import { useTranslations } from 'next-intl';
+import useDetailDataStore from '@/stores/detailDataStore';
+
+interface CharacterCardProps {
+  data: AvatarDetail
+}
+
+export default function CharacterCard({ data }: CharacterCardProps) {
+  const { locale } = useLocaleStore();
+  const transI18n = useTranslations("DataPage");
+  const { baseType, damageType } = useDetailDataStore()
+
+  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-45 sm:min-h-45 md:min-h-52.5 lg:min-h-55 xl:min-h-60 2xl:min-h-65"
+    >
+      <div
+        className={`w-full rounded-md bg-linear-to-br ${data.Rarity === "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-32 lg:h-26 xl:h-36">
+          <Image
+            width={376}
+            height={512}
+            unoptimized
+            crossOrigin="anonymous"
+            src={`${process.env.CDN_URL}/${data.Image.AvatarIconPath}`}
+            priority={true}
+            className="rounded-md w-full h-full object-contain"
+            alt="ALT"
+          />
+          <Image
+            width={32}
+            height={32}
+            unoptimized
+            crossOrigin="anonymous"
+            src={`${process.env.CDN_URL}/${damageType?.[data.DamageType].Icon}`}
+            className="absolute top-0 left-0 w-6 h-6 rounded-full"
+            alt={data.DamageType.toLowerCase()}
+          />
+          <Image
+            width={32}
+            height={32}
+            unoptimized
+            crossOrigin="anonymous"
+            src={`${process.env.CDN_URL}/${baseType?.[data.BaseType].Icon}`}
+            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={getNameChar(locale, transI18n, data)}
+        className="
+          w-full px-0.5
+          my-1
+          text-center font-bold text-shadow-white
+          leading-tight
+          wrap-break-word
+          text-sm sm:text-base 2xl:text-lg
+        "
+      />
+    </li>
+
+  );
+}