feat: add explanation to RandomFacts component

src/app/(public)/about/free-time/page.tsx

@@ -72,10 +72,12 @@ const loadRandomFactsForQuiz = async () => {
 
   const options: QuizOption[] = threeTrueFacts.map((fact) => ({
     headline: fact.headline,
+    explanation: fact.explanation,
   }));
 
   options.push({
     headline: oneFalseFact.headline,
+    explanation: oneFalseFact.explanation,
   });
 
   const shuffledOptions = shuffleArray(options);
@@ -85,6 +87,7 @@ const loadRandomFactsForQuiz = async () => {
   for (let i = 0; i < 4; i++) {
     preparedOptions.push({
       headline: shuffledOptions[i].headline,
+      explanation: shuffledOptions[i].explanation,
       key: keys[i],
     });
   }

src/components/molecules/RandomFacts/GeneralView.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { PortableText } from '@portabletext/react';
 import * as React from 'react';
 
 import { shuffleArray } from '@/lib/helper';
@@ -22,7 +23,9 @@ const GeneralView = ({ facts }: GeneralViewProps) => {
 
   return (
     <div className='p4 rounded dark:bg-slate-900'>
-      <div className='mb-5'>{randomFact.description}</div>
+      <div className='mb-5'>
+        <PortableText value={randomFact.description} />
+      </div>
 
       <div className='flex justify-center'>
         <Button>Load another random fact</Button>

src/components/molecules/RandomFacts/Quiz.tsx

@@ -4,6 +4,7 @@ import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
+import { TypedObject } from '@portabletext/types/src';
 import * as React from 'react';
 import { useState } from 'react';
 
@@ -13,6 +14,7 @@ const localStorageKey = 'alreadyPlayed';
 
 export interface QuizOption {
   headline: string;
+  explanation?: TypedObject;
   key?: string;
 }
 
@@ -57,7 +59,7 @@ const Quiz = ({ options, falseOption, onAnswerSubmission }: QuizProps) => {
               className='mb-2 md:mb-0'
               key={option.key}
               value={option.key}
-              control={<Radio />}
+              control={<Radio className='dark:quiz-radio-button' />}
               label={option.headline}
             />
           ))}

src/components/molecules/RandomFacts/QuizAnswers.tsx

@@ -1,15 +1,13 @@
 'use client';
 
+import { PortableText } from '@portabletext/react';
 import * as React from 'react';
 import { BsFillCheckCircleFill, BsFillXSquareFill } from 'react-icons/bs';
 
-export interface QuizAnswer {
-  headline: string;
-  key?: string;
-}
+import { QuizOption } from '@/components/molecules/RandomFacts/Quiz';
 
 export interface QuizAnswersProps {
-  answers: QuizAnswer[];
+  answers: QuizOption[];
   falseOption?: string;
   answeredCorrectly: boolean;
 }
@@ -20,29 +18,36 @@ const QuizAnswers = ({
   answeredCorrectly,
 }: QuizAnswersProps) => {
   return (
-    <div className='p4 rounded dark:bg-slate-900'>
+    <div className='flex flex-col items-center rounded px-4 py-2 dark:bg-slate-900'>
+      <div className='mb-4 mt-0 w-fit rounded bg-gray-200 p-4 dark:bg-slate-700'>
+        <p className='text-gray-800 dark:text-gray-50'>
+          {answeredCorrectly
+            ? "Congratulations, you're correct! 🥳"
+            : 'Too bad, better luck next time ✌️'}
+        </p>
+      </div>
+
       <ul>
         {answers.map((answer) => (
-          <li className='mb-4 flex flex-row' key={answer.key}>
-            <span className='me-3 text-xl'>
-              {answer.key == falseOption ? (
-                <BsFillXSquareFill className='fill-current text-red-600' />
-              ) : (
-                <BsFillCheckCircleFill className='fill-current text-green-600' />
+          <li className='mb-5 flex flex-col' key={answer.key}>
+            <div className='mb-2 flex flex-row'>
+              <span className='me-3 flex items-center text-xl'>
+                {answer.key == falseOption ? (
+                  <BsFillXSquareFill className='fill-current text-red-600' />
+                ) : (
+                  <BsFillCheckCircleFill className='fill-current text-green-600' />
+                )}
+              </span>
+              <span>{answer.headline}</span>
+            </div>
+            <div className='rounded bg-blue-100 px-3 py-2 text-xs dark:bg-blue-950'>
+              {answer.explanation && (
+                <PortableText value={answer.explanation} />
               )}
-            </span>
-            {answer.headline}
+            </div>
           </li>
         ))}
       </ul>
-
-      <div className='rounded bg-gray-200 p-4'>
-        <p className='text-gray-800'>
-          {answeredCorrectly
-            ? "You're correct! 🥳"
-            : 'Too bad, better luck next time ✌️'}
-        </p>
-      </div>
     </div>
   );
 };

src/components/molecules/RandomFacts/__stories__/QuizAnswer.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react';
 
+import { QuizOption } from '@/components/molecules/RandomFacts/Quiz';
 import QuizAnswers, {
-  QuizAnswer,
   QuizAnswersProps,
 } from '@/components/molecules/RandomFacts/QuizAnswers';
 
@@ -13,24 +13,39 @@ const meta: Meta<typeof QuizAnswers> = {
 
 export default meta;
 
-const answers: QuizAnswer[] = [
+const answers: QuizOption[] = [
   {
     key: 'a',
     headline:
       'I have been officially excommunicated by the Roman Catholic Church ⛪',
+    explanation:
+      'That is accurate!\n\nAt a certain point in my life I realised that I no longer agreed with the ' +
+      'dictates of the religion I had grown up in, so I decided to declare it to the Church, and was excommunicated ' +
+      "as a consequence... I don't brag about it, but it feels good to be consistent :)",
   },
   {
     key: 'b',
     headline: 'I studied oboe at the music school for more than 12 years 🎶',
+    explanation:
+      "That's correct!\n\nWhen I studied at the music school, I occasionally played for some illustrious " +
+      'people - notably, the ex Italian President Giorgio Napolitano, the Nobel prize Dario Fo, the bishop of my hometown, ' +
+      'and the singer Luciano Ligabue 🎵 🎸 🎶 🎻. Not so oddly enough, it was usually me who asked them for an autograph, ' +
+      "although I was technically the 'star' and they were the audience...",
   },
   {
     key: 'c',
     headline: 'I know flags and capitals of all 195 countries in the world 🇰🇲',
+    explanation:
+      "Haha, nope... not yet at least, but I'm working on it ;) \n\nI know all 50 States by heart " +
+      '(alphabetically and geographically) though, and can probably name most of the 110 Italian towns along with their codes.',
   },
   {
     key: 'd',
     headline:
       'I was an extra-actor in a movie once: "Correspondence" by Giuseppe Tornatore 🎬',
+    explanation:
+      'Correct! \nI was part of the university students who sat in the conference hall and walked around ' +
+      "the uni campus. If you manage to spot me, I promise I'll autograph your t-shirt 😉",
   },
 ];
 

src/components/organisms/about-free-time/RandomFacts.tsx

@@ -29,14 +29,15 @@ const RandomFacts = ({ options, falseOption }: QuizData) => {
 
   return (
     <div className='mb-6'>
-      <div className='mb-6 mt-2 flex'>
+      <div className='mb-4 mt-2 flex'>
         <h2>Random facts about me</h2>
       </div>
 
       {!alreadyPlayed && (
-        <div className='mb-3'>
+        <div className='mb-3 font-serif font-semibold'>
           Here's a little game for you! Which of the following statements about
-          me is <strong>false</strong>?
+          me is{' '}
+          <strong className='text-red-600 dark:text-red-400'>false</strong>?
         </div>
       )}
 

src/queries/random-facts.ts

@@ -6,7 +6,8 @@ export const trueRandomFactsQuery = groq`
   _id,
   name,
   headline,
-  description
+  description,
+  explanation,
 }`;
 
 export const falseRandomFactsQuery = groq`
@@ -16,13 +17,14 @@ export const falseRandomFactsQuery = groq`
   name,
   headline,
   description,
-  explanation
+  explanation,
 }`;
 
 export const randomFactsQuery = groq`
 *[_type == "randomFact"] {
   _id,
   name,
   description,
+  explanation,
   isFactTrue
 }`;

src/styles/globals.css

@@ -256,4 +256,8 @@
     padding-left: 4px;
     margin-bottom: 4px;
   }
+
+  .quiz-radio-button {
+    color: white;
+  }
 }

src/types/RandomFact.ts

@@ -1,8 +1,10 @@
+import { TypedObject } from '@portabletext/types';
+
 export interface RandomFact {
   _id: string;
   name: string;
   headline: string;
-  description: string;
+  description: TypedObject;
   trueFact: boolean;
-  explanation: string;
+  explanation: TypedObject;
 }