Bricks

Bricks are the barebones of our components.

Author

Props:

• author: String.

export default function Author({ author }) {
  return (
    <div className={styles.author}>
      <YOUR_LOGO_ICON />
      <p>{author}</p>
    </div>
  );
}

Button

Props:

• slug: String.
• name: String.
• mode: String.

Imports:

• Link from gatsby.

export default function Button(props) {
  const { slug, name, mode } = props;
  return (
    <div
      className={cx(
        styles.button,
        mode === 'primary' && styles.primary,
        mode === 'secondary' && styles.secondary,
      )}
    >
      <Link to={slug}>{name}</Link>
      {mode === 'secondary' && <ArrowRightICO />}
    </div>
  );
}

Cards

Props:

• title: String.
• articleAuthor: String.
• slug: String.
• image: Object.
• alt: String.
• categories: Array || Bool.

Imports:

• Link from gatsby.
• Heading from Bricks.
• Author from Bricks.
• Category from Bricks.
• Image from Bricks.

export default function Card(props) {
  const {
    title,
    articleAuthor,
    slug,
    image,
    categories,
    alt,
  } = props;

  return (
    <div className={styles.card}>
      <Link to={`/blog/${slug}`} aria-label={`Go to ${title}`}>
        <div className={styles.cardContent}>
          <Heading className={styles.heading} level="3">
            {title}
          </Heading>
          <Author author={articleAuthor} />
        </div>
        <div className={styles.cardImage}>
          <Image image={image} alt={alt} />
        </div>
      </Link>
      <Category categories={categories} />
    </div>
  );
}

Category

Props: categories: Array || Bool

Imports:

• Link from gatsby.

export default function Category({ categories }) {
  return (
    <ul className={styles.categories}>
      {Array.isArray(categories)
        && categories.map((cat, index) => (
          <li key={index}>
            <Link to={`/category/${cat.slug}`} aria-label={`Go to ${cat.title} Category`}>{cat.title}</Link>
          </li>
        ))}
    </ul>
  );
}

## Content
Props:
content: Object.

Imports:
- StructuredTex from React DatoCMS;

export default function Content({ content }) {
  return (
    <div className={styles.paragraph}>
      <StructuredText data={content} />
    </div>
  );
}