32 lines
861 B
TypeScript
32 lines
861 B
TypeScript
|
import { Skeleton, Stack } from '@sanity/ui'
|
||
|
|
import { height, width } from 'components/OpenGraphImage'
|
||
|
|
import React, { lazy, Suspense, useDeferredValue } from 'react'
|
||
|
|
import { type ObjectInputProps } from 'sanity'
|
||
|
|
import styled from 'styled-components'
|
||
|
|
|
||
|
|
const OpenGraphPreview = lazy(() => import('./OpenGraphPreview'))
|
||
|
|
|
||
|
|
const RatioSkeleton = styled(Skeleton).attrs({
|
||
|
|
radius: 3,
|
||
|
|
shadow: 1,
|
||
|
|
overflow: 'hidden',
|
||
|
|
})`
|
||
|
|
aspect-ratio: ${width} / ${height};
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
`
|
||
|
|
|
||
|
|
const fallback = <RatioSkeleton animated />
|
||
|
|
|
||
|
|
export default function OpenGraphInput(props: ObjectInputProps) {
|
||
|
|
const value = useDeferredValue(props.value)
|
||
|
|
return (
|
||
|
|
<Stack space={2}>
|
||
|
|
<Suspense fallback={fallback}>
|
||
|
|
{value ? <OpenGraphPreview {...(value as any)} /> : fallback}
|
||
|
|
</Suspense>
|
||
|
|
{props.renderDefault(props)}
|
||
|
|
</Stack>
|
||
|
|
)
|
||
|
|
}
|