import { Card } from '@apideck/components'

export default function CardBasic() {
  return (
    <Card
      title="Simple card"
      description="This is a simple card without any options passed. The card is as width as the container it is in, so to reduce the width you should style the container or pass a style or className prop to overwrite styles."
    />
  )
}

import { Card } from '@apideck/components'

export default function CardBasic() {
  return (
    <div className="max-w-xs">
      <Card
        title="Integration settings"
        tag="Live"
        description="A sample project for managing integration settings with the Vault API."
        image="https://developers.apideck.com/samples/integration-settings.png"
      />
    </div>
  )
}

import { Card } from '@apideck/components'

const icons = [
  'https://res.cloudinary.com/apideck/image/upload/v1529455970/catalog/activecampaign/icon128x128.png',
  'https://res.cloudinary.com/apideck/image/upload/v1529456047/catalog/salesforce/icon128x128.png',
  'https://res.cloudinary.com/apideck/image/upload/v1536884849/catalog/teamleader/icon128x128.jpg',
  'https://res.cloudinary.com/apideck/image/upload/v1531305954/catalog/salesflare/icon128x128.png',
  'https://res.cloudinary.com/apideck/image/upload/v1529455982/catalog/hubspot/icon128x128.png',
  'https://res.cloudinary.com/apideck/image/upload/v1551284663/catalog/zendesk-sell/icon128x128.png',
  'https://res.cloudinary.com/apideck/image/upload/v1529455988/catalog/pipedrive/icon128x128.png',
  'https://res.cloudinary.com/apideck/image/upload/v1535538972/catalog/copper/icon128x128.png',
  'https://res.cloudinary.com/apideck/image/upload/v1531304652/catalog/closeio/icon128x128.png',
  'https://res.cloudinary.com/apideck/image/upload/v1531056034/catalog/microsoft-dynamics/icon128x128.png'
]

export default function CardWithIcons() {
  return (
    <Card
      title="Lead API"
      subTitle="85 connectors"
      description="One single API to push and pull data from multiple connectors."
      icons={icons}
      style={{ maxWidth: 300 }}
    />
  )
}