feat: list credit card according to design

components/Profile/AddCreditCardButton/index.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { trpc } from "@/lib/trpc/client"
+
+import { PlusCircleIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+
+export default function AddCreditCardButton() {
+  const { formatMessage } = useIntl()
+
+  async function handleAddCreditCard() {
+    // TODO: initiate add credit card flow and redirect user to planet:
+    // const { url } = trpc.user.creditCard.add.useMutation()
+    // router.redirect(url)
+    console.log("Credit card added!")
+  }
+  return (
+    <Button
+      variant="icon"
+      theme="base"
+      intent="text"
+      onClick={handleAddCreditCard}
+      wrapping
+    >
+      <PlusCircleIcon color="burgundy" />
+      {formatMessage({ id: "Add new card" })}
+    </Button>
+  )
+}