37 lines
1.0 KiB
JavaScript
37 lines
1.0 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { motion, useReducedMotion } from 'framer-motion'
|
|
import { moveInTop, getAnimationProps } from '../atoms/Transitions'
|
|
import { useMeta } from '../../hooks/use-meta'
|
|
import {
|
|
availability as styleAvailability,
|
|
available as styleAvailable
|
|
} from './Availability.module.css'
|
|
|
|
export default function Availability({ hide }) {
|
|
const { availability } = useMeta()
|
|
const shouldReduceMotion = useReducedMotion()
|
|
const isSSr = typeof window === 'undefined'
|
|
const { status, available, unavailable } = availability
|
|
const className = status
|
|
? `${styleAvailability} ${styleAvailable}`
|
|
: `${styleAvailability}`
|
|
const html = status ? available : unavailable
|
|
|
|
return (
|
|
!hide && (
|
|
<motion.aside
|
|
variants={moveInTop}
|
|
className={className}
|
|
{...getAnimationProps(shouldReduceMotion, isSSr)}
|
|
>
|
|
<p dangerouslySetInnerHTML={{ __html: html }} />
|
|
</motion.aside>
|
|
)
|
|
)
|
|
}
|
|
|
|
Availability.propTypes = {
|
|
hide: PropTypes.bool
|
|
}
|