69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
"use client"
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import "swiper/css";
|
|
import "swiper/css/effect-cards";
|
|
import { EffectCards } from 'swiper/modules';
|
|
import Image from "next/image";
|
|
import { cn } from "@/lib/utils";
|
|
import { useTranslations } from "next-intl";
|
|
const cardLists = [
|
|
{
|
|
bg: "from-[#1EABEC] to-primary ",
|
|
cardNo: "**** **** **** 3945",
|
|
balance: "10,975"
|
|
},
|
|
{
|
|
bg: "from-[#4C33F7] to-[#801FE0] ",
|
|
cardNo: "**** **** **** 3945",
|
|
balance: "12,975"
|
|
},
|
|
{
|
|
bg: "from-[#FF9838] to-[#008773]",
|
|
cardNo: "**** **** **** 3945",
|
|
balance: "14,985"
|
|
}
|
|
];
|
|
const CardSlider = () => {
|
|
const t = useTranslations("BankingDashboard");
|
|
return (
|
|
<Swiper effect={"cards"} grabCursor={true} modules={[EffectCards]}>
|
|
{cardLists.map((item, i) => (
|
|
<SwiperSlide key={i}>
|
|
<div
|
|
className={cn(
|
|
"h-[200px] bg-gradient-to-r relative rounded-md p-4 text-white ",
|
|
item.bg
|
|
)}
|
|
>
|
|
<Image
|
|
src="/images/all-img/visa-card-bg.png"
|
|
alt=""
|
|
fill
|
|
sizes="(100vw, 100vh)"
|
|
priority
|
|
/>
|
|
<div className="relative ">
|
|
<Image
|
|
src="/images/logo/visa.svg"
|
|
height={48}
|
|
width={90}
|
|
className="w-20 h-10"
|
|
alt=""
|
|
/>
|
|
<div className="mt-[18px] font-semibold text-lg mb-[17px]">
|
|
{item.cardNo}
|
|
</div>
|
|
<div className="text-xs text-opacity-75 mb-0.5">
|
|
{t("current_balance")}
|
|
</div>
|
|
<div className="text-2xl font-semibold">${item.balance}</div>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
);
|
|
};
|
|
|
|
export default CardSlider;
|