Preview

Preview

Description: A preview is used to entice the user to learn more about a topic or project. It contains a video that plays automatically, a placeholder image when the video is not playing, and corresponding text about the preview.

Import

import Preview from 'src/components/Preview.jsx';

Examples

() => {
  <Preview>
    <Preview.Video placeholder={'/museum.png'} media={'/museum.mp4'}></Preview.Video>
    <Preview.Content background='#222'>
      Explore the origins of the avant-garde.
    </Preview.Content>
  </Preview>
}

Props

Preview

Name	Default	Type	Description
color	'dark'	string	| 'dark' | 'light' | Color scheme.

Preview.Video

Name	Default	Type	Description
placeholder		string	Path to img/png/jpeg.
media		string	Path to mp4.

Preview.Content

Name	Default	Type	Description
background		string	Color for the background.