From b025bfe863a43fde2a2e78a2f4a01d975490de2e Mon Sep 17 00:00:00 2001
From: "marta.pancaldi" <marta.pancaldi@resourcify.de>
Date: Thu, 27 Jul 2023 22:45:36 +0200
Subject: [PATCH] feat: add QuizAnswer sample stories

---
 .../molecules/RandomFacts/QuizAnswers.tsx     | 50 +++++++++++++++++
 .../__stories__/QuizAnswer.stories.tsx        | 53 +++++++++++++++++++
 2 files changed, 103 insertions(+)
 create mode 100644 src/components/molecules/RandomFacts/QuizAnswers.tsx
 create mode 100644 src/components/molecules/RandomFacts/__stories__/QuizAnswer.stories.tsx

diff --git a/src/components/molecules/RandomFacts/QuizAnswers.tsx b/src/components/molecules/RandomFacts/QuizAnswers.tsx
new file mode 100644
index 0000000..1afd238
--- /dev/null
+++ b/src/components/molecules/RandomFacts/QuizAnswers.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import { BsFillCheckCircleFill, BsFillXSquareFill } from 'react-icons/bs';
+
+export interface QuizAnswer {
+  headline: string;
+  key?: string;
+}
+
+export interface QuizAnswersProps {
+  answers: QuizAnswer[];
+  falseOption?: string;
+  answeredCorrectly: boolean;
+}
+
+const QuizAnswers = ({
+  answers,
+  falseOption,
+  answeredCorrectly,
+}: QuizAnswersProps) => {
+  return (
+    <div className='p4 rounded dark:bg-slate-900'>
+      <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' />
+              )}
+            </span>
+            {answer.headline}
+          </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>
+  );
+};
+
+export default QuizAnswers;
diff --git a/src/components/molecules/RandomFacts/__stories__/QuizAnswer.stories.tsx b/src/components/molecules/RandomFacts/__stories__/QuizAnswer.stories.tsx
new file mode 100644
index 0000000..3227601
--- /dev/null
+++ b/src/components/molecules/RandomFacts/__stories__/QuizAnswer.stories.tsx
@@ -0,0 +1,53 @@
+import { Meta } from '@storybook/react';
+
+import QuizAnswers, {
+  QuizAnswer,
+  QuizAnswersProps,
+} from '@/components/molecules/RandomFacts/QuizAnswers';
+
+const meta: Meta<typeof QuizAnswers> = {
+  title: 'Components/Random Facts/Quiz Answers',
+  component: QuizAnswers,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const answers: QuizAnswer[] = [
+  {
+    key: 'a',
+    headline:
+      'I have been officially excommunicated by the Roman Catholic Church ⛪',
+  },
+  {
+    key: 'b',
+    headline: 'I studied oboe at the music school for more than 12 years 🎶',
+  },
+  {
+    key: 'c',
+    headline: 'I know flags and capitals of all 195 countries in the world 🇰🇲',
+  },
+  {
+    key: 'd',
+    headline:
+      'I was an extra-actor in a movie once: "Correspondence" by Giuseppe Tornatore 🎬',
+  },
+];
+
+export const CorrectAnswerStory = (args: QuizAnswersProps) => (
+  <QuizAnswers {...args} />
+);
+CorrectAnswerStory.args = {
+  answers,
+  falseOption: 'c',
+  answeredCorrectly: true,
+};
+
+export const WrongAnswerStory = (args: QuizAnswersProps) => (
+  <QuizAnswers {...args} />
+);
+WrongAnswerStory.args = {
+  answers,
+  falseOption: 'c',
+  answeredCorrectly: false,
+};