Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement i18next framework #265

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Implement i18next framework #265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions components/BitcoinOperation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react'
import { useTranslation } from 'next-i18next';

import Headline from './Headline'
import LearnMore from './LearnMore'
Expand All @@ -12,19 +13,21 @@ import {
} from '../constants/strings'

const BitcoinOperation = ({}) => {
const { t } = useTranslation('home')

return (
<div className='BitcoinOperation bg-bitcoin bg-no-repeat mr-8 bg-right-bottom md:mr-24 md:bg-right bg-44 md:bg-contain'>
<div className='grid grid-rows-2 gap-6 pt-12'>
<div className=''>
<Headline variant='xxl' color='solid-white' alignment='text-left'>
{ SETLIFE_OPERATES }
{ t(SETLIFE_OPERATES) }
</Headline>
<Headline variant='xxl' color='solid-white' alignment='text-left'>
{ ON_A_BITCOIN_STANDARD }
{ t(ON_A_BITCOIN_STANDARD) }
</Headline>
</div>
<div className=''>
<LearnMore text={CLICK_TO_LEARN_MORE} url={BITCOIN_BANNER_URL} newTab />
<LearnMore text={t(CLICK_TO_LEARN_MORE)} url={BITCOIN_BANNER_URL} newTab />
</div>
</div>
</div>
Expand Down
22 changes: 12 additions & 10 deletions components/BudgetTimelineForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react'
import Slider from 'rc-slider'
import 'rc-slider/assets/index.css'
import { useTranslation } from 'next-i18next';

import Paragraph from './Paragraph'

Expand Down Expand Up @@ -34,6 +35,7 @@ const BudgetTimelineForm = ({
setTimeline,
defaultBudget,
}: BudgetTimelineFormProps) => {
const { t } = useTranslation('consultation')

const [minBudgetValue, setMinBudgetValue] = useState(defaultBudget[0])
const [maxBudgetValue, setMaxBudgetValue] = useState(defaultBudget[1])
Expand Down Expand Up @@ -109,7 +111,7 @@ const BudgetTimelineForm = ({
]
return timelineTypes.map(timeline => {
return (
<div className='w-fit' onClick={() => addTimelineValue(timeline.name)}>
<div className='w-fit' onClick={() => addTimelineValue(t(timeline.name))}>
<label
className='form-check-label inline-block text-solid-black'
htmlFor='timelineRadio'
Expand All @@ -119,10 +121,10 @@ const BudgetTimelineForm = ({
className='form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary checked:border-primary focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer'
type='checkbox'
id={timeline.name}
checked={timelineValues.includes(timeline.name)}
checked={timelineValues.includes(t(timeline.name))}
onChange={() => {}}
/>
{ timeline.name }
{ t(timeline.name) }
</label>
</div>
)
Expand All @@ -134,28 +136,28 @@ const BudgetTimelineForm = ({
<div className='grid grid-flow-row auto-rows-max gap-8 w-full md:w-8/12'>
<Paragraph>
<>
{PROJECT_WITH_PROPOSED_BUDGETS}
{t(PROJECT_WITH_PROPOSED_BUDGETS)}
<a className='text-primary hover:underline hover:underline-offset-1' href='/service-packages'>
{SERVICE_PACKAGES}
{` ${t(SERVICE_PACKAGES, { ns: 'common' })} `}
</a>
{TO_GET_A_SENSE}
{t(TO_GET_A_SENSE)}
</>
</Paragraph>
<Paragraph variant='m-bold'>
{SELECT_AN_ESTIMATED_BUDGET_RANGE_FOR_YOUR_PROJECT}
{t(SELECT_AN_ESTIMATED_BUDGET_RANGE_FOR_YOUR_PROJECT)}
</Paragraph>
<div className='grid grid-cols-2 justify-items-center'>
<div>
<Paragraph variant='m-bold' color='primary' alignment='text-center'>
{MIN}
{t(MIN)}
</Paragraph>
<Paragraph>
{formatAmount(minBudgetValue)}
</Paragraph>
</div>
<div>
<Paragraph variant='m-bold' color='primary' alignment='text-center'>
{MAX}
{t(MAX)}
</Paragraph>
<Paragraph>
{formatAmount(maxBudgetValue)}
Expand Down Expand Up @@ -190,7 +192,7 @@ const BudgetTimelineForm = ({
</div>
<div className='mt-8'>
<Paragraph variant='m-bold'>
{DESCRIBE_ANY_TIMELINE_AND_BUDGET_CONSTRAINTS_FOR_YOUR_PROJECT}
{t(DESCRIBE_ANY_TIMELINE_AND_BUDGET_CONSTRAINTS_FOR_YOUR_PROJECT)}
</Paragraph>
</div>
{ renderTimelineTypes() }
Expand Down
17 changes: 10 additions & 7 deletions components/ContactInformation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useEffect, useState } from 'react'
import { useTranslation } from 'next-i18next';

import Headline from './Headline'

Expand Down Expand Up @@ -29,6 +30,8 @@ const ContactInformation = ({
setContactInformationError
}: ContactInformationProps) => {

const { t } = useTranslation('consultation')

const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [phoneNumber, setPhoneNumber] = useState('')
Expand Down Expand Up @@ -63,7 +66,7 @@ const ContactInformation = ({
const renderInputs = () => {
const basicInformationFields = [
{
name: NAME,
name: t(NAME),
value: name,
error: nameError,
onChange: (nameInput: any) => {
Expand All @@ -72,7 +75,7 @@ const ContactInformation = ({
}
},
{
name: EMAIL,
name: t(EMAIL, { 'ns': 'common' }),
value: email,
error: emailError,
onChange: (emailInput: any) => {
Expand All @@ -81,7 +84,7 @@ const ContactInformation = ({
}
},
{
name: PHONE_NUMBER,
name: t(PHONE_NUMBER),
value: phoneNumber,
onChange: (phoneNumberInput: any) => {
setPhoneNumber(validNumber.exec(phoneNumberInput)
Expand Down Expand Up @@ -115,7 +118,7 @@ const ContactInformation = ({
</label>
{input.error && (
<span className='px-5 text-red-600'>
{ INVALID } { input.name }
{ t(INVALID) } { input.name }
</span>
)}
</div>
Expand Down Expand Up @@ -168,7 +171,7 @@ const ContactInformation = ({
checked={clientType == client.name}
onChange={() => {}}
/>
{ client.name }
{ t(client.name) }
</label>
</div>
)
Expand All @@ -185,12 +188,12 @@ const ContactInformation = ({
color='primary'
variant='alternative'
>
{THIS_PROJECT_IS_FOR + '*'}
{t(THIS_PROJECT_IS_FOR) + '*'}
</Headline>
{ renderClientTypes() }
{clientTypeError && (
<span className='px-5 text-red-600'>
{ PLEASE_SELECT_AT_LEAST_ONE_OPTION }
{ t(PLEASE_SELECT_AT_LEAST_ONE_OPTION) }
</span>
)}
</div>
Expand Down
16 changes: 9 additions & 7 deletions components/ContributorInquiryForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useEffect, useRef, useState } from 'react'
import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next';

import { getS3 } from '../utilities/s3'
import { validEmail } from '../utilities/validations'
Expand All @@ -24,6 +25,7 @@ import {
} from '../constants/strings';

const ContributorInquiryForm = ({}) => {
const { t } = useTranslation('inquiry')

const [email, setEmail] = useState('')
const [linkToWork, setLinkToWork] = useState('')
Expand Down Expand Up @@ -107,13 +109,13 @@ const ContributorInquiryForm = ({}) => {
const renderInputs = () => {
const basicInformationFields = [
{
name: EMAIL,
name: t(EMAIL, { 'ns': 'common' }),
value: email,
setValue: setEmail,
type: 'email'
},
{
name: LINK_TO_YOUR_WORK,
name: t(LINK_TO_YOUR_WORK),
value: linkToWork,
setValue: setLinkToWork,
type: 'text'
Expand Down Expand Up @@ -153,7 +155,7 @@ const ContributorInquiryForm = ({}) => {
<div className='grid grid-rows-7 gap-8 px-2 lg:px-4'>
<div>
<Headline variant='h1' color='solid-black'>
{PLEASE_FILL_OUT_CONTRIBUTE_FORM}
{t(PLEASE_FILL_OUT_CONTRIBUTE_FORM)}
</Headline>
</div>
<div>
Expand All @@ -172,7 +174,7 @@ const ContributorInquiryForm = ({}) => {
{
submitCVName
? submitCVName
: SUBMIT_CV
: t(SUBMIT_CV)
}
</span>
</div>
Expand Down Expand Up @@ -209,7 +211,7 @@ const ContributorInquiryForm = ({}) => {
<div>
<div className={`cursor-pointer ml-1 ${openMoreDetails ? 'hidden' : ''}`} onClick={() => setOpenMoreDetails(true)}>
<Paragraph color='primary'>
{ADD_MORE_DETAILS}
{t(ADD_MORE_DETAILS)}
</Paragraph>
</div>
<textarea
Expand All @@ -232,7 +234,7 @@ const ContributorInquiryForm = ({}) => {
id='formControlTextarea'
rows={6}
onChange={(e) => setMoreDetails(e.target.value)}
placeholder={ADD_MORE_DETAILS + ' ' + OPTIONAL}
placeholder={t(ADD_MORE_DETAILS) + ' ' + t(OPTIONAL)}
/>
</div>
<div
Expand All @@ -244,7 +246,7 @@ const ContributorInquiryForm = ({}) => {
variant='tertiary'
disabled={disabled}
>
{SUBMIT}
{t(SUBMIT, { 'ns': 'common' })}
</Button>
</div>
</div>
Expand Down
14 changes: 8 additions & 6 deletions components/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react'
import { useTranslation } from 'next-i18next';

import Button from './Button'
import Headline from './Headline'
Expand All @@ -17,25 +17,27 @@ import {
} from '../constants'

const Hero = ({}) => {
const { t } = useTranslation('home')

return (
<div className='Hero grid grid-cols-1 md:grid-cols-2'>
<div className='grid grid-flow-row auto-rows-max px-2 lg:px-4 place-content-center gap-12 md:gap-16'>
<div className=''>
<Headline variant='xl' color='solid-black' alignment='text-center md:text-left'>
{ MAKE_SOFTWARE }
{t(MAKE_SOFTWARE)}
</Headline>
<Headline variant='xl' color='primary' alignment='text-center md:text-left'>
{ YOUR_SUPERPOWER }
{t(YOUR_SUPERPOWER)}
</Headline>
</div>
<div className=''>
<Paragraph alignment='text-center md:text-left'>
{ RATHER_THAN_DELIVERING_A_BLACKBOX }
{t(RATHER_THAN_DELIVERING_A_BLACKBOX)}
</Paragraph>
</div>
<div className='text-center md:text-left'>
<Button variant='tertiary' link={CONSULTATION.toLowerCase()} className='px-8'>
{SCHEDULE_CONSULTATION.toUpperCase()}
<Button variant='tertiary' link={CONSULTATION} className='px-8'>
{t(SCHEDULE_CONSULTATION, { 'ns': 'common' }).toUpperCase()}
</Button>
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useState } from 'react'
import { i18n } from 'next-i18next';

import { LOGO_URL, NAV_ITEMS } from '../constants'
import {
Expand All @@ -16,7 +17,7 @@ const renderNavItems = () => {
className='text-2xl font-bold my-4 text-primary md:mx-4 md:text-base md:text-solid-black md:my-0'
href={item.link}
>
{item.name}
{i18n?.t(item.name)}
</a>
)
})
Expand Down
6 changes: 5 additions & 1 deletion components/ProductionGradeTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React from 'react'
import { useTranslation } from 'next-i18next';

import { THUMBS_ICON } from '../constants'
import { PRODUCTION_GRADE } from '../constants/strings'
import Paragraph from './Paragraph'
Expand All @@ -13,6 +15,8 @@ const ProductionGradeTile = ({
description
}: ProductionGradeTileProps) => {

const { t } = useTranslation('project')

return (
<div className='grid grid-cols-1 gap-5 rounded-2xl p-8 bg-solid-white md:p-16'>
<div className=''>
Expand All @@ -28,7 +32,7 @@ const ProductionGradeTile = ({
</div>
<div className=''>
<Subtitle variant='xs' alignment='text-center'>
{ PRODUCTION_GRADE }
{ t(PRODUCTION_GRADE) }
</Subtitle>
</div>
<div className=''>
Expand Down
Loading