feat: add credit cards endpoint

components/MyProfile/CreditCards/index.tsx

@@ -1,14 +1,34 @@
+import { serverClient } from "@/lib/trpc/server"
+
 import Card from "@/components/MyProfile/Card"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
 import styles from "./creditCards.module.css"
 
 export default async function CreditCards() {
+  const creditCards = await serverClient().user.creditCards()
+  if (!creditCards) {
+    return null
+  }
   const { formatMessage } = await getIntl()
   return (
     <Card className={styles.container}>
       <Title level="h4">{formatMessage({ id: "My credit cards" })}</Title>
+      {creditCards.map((card, idx) => (
+        <div className={styles.card} key={idx}>
+          <Subtitle className={styles.subTitle}>
+            Name: {card.attribute.cardName}
+          </Subtitle>
+          <span> Type: {card.attribute.cardType} </span>
+          <span> Alias: {card.attribute.alias}</span>
+          <span> Number: {card.attribute.truncatedNumber}</span>
+          <span>
+            Expiration Date: {card.attribute.expirationDate.split("T")[0]}
+          </span>
+        </div>
+      ))}
     </Card>
   )
 }