Answersheet to 'Internationalization practices in VTEX IO'
// store-block/react/Countdown.tsx
import React, { useState } from 'react'
import { TimeSplit } from './typings/global'
import { tick, getTwoDaysFromNow } from './utils/time'
import { useCssHandles } from 'vtex.css-handles'
import { FormattedMessage } from 'react-intl'
interface CountdownProps {
title: string
targetDate: string
}
const DEFAULT_TARGET_DATE = getTwoDaysFromNow()
const CSS_HANDLES = ['container', 'countdown', 'title']
const Countdown: StorefrontFunctionComponent<CountdownProps> = ({
title,
targetDate = DEFAULT_TARGET_DATE,
}) => {
const [timeRemaining, setTime] = useState<TimeSplit>({
hours: '00',
minutes: '00',
seconds: '00',
})
const titleText = title || <FormattedMessage id="countdown.title" />
const handles = useCssHandles(CSS_HANDLES)
tick(targetDate, setTime)
return (
<div className={`${handles.container} t-heading-2 fw3 w-100 c-muted-1`}>
<div className={`${handles.title} db tc`}>{titleText}</div>
<div className={`${handles.countdown} db tc`}>
{`${timeRemaining.hours}:${timeRemaining.minutes}:${timeRemaining.seconds}`}
</div>
</div>
)
}
Countdown.schema = {
title: 'editor.countdown.title',
description: 'editor.countdown.description',
type: 'object',
properties: {
title: {
title: 'I am a title',
type: 'string',
default: null,
},
targetDate: {
title: 'Final date',
description: 'Final date used in the countdown',
type: 'string',
default: null,
},
},
}
export default Countdown
// store-block/messages/context.json
{
"editor.countdown.title": "Countdown",
"editor.countdown.description": "Countdown component",
"countdown.title": "Countdown"
}
// store-block/messages/en.json
{
"editor.countdown.title": "Countdown",
"editor.countdown.description": "Countdown component",
"countdown.title": "Countdown"
}
// store-block/messages/es.json
{
"editor.countdown.title": "Cuenta regresiva",
"editor.countdown.description": "Cuenta regresiva component",
"countdown.title": "Cuenta Regresiva"
}
// store-block/messages/pt.json
{
"editor.countdown.title": "Contagem regressiva",
"editor.countdown.description": "Componente de contagem regressiva",
"countdown.title": "Contagem Regressiva"
}
Help us make this content better!
VTEX IO courses are open source. If you see something wrong, you can open a pull request!
Make a contributionUpdated almost 4 years ago