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] 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>
+    )
+}