AI Card

yarn add @activecampaign/camp-components-ai

import { AiCard } from '@activecampaign/camp-components-ai'

<AiCard
  styles={{
    maxWidth: '512px'
  }}
>
  <[object Object]
    alignItems="start"
    justifyContent="space-between"
  >
    <AiHeading
      appearance="small"
      mb="sp300"
      styles={{
        display: 'block'
      }}
    >
      This is a title
    </AiHeading>
    <MockMenu />
  </[object Object]>
  <[object Object]>
    We initiated contact with Camping Supply Chicago for our CRM solution. Joshua Camp showed interest after our outreach on May 1, 2024. We had a successful sales call on May 7, 2024, and then scheduled a demo for May 10, 2024. The deal remains active with a 83% probability of closing.
  </[object Object]>
</AiCard>

<>
  <AiCard
    styles={{
      maxWidth: '512px'
    }}
  >
    <AiHeading
      appearance="small"
      mb="sp300"
      styles={{
        display: 'block'
      }}
    >
      What is this email about?
    </AiHeading>
    <[object Object]
      dangerouslySetStyles={{
        '& > div': {
          width: '100%'
        },
        display: 'block',
        width: '100%'
      }}
      onChange={function noRefCheck(){}}
      placeholder="Describe what you want in this email"
    />
    <[object Object]
      alignItems="center"
      justifyContent="space-between"
      mt="sp400"
    >
      <DropdownRoot
        appearance="floating"
        minMenuWidth="200px"
        onSelect={function noRefCheck(){}}
        optionToString={function noRefCheck(){}}
        options={[
          'Warm and friendly',
          'Informative and candid',
          'Joyful and humorous'
        ]}
        placeholder="Select tone"
      />
      <AiButton
        appearance="fill"
        disabled
        onClick={function noRefCheck(){}}
      >
        Generate with AI
      </AiButton>
    </[object Object]>
  </AiCard>
</>