85 lines
2.4 KiB
TypeScript
85 lines
2.4 KiB
TypeScript
import {
|
|
LucideChevronRightCircle,
|
|
LucideSend,
|
|
LucideUploadCloud,
|
|
LucideCreditCard,
|
|
} from "lucide-react-native";
|
|
import React from "react";
|
|
import { View, Text, Image } from "react-native";
|
|
import { Button } from "~/components/ui/button";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
interface AccountCardProps {
|
|
cardType?: string;
|
|
cardNumber?: string;
|
|
expiryDate?: string;
|
|
onPress?: () => void;
|
|
selected?: boolean;
|
|
}
|
|
|
|
export default function AccountCard({
|
|
cardType,
|
|
cardNumber,
|
|
expiryDate,
|
|
onPress,
|
|
selected = false,
|
|
}: AccountCardProps) {
|
|
const { t } = useTranslation();
|
|
|
|
const resolvedCardType = cardType || t("components.acccard.cardTypeFallback");
|
|
const resolvedCardNumber =
|
|
cardNumber || t("components.acccard.cardNumberPlaceholder");
|
|
const resolvedExpiryDate =
|
|
expiryDate || t("components.acccard.expiryPlaceholder");
|
|
|
|
const getCardColor = (type: string) => {
|
|
switch (type?.toLowerCase()) {
|
|
case "visa":
|
|
return "bg-blue-50";
|
|
case "mastercard":
|
|
return "bg-red-50";
|
|
case "american express":
|
|
return "bg-green-50";
|
|
case "discover":
|
|
return "bg-orange-50";
|
|
default:
|
|
return "bg-gray-50";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View
|
|
className={`flex flex-row w-full justify-between items-center py-4 ${getCardColor(
|
|
resolvedCardType
|
|
)} rounded-md px-3 ${
|
|
selected ? "border-2 border-primary" : "border border-gray-200"
|
|
}`}
|
|
>
|
|
<View className="flex flex-row space-x-2 items-center">
|
|
<View className="bg-secondary p-2 rounded">
|
|
<LucideCreditCard className="text-white rounded" size={20} />
|
|
</View>
|
|
<View className="w-4" />
|
|
<View className="flex space-y-1">
|
|
<Text className="font-dmsans text-primary">{resolvedCardType}</Text>
|
|
<Text className="font-dmsans-medium text-secondary text-sm">
|
|
{resolvedCardNumber}
|
|
</Text>
|
|
<Text className="font-dmsans-medium text-gray-500 text-xs">
|
|
{t("components.acccard.expiryLabel", { date: resolvedExpiryDate })}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View className="flex space-y-1 pl-6">
|
|
<Button
|
|
className={`${getCardColor(resolvedCardType)} rounded-md`}
|
|
onPress={onPress}
|
|
>
|
|
<LucideChevronRightCircle className="text-secondary text-base" />
|
|
</Button>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|