Viewportとコンポーネント

import {
  Box, Button, Badge, Inline, Banner,
} from '@stripe/ui-extension-sdk/ui';
import type { ExtensionContextValue } from '@stripe/ui-extension-sdk/context';

const CustomerDetailView = ({ environment, userContext }: ExtensionContextValue) => {
  const customerId = environment.objectContext?.id;

  return (
    <Box css={{ padding: 'large' }}>
      <Inline css={{ fontWeight: 'bold', marginBottom: 'medium' }}>
        Brevo連絡先同期
      </Inline>
      <Banner
        title="Brevoに同期済み"
        description="この顧客はBrevoに同期されています。"
        variant="default"
      />
      <Button type="primary" css={{ marginTop: 'medium' }}>
        Brevoに同期
      </Button>
    </Box>
  );
};