41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import RelativeTime from '@yaireo/relative-time'
|
|
import { LazyMotion, domAnimation, m, useReducedMotion } from 'framer-motion'
|
|
import { useLocation } from '../../hooks/useLocation'
|
|
import { getAnimationProps, moveInTop } from '../Transitions'
|
|
import { Flag } from './Flag'
|
|
import styles from './index.module.css'
|
|
|
|
export default function Location() {
|
|
const { now, next } = useLocation()
|
|
const shouldReduceMotion = useReducedMotion()
|
|
const isDifferentCountry = now?.country !== next?.country
|
|
const relativeTime = new RelativeTime({ locale: 'en' })
|
|
|
|
return now?.city ? (
|
|
<LazyMotion features={domAnimation}>
|
|
<m.section
|
|
aria-label="Location"
|
|
variants={moveInTop}
|
|
className={styles.location}
|
|
{...getAnimationProps(shouldReduceMotion)}
|
|
>
|
|
<Flag country={{ code: now.country_code, name: now.country }} />
|
|
{now?.city} <span>Now</span>
|
|
<div className={styles.next}>
|
|
{next?.city && (
|
|
<>
|
|
{isDifferentCountry && (
|
|
<Flag
|
|
country={{ code: next.country_code, name: next.country }}
|
|
/>
|
|
)}
|
|
{next.city}{' '}
|
|
<span>{relativeTime.from(new Date(next.date_start))}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</m.section>
|
|
</LazyMotion>
|
|
) : null
|
|
}
|