From e65af02d72e08f591ffd97bdee5140a4085bfcdd Mon Sep 17 00:00:00 2001
From: Mitch Chanza <mitch.chanza@gmail.com>
Date: Thu, 19 Sep 2024 02:51:23 +0200
Subject: [PATCH 1/5] update components/src/components/QuizCards/index.ts

---
 components/src/components/QuizCards/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/src/components/QuizCards/index.ts b/components/src/components/QuizCards/index.ts
index 344baf3..09d41e2 100644
--- a/components/src/components/QuizCards/index.ts
+++ b/components/src/components/QuizCards/index.ts
@@ -2,3 +2,4 @@ export * from './QuizCards';
 export * from './QuizComponent';
 export * from './ScoreModal';
 export * from './StaticData';
+export * from './CardsHolder';

From a95b023dbf2bb10ae596ac9bad0e066c2e089034 Mon Sep 17 00:00:00 2001
From: Mitch Chanza <mitch.chanza@gmail.com>
Date: Thu, 19 Sep 2024 02:51:29 +0200
Subject: [PATCH 2/5] update page.tsx

---
 components/src/app/cards/page.tsx | 36 +++++++++++--------------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/components/src/app/cards/page.tsx b/components/src/app/cards/page.tsx
index e1db497..7618750 100644
--- a/components/src/app/cards/page.tsx
+++ b/components/src/app/cards/page.tsx
@@ -1,27 +1,15 @@
 import React from "react";
-import {  QuizCards } from "../../components";
-import { files } from "@/components/QuizCards";
+import { QuizCards } from "../../components";
+import { CardsHolder, files } from "@/components/QuizCards";
 
 function CardsComponent() {
-    return (
-      <div
-        style={{
-          backgroundImage: 'url("/cards/flag.svg")',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          height: '100vh', 
-          width: '100vw',  
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center'
-        }}
-      >
-        <div className="p-4 m-6 rounded-lg shadow-md w-full bg-white">
-          <QuizCards url="cards" files={files} />
-        </div>
-      </div>
-    );
-  }
-  
-  export default CardsComponent;
-  
\ No newline at end of file
+  return (
+    <CardsHolder>
+      <QuizCards url="cards" files={files} />
+    </CardsHolder>
+
+
+  );
+}
+
+export default CardsComponent;

From 5feb8d1238cf9b6d4fa7c2123cd432bd0632e831 Mon Sep 17 00:00:00 2001
From: Mitch Chanza <mitch.chanza@gmail.com>
Date: Thu, 19 Sep 2024 02:51:34 +0200
Subject: [PATCH 3/5] update components/src/components/index.ts

---
 components/src/components/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/components/index.ts b/components/src/components/index.ts
index c76e304..666347e 100644
--- a/components/src/components/index.ts
+++ b/components/src/components/index.ts
@@ -1,4 +1,4 @@
-export {QuizCards, QuizComponent, ScoreModal} from './QuizCards';
+export {QuizCards, QuizComponent, ScoreModal,CardsHolder} from './QuizCards';
 export {ExampleComponent} from './ExampleComponent'
 export {CountdownComponent,AnimatedBackground} from './CountDown'
 export {MainLandingPage } from './LandingPage'

From 87e9d5c3b12e6dd5379633ff2ec274f4d089378a Mon Sep 17 00:00:00 2001
From: Mitch Chanza <mitch.chanza@gmail.com>
Date: Thu, 19 Sep 2024 02:51:41 +0200
Subject: [PATCH 4/5] add components/src/components/QuizCards/CardsHolder.tsx
 for rendering quiz card layout with a background image and children elements

---
 .../src/components/QuizCards/CardsHolder.tsx  | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 components/src/components/QuizCards/CardsHolder.tsx

diff --git a/components/src/components/QuizCards/CardsHolder.tsx b/components/src/components/QuizCards/CardsHolder.tsx
new file mode 100644
index 0000000..3411f8a
--- /dev/null
+++ b/components/src/components/QuizCards/CardsHolder.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+export const CardsHolder = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <div>
+            <div
+                style={{
+                    backgroundImage: 'url("/cards/flag.svg")',
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                    height: '100vh',
+                    width: '100vw',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                }}
+            >
+                <div className="p-4 m-6 rounded-lg shadow-md w-full bg-white">
+                    {children}
+                </div>
+            </div>
+        </div>
+    )
+}

From e08af5fb81ac8895d44c1b9baf4238b522aac1d6 Mon Sep 17 00:00:00 2001
From: Mitch Chanza <mitch.chanza@gmail.com>
Date: Thu, 19 Sep 2024 02:51:59 +0200
Subject: [PATCH 5/5] update page.tsx

---
 components/src/app/cards/page.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/src/app/cards/page.tsx b/components/src/app/cards/page.tsx
index 7618750..3d8b913 100644
--- a/components/src/app/cards/page.tsx
+++ b/components/src/app/cards/page.tsx
@@ -8,7 +8,6 @@ function CardsComponent() {
       <QuizCards url="cards" files={files} />
     </CardsHolder>
 
-
   );
 }