<commit_before>import React from 'react';
import { Header, Icon } from 'bonde-components';
import { HStack, Stack } from 'bonde-components/chakra';
import {
  ActiveDomainIcon,
  CertifyDomainIcon,
  ConnectDomainIcon,
  InsertDomainIcon,
  PropagateDomainIcon
} from '../Icons';
import { Status, SmallText } from '../Styles';
import { DNSHostedZone } from '../types';

interface Props {
  dnsHostedZone?: DNSHostedZone
  dnsIsActivated?: boolean
}

export const InsertDomain: React.FC<Props> = () => {
  return (
    <HStack spacing={25}>
      <Stack align="center" maxW={165}>
        <InsertDomainIcon />
        <Header.H5>Inserir domínio</Header.H5>
        <SmallText>O primeiro passo é comprar o domínio em um site como GoDaddy ou RegistroBR e inserir aqui no BONDE.</SmallText>
        <Status
          activeStatus='done'
          value='done'
          labels={{ 'done': 'Concluído' }}
        />
      </Stack>

      <Icon name='ArrowRight' size='small' />
    </HStack>
  );
}

export const ConnectDomain: React.FC<Props> = ({ dnsHostedZone }) => {
  return (
    <HStack spacing={25}>
      <Stack align="center" maxW={185}>
        <ConnectDomainIcon />
        <Header.H5>Conectar ao BONDE</Header.H5>
        <SmallText>Para conseguir usar seu endereço no BONDE, copie os registros abaixo e cole no site onde comprou seu domínio. <a href="http://www.faq.bonde.org/#block-7283" title='FAQ Dominios' target="_blank" rel="noopener noreferrer">Clique aqui</a> para ver o passo a passo.</SmallText>
        <Status
          isActived={() => !!(dnsHostedZone?.status !== 'created' || dnsHostedZone.ns_ok)}
          labels={{ active: 'Concluído', disabled: 'Aguardando ação' }}
        />
      </Stack>

      <Icon name='ArrowRight' size='small' />
    </HStack>

  )
}

export const PropagateDomain: React.FC<Props> = ({ dnsHostedZone }) => {
  return (
    <HStack spacing={25}>
      <Stack align="center" maxW={165}>
        <PropagateDomainIcon />
        <Header.H5>Propagar Domínio</Header.H5>
        <SmallText>O provedor onde você comprou seu domínio faz a propagação. Esse processo pode levar até <strong>48h</strong>.</SmallText>
        <Status
          isActived={() => dnsHostedZone?.status === 'propagated'}
          labels={{ active: 'Concluído', disabled: 'Conferir DNS' }}
        />
      </Stack>

      <Icon name='ArrowRight' size='small' />
    </HStack>

  )
}

export const CertifyDomain = (dnsHostedZone) => {
  return (
    <HStack spacing={25}>
      <Stack direction="column" align="center" spacing={2} maxW={165}>
        <CertifyDomainIcon />
        <Header.H5>Certificar Domínio</Header.H5>
        <SmallText>Quando o domínio for propagado, o BONDE gera <strong>automaticamente </strong>um certificado de segurança. Isso leva poucos minutos.</SmallText>
        <Status
          isActived={() => dnsHostedZone.certificates?.length > 0}
          labels={{ active: 'Concluído', disabled: 'Em andamento' }}
        />
      </Stack>

      <Icon name='ArrowRight' size='small' />
    </HStack>
  )
}

export const ActiveDomain = (dnsHostedZone) => {
  return (
    <HStack spacing={25}>
      <Stack direction="column" align="center" spacing={2} maxW={165}>
        <ActiveDomainIcon />
        <Header.H5>Domínio Ativo</Header.H5>
        <SmallText>
          Pronto! Seu domínio está  ativo e disponível para utilizar nas páginas da sua comunidade no BONDE. <a href={`https://app.bonde.org`}>Clique aqui</a> para ver suas páginas.
        </SmallText>
        <Status
          isActived={() => dnsHostedZone.certificates?.is_active}
          labels={{ active: 'Concluído', disabled: 'Em andamento' }}
        />
      </Stack>
      <Icon name='ArrowRight' size='small' />
    </HStack>

  )
}<commit_msg>fix: remove arrow from last step<commit_after>import React from 'react';
import { Header, Icon } from 'bonde-components';
import { HStack, Stack } from 'bonde-components/chakra';
import {
  ActiveDomainIcon,
  CertifyDomainIcon,
  ConnectDomainIcon,
  InsertDomainIcon,
  PropagateDomainIcon
} from '../Icons';
import { Status, SmallText } from '../Styles';
import { DNSHostedZone } from '../types';

