Add user account page

apps/builder/components/account/BillingSection.tsx

@@ -0,0 +1,27 @@
+import { Stack, Heading, HStack, Button, Text } from '@chakra-ui/react'
+import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
+import { useUser } from 'contexts/UserContext'
+import React from 'react'
+import { SubscriptionTag } from './SubscriptionTag'
+
+export const BillingSection = () => {
+  const { user } = useUser()
+  return (
+    <Stack direction="row" spacing="10" justifyContent={'space-between'}>
+      <Heading as="h2" fontSize="xl">
+        Billing
+      </Heading>
+      <Stack spacing="6" w="400px">
+        <HStack>
+          <Text>Your subscription</Text>
+          <SubscriptionTag plan={user?.plan} />
+        </HStack>
+        {user?.stripeId && (
+          <Button as={NextChakraLink} href="test">
+            Billing portal
+          </Button>
+        )}
+      </Stack>
+    </Stack>
+  )
+}