97 lines
2.5 KiB
TypeScript
97 lines
2.5 KiB
TypeScript
import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
|
|
|
|
import { PortableText } from '@portabletext/react'
|
|
// import imageUrlBuilder from '@sanity/image-url'
|
|
import getYouTubeId from 'get-youtube-id'
|
|
import { urlForImage } from 'lib/sanity.image'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import React from 'react'
|
|
import LiteYouTubeEmbed from 'react-lite-youtube-embed'
|
|
|
|
import styles from './PostBody.module.css'
|
|
|
|
export default function PageBody({ content }) {
|
|
//Video
|
|
const youTubeComponent = ({ value, isInline }) => {
|
|
const { youtubelabel, url } = value
|
|
if (!value.url) {
|
|
;<>Missing YouTube URL!</>
|
|
}
|
|
const id = getYouTubeId(value.url)
|
|
return (
|
|
<div>
|
|
<LiteYouTubeEmbed id={id} title={value.title} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
//CTA
|
|
const CallToActionComponent = ({ value, isInline }) => {
|
|
return (
|
|
<Link href={value.url}>
|
|
<button className="text-stone-800 mx-1 rounded border border-yellow-600 bg-white px-4 py-2 text-base font-light duration-150 ease-in hover:border-yellow-500 hover:bg-yellow-500 hover:text-white">
|
|
{value.linkText}
|
|
</button>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
//FIGURE/PHOTO/IMAGES
|
|
|
|
interface figureComponentProps {
|
|
image: any
|
|
priority?: boolean
|
|
title: string
|
|
}
|
|
|
|
const figureComponent = ({ value, isInline }) => {
|
|
//const { altText, image: source, priority } = props
|
|
//console.log(value)
|
|
//console.log(value.asset._ref)
|
|
// console.log(value.altText)
|
|
|
|
// const image = value?.asset?._ref ? (
|
|
// <div>
|
|
// <img src={value.asset._ref}></img>
|
|
// </div>
|
|
// ) : (
|
|
// <div>.......</div>
|
|
// )
|
|
|
|
return (
|
|
<div>
|
|
<Image
|
|
//src={urlForImage(value.asset._ref).url()}
|
|
width={1280}
|
|
height={1280}
|
|
src={urlForImage(value.asset._ref).height(1280).width(1280).url()}
|
|
alt={value.altText}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// const figureComponent = ({ value, isInline, props: figureComponentProps }) => {
|
|
// const { width, height } = getImageDimensions(value)
|
|
|
|
// const { image: source, priority } = props
|
|
// const image = source?.asset?._ref ?
|
|
// }
|
|
|
|
const components = {
|
|
types: {
|
|
callToAction: CallToActionComponent,
|
|
youtube: youTubeComponent,
|
|
Image: figureComponent,
|
|
},
|
|
}
|
|
|
|
return (
|
|
<div className={`mx-0 pb-10 font-light ${styles.portableText} `}>
|
|
{/* <PortableText value={content} /> */}
|
|
<PortableText value={content} components={components} />
|
|
</div>
|
|
)
|
|
}
|