feat: add GeneralView sample story

src/components/molecules/RandomFacts/GeneralView.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import * as React from 'react';
+
+import { shuffleArray } from '@/lib/helper';
+
+import Button from '@/components/buttons/Button';
+
+import { RandomFact } from '@/types/RandomFact';
+
+export interface QuizAnswer {
+  headline: string;
+  key?: string;
+}
+
+export interface GeneralViewProps {
+  facts: RandomFact[];
+}
+
+const GeneralView = ({ facts }: GeneralViewProps) => {
+  const randomFact = shuffleArray(facts)[0];
+
+  return (
+    <div className='p4 rounded dark:bg-slate-900'>
+      <div className='mb-5'>{randomFact.description}</div>
+
+      <div className='flex justify-center'>
+        <Button>Load another random fact</Button>
+      </div>
+    </div>
+  );
+};
+
+export default GeneralView;

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

@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/react';
+
+import GeneralView, {
+  GeneralViewProps,
+} from '@/components/molecules/RandomFacts/GeneralView';
+
+import { RandomFact } from '@/types/RandomFact';
+
+const meta: Meta<typeof GeneralView> = {
+  title: 'Components/Random Facts/General View',
+  component: GeneralView,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const facts: RandomFact[] = [
+  {
+    _id: 'a',
+    name: 'name',
+    headline: '',
+    description:
+      'I have been officially excommunicated by the Roman Catholic Church ⛪',
+    trueFact: true,
+    explanation: '',
+  },
+];
+
+export const SampleStory = (args: GeneralViewProps) => (
+  <GeneralView {...args} />
+);
+SampleStory.args = {
+  facts,
+};

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useState } from 'react';
 
 import Quiz, { QuizData } from '@/components/molecules/RandomFacts/Quiz';
+import QuizAnswers from '@/components/molecules/RandomFacts/QuizAnswers';
 
 const localStorageKey = 'alreadyPlayed';
 
@@ -47,11 +48,11 @@ const RandomFacts = ({ options, falseOption }: QuizData) => {
         />
       )}
       {submitted && alreadyPlayed && (
-        <div className='rounded bg-gray-200 p-4'>
-          <p className='text-gray-800'>
-            You're {answerCorrect ? `correct` : `wrong`}!
-          </p>
-        </div>
+        <QuizAnswers
+          answers={options}
+          falseOption={falseOption}
+          answeredCorrectly={answerCorrect}
+        />
       )}
       {!submitted && alreadyPlayed && <div>Already played :)</div>}
     </div>