consul/website/components/io-video-callout/index.tsx

81 lines
2.3 KiB
TypeScript
Raw Normal View History

Homepage use case redesign (#11728) * init homepage * adds tutorials * update subnav * adds intro background * add offerings * adds in practice cta * include radial gradient * cleanup gradient * Fix learn more button display * include use case pages * connect subnav menu items * extract in practice section for reuse * use Products type * fix type error * add neutral option * rework cta logic * Fix links map * fix use case path * updates accent method * fix button prop usage * refactor customer case study * refactor case studies component * cleanup margin * refactor data props * fix offering cta * spacing updates and introduce intro component * adds intro interface * removes footer border * fix intro description color * add revalidate code to homepage * cleanup unused imports * bump subnav * makes stats optional * adjust border radius based on customer story * redirect /home to homepage * fix: turtorials link * fix: logo alignment * fix: section background color * feat: home reorder and tuts and docs links * fix: flush padding * formatting * feat: sort use cases in nav * fix: card overflow * fix: adjust overflow method * fix: padding on desktop * fix: card container overflow padding on mobile * fix: intro cta conditional * fix: simplify conditional * fix: customer logo sizing * cleanup old data * accept isInternalLink as arg * remove chunk * fix: isInternalLink usage * fix: isInternalLink prop usage * fix: add lang to document * init homepage * adds tutorials * add offerings * cleanup unused imports * bump subnav * fix: flush padding * formatting * fix: intro cta conditional * fix: simplify conditional * cleanup old data * add consul on kubernetes to menu items * add use case redirect * Add use case redirect
2021-12-20 21:42:20 +00:00
import * as React from 'react'
import Image from 'next/image'
import ReactPlayer from 'react-player'
import VisuallyHidden from '@reach/visually-hidden'
import IoDialog from 'components/io-dialog'
import PlayIcon from './play-icon'
import s from './style.module.css'
export interface IoHomeVideoCalloutProps {
youtubeId: string
thumbnail: string
heading: string
description: string
person: {
avatar: string
name: string
description: string
}
}
export default function IoVideoCallout({
youtubeId,
thumbnail,
heading,
description,
person,
}: IoHomeVideoCalloutProps): React.ReactElement {
const [showDialog, setShowDialog] = React.useState(false)
const showVideo = () => setShowDialog(true)
const hideVideo = () => setShowDialog(false)
return (
<>
<figure className={s.videoCallout}>
<button className={s.thumbnail} onClick={showVideo}>
<VisuallyHidden>Play video</VisuallyHidden>
<PlayIcon />
<Image src={thumbnail} layout="fill" objectFit="cover" alt="" />
</button>
<figcaption className={s.content}>
<h3 className={s.heading}>{heading}</h3>
<p className={s.description}>{description}</p>
{person && (
<div className={s.person}>
{person.avatar ? (
<div className={s.personThumbnail}>
<Image
src={person.avatar}
width={52}
height={52}
alt={`${person.name} avatar`}
/>
</div>
) : null}
<div>
<p className={s.personName}>{person.name}</p>
<p className={s.personDescription}>{person.description}</p>
</div>
</div>
)}
</figcaption>
</figure>
<IoDialog
isOpen={showDialog}
onDismiss={hideVideo}
label={`${heading} video}`}
>
<h2 className={s.videoHeading}>{heading}</h2>
<div className={s.video}>
<ReactPlayer
url={`https://www.youtube.com/watch?v=${youtubeId}`}
width="100%"
height="100%"
playing={true}
controls={true}
/>
</div>
</IoDialog>
</>
)
}