interface Props {
  dnsHostedZone?: DNSHostedZone
  dnsIsActivated?: boolean
}

export const InsertDomain: React.FC<Props> = () => {
  return (
    <HStack spacing={25}>
      <Stack align="center" maxW={165}>
        <InsertDomainIcon />
        <Header.H5>Inserir domínio</Header.H5>
        <SmallText>O primeiro passo é comprar o domínio em um site como GoDaddy ou RegistroBR e inserir aqui no BONDE.</SmallText>
        <Status
          activeStatus='done'
          value='done'
          labels={{ 'done': 'Concluído' }}
        />
      </Stack>

      <Icon name='ArrowRight' size='small' />
    </HStack>
  );
}

export const ConnectDomain: React.FC<Props> = ({ dnsHostedZone }) => {
  return (
    <HStack spacing={25}>
      <Stack align="center" maxW={185}>
        <ConnectDomainIcon />
        <Header.H5>Conectar ao BONDE</Header.H5>
        <SmallText>Para conseguir usar seu endereço no BONDE, copie os registros abaixo e cole no site onde comprou seu domínio. <a href="http://www.faq.bonde.org/#block-7283" title='FAQ Dominios' target="_blank" rel="noopener noreferrer">Clique aqui</a> para ver o passo a passo.</SmallText>
        <Status
          isActived={() => !!(dnsHostedZone?.status !== 'created' || dnsHostedZone.ns_ok)}
          labels={{ active: 'Concluído', disabled: 'Aguardando ação' }}
        />
      </Stack>

      <Icon name='ArrowRight' size='small' />
    </HStack>

  )
}

export const PropagateDomain: React.FC<Props> = ({ dnsHostedZone }) => {
  return (
    <HStack spacing={25}>
      <Stack align="center" maxW={165}>
        <PropagateDomainIcon />
        <Header.H5>Propagar Domínio</Header.H5>
        <SmallText>O provedor onde você comprou seu domínio faz a propagação. Esse processo pode levar até <strong>48h</strong>.</SmallText>
        <Status
          isActived={() => dnsHostedZone?.status === 'propagated'}
          labels={{ active: 'Concluído', disabled: 'Conferir DNS' }}
        />
      </Stack>

      <Icon name='ArrowRight' size='small' />
    </HStack>

  )
}

export const CertifyDomain = (dnsHostedZone) => {
  return (
    <HStack spacing={25}>
      <Stack direction="column" align="center" spacing={2} maxW={165}>
        <CertifyDomainIcon />
        <Header.H5>Certificar Domínio</Header.H5>
        <SmallText>Quando o domínio for propagado, o BONDE gera <strong>automaticamente </strong>um certificado de segurança. Isso leva poucos minutos.</SmallText>
        <Status
          isActived={() => dnsHostedZone.certificates?.length > 0}
          labels={{ active: 'Concluído', disabled: 'Em andamento' }}
        />
      </Stack>

      <Icon name='ArrowRight' size='small' />
    </HStack>
  )
}

export const ActiveDomain = (dnsHostedZone) => {
  return (
    <HStack spacing={25}>
      <Stack direction="column" align="center" spacing={2} maxW={165}>
        <ActiveDomainIcon />
        <Header.H5>Domínio Ativo</Header.H5>
        <SmallText>
          Pronto! Seu domínio está  ativo e disponível para utilizar nas páginas da sua comunidade no BONDE. <a href={`https://app.bonde.org`}>Clique aqui</a> para ver suas páginas.
        </SmallText>
        <Status
          isActived={() => dnsHostedZone.certificates?.is_active}
          labels={{ active: 'Concluído', disabled: 'Em andamento' }}
        />
      </Stack>
    </HStack>

  )
}
{'fraction_non_alphanumeric': 0.14375250033337778, 'fraction_numerical': 0.011734897986398186, 'mean_word_length': 2.912363067292645, 'pattern_counts': {'":': 0, '<': 134, '<?xml version=': 0, '>': 154, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5940333', 'n_tokens_mistral': 2549, 'n_tokens_neox': 2484, 'n_words': 582}