React component that supports multiple types

readme.md

Objective

Build a React component that support rendering different types of content. Depending on the content type, a slightly different layout will be shown.

Content types:

• Website
• Blog
• Project

Expected results:

• Given a contentType, the content field should be of the corresponding type.
• Back link should be shown if backText and backHref are defined
• Title should be name field for content type Project, or title field otherwise
• Other fields should be shown if available and defined.

content.tsx

interface CommonProps {
  backText?: string;
  backHref?: string;
}

interface WebsiteContent {
  contentType: 'website';
  content: Website;
}

interface BlogContent {
  contentType: 'blog';
  content: Blog;
}

interface ProjectContent {
  contentType: 'project';
  content: Project;
}

type ContentProps = CommonProps & (WebsiteContent | BlogContent | ProjectContent);

export const Content = (props: ContentProps) => {
  const { backText, backHref, contentType, content, children } = props;

  return <div>
    {backText && backHref && <a href={backHref}>{backText}</a>}
    <h1>{content.title || content.name}</h1>
    {content.subtitle && <p>{content.subtitle}</p>}
    {content.date && <p>{content.date}</p>}
    {content.excerpt && <p>{content.excerpt}</p>}
    {children}
  </div>
};

types.ts

interface CommonFields {
  slug: string;
}

interface Website extends CommonFields {
  title: string;
  subtitle?: string;
}

interface Blog extends CommonFields {
  title: string;
  excerpt?: string;
  date?: string;
}

interface Project extends CommonFields {
  name: string;
  link?: string;
}