All files / pages/services challenges.js

0% Statements 0/14
0% Branches 0/2
0% Functions 0/6
0% Lines 0/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95                                                                                                                                                                                             
import DottedLine from '../../components/DottedLine'
import Link from 'next/link'
import { useRouter } from 'next/router'
import en from '../../locales/services/en'
import fr from '../../locales/services/fr'
 
export default function Challenges({ locale }) {
  const router = useRouter()
  const t = locale === 'en' ? en : fr
 
  return (
    <div className="max-w-3xl mx-auto p-2">
      <h1 className="text-center">{t.challenges}</h1>
      <DottedLine />
      <section className="w-full mx-auto md:w-5/6 border-b-2 pb-5 pt-5 mb-6">
        <div className="flex flex-col md:flex-row gap-5 mb-4 items-center mx-10">
          <img src="/workshops.png" alt="" className="w-96" />
          <div className="flex flex-col gap-2">
            <button
              onClick={() => router.push('/services/workshops')}
              className="bg-periwinkle text-white rounded-full py-1 px-4 hover:bg-darkPeriwinkle"
            >
              {t.previousService}
            </button>
          </div>
        </div>
        <p className="text-center text-periwinkle text-lg font-bold">{t.cP1}</p>
      </section>
      <section className="space-y-6">
        <div className="space-y-2">
          <h2 className="text-lg text-periwinkle font-bold">{t.cH2}</h2>
          <ol className="list-decimal list-inside ml-5">
            <li>{t.cLi1}</li>
            <li>{t.cLi2}</li>
          </ol>
          <p>{t.cP2}</p>
          <ul className="list-disc list-inside ml-5">
            <li>{t.cLi3}</li>
            <li>{t.cLi4}</li>
            <li>{t.cLi5}</li>
            <li>{t.cLi6}</li>
          </ul>
        </div>
        <div className="space-y-2">
          <h2 className="text-lg text-periwinkle font-bold">{t.c30}</h2>
          <p>{t.c30P}</p>
          <p>{t.c30P2}</p>
        </div>
        <div className="space-y-2">
          <h2 className="text-lg text-periwinkle font-bold">{t.c10}</h2>
          <p>{t.c10P}</p>
          <p>{t.c10P2}</p>
        </div>
      </section>
      <div className="mt-10 space-x-5">
        <button
          onClick={() => router.push('/services/workshops')}
          className="bg-periwinkle text-white rounded-full py-1 px-4 hover:bg-darkPeriwinkle w-32"
        >
          {t.back}
        </button>
        <Link href="/services">
          <a className="text-periwinkle underline">{t.backToService}</a>
        </Link>
      </div>
    </div>
  )
}
 
export async function getStaticProps({ locale }) {
  /* istanbul ignore next */
  const langToggleLink =
    locale === 'en' ? '/fr/services/challenges' : '/services/challenges'
 
  /* Place-holder Meta Data Props */
  const meta = {
    data_en: {
      title: 'Digital Dojo - Dojo Challenges',
      desc: 'English',
      author: '',
      keywords: '',
    },
    data_fr: {
      title: 'Dojo Numérique - Le Défi du Dojo',
      desc: 'Français',
      author: '',
      keywords: '',
    },
  }
 
  return {
    props: { locale, langToggleLink, meta },
  }
}