Create ResultCard component structure

[magnificode]

Trello: https://trello.com/c/g5OZn1z8

The ResultCard has two variations:

ResultCard Default State

The ResultCard default state should output the following data from Airtable:

• Business Image - Does not exist in Airtable currently, read on.
  • Use image if available. If no image available, pull from fallback asset for the business category.
  • This data does not currently exist in the database. Write conditionals to prepare for this, leverage a random unsplash image https://source.unsplash.com/random as a stub for the fallback.
• Business Name
• Business Category
• Business Blurb
  • This data does not currently exist in the database. Write conditionals to prepare for this.
• Business Location
• Business Buttons
  • 1 - 2 buttons
  • Website URL button text dependent on business category
  • Entertainment: Learn more
  • Food and beverage: Order
  • Health and wellness: Learn more
  • Professional services: Contact
  • Retail: Shop
  • If no donate URL, the Website button takes full width.
  • If there is a donate URL provided, second button appears to the right, with button text “Donate”
• Report Link
  • mailto: link, use placeholder email for now.

ResultCard Basic

This variation does not utilize a Business image, but instead leverages a background color.

• Business Name
• Business Location
• Business Blurb
  • This data does not currently exist in the database. Write conditionals to prepare for this.
• Business Button
  • 1 Button
  • Website URL. Button text "Website"
• Report Link
  • mailto: link, use placeholder email for now.

[chaance]

On it

[chaance]

Starting out with a generic, composable set of Card components. You can opt in or out to any of the sub components pretty easily, and override whatever you need on the sub-component itself. Later this evening I'll circle back here and abstract this into a higher-level API for the result card.

function Layout() {
  return (
    <Grid templateColumns="repeat(2, 1fr)" gap={6} ml={10}>
      <CardWrapper>
        <CardImage src="https://picsum.photos/900/900" />
        <CardContent bg="lightgray">
          <CardHeading>Ultrices vehicula cubilia euismod</CardHeading>
          <CardText>
            Urna ad aliquet taciti dapibus rutrum morbi iaculis ut, lacinia sit
            luctus leo posuere montes torquent, mi ligula lacus inceptos
            pharetra vitae augue.
          </CardText>
          <CardButtonGroup>
            <CardButton>Click Me</CardButton>
            <CardButton>Click Me Too</CardButton>
          </CardButtonGroup>
        </CardContent>
      </CardWrapper>
      <CardWrapper>
        <CardContent bg="#424242" color="white">
          <CardHeading>Ultrices vehicula cubilia euismod</CardHeading>
          <CardText>
            Urna ad aliquet taciti dapibus rutrum morbi iaculis ut, lacinia sit
            luctus leo posuere montes torquent, mi ligula lacus inceptos
            pharetra vitae augue.
          </CardText>
          <CardButtonGroup>
            <CardButton>Click Me</CardButton>
            <CardButton>Click Me Too</CardButton>
          </CardButtonGroup>
          <Text as="p" fontSize="sm" fontStyle="italic" mt={3}>
            Velit gravida est senectus mollis nunc adipiscing nulla magna nec
          </Text>
        </CardContent>
      </CardWrapper>
    </Grid>
  );
}