From 19abe9ba505738cba368183342c6c4c4ba5aed69 Mon Sep 17 00:00:00 2001
From: sksmagr23 <sakshamag34@gmail.com>
Date: Tue, 4 Jun 2024 15:10:31 +0530
Subject: [PATCH] frontend: Added a Playoptions page

This commit add a playoptions page that renders onn navigating to /play.
It has been created using Heading and button components of library and
custom styling is done using Tailwind css and also added a UNO game logo,
the page is fully responsive with a uno theme design

Fixes-#23
---
 frontend/public/UNO_Logo.svg       | 175 +++++++++++++++++++++++++++++
 frontend/src/index.css             |   4 +
 frontend/src/library/button.tsx    |   9 +-
 frontend/src/library/heading.tsx   |  13 +++
 frontend/src/pages/PlayOptions.tsx |  65 ++++++++---
 5 files changed, 250 insertions(+), 16 deletions(-)
 create mode 100644 frontend/public/UNO_Logo.svg

diff --git a/frontend/public/UNO_Logo.svg b/frontend/public/UNO_Logo.svg
new file mode 100644
index 0000000..278a3ed
--- /dev/null
+++ b/frontend/public/UNO_Logo.svg
@@ -0,0 +1,175 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 550 385.57114"
+   xml:space="preserve"
+   sodipodi:docname="UNO Logo.svg"
+   width="550"
+   height="385.57114"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
+   id="metadata51"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs49" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1920"
+   inkscape:window-height="1017"
+   id="namedview47"
+   showgrid="false"
+   inkscape:zoom="0.5959596"
+   inkscape:cx="26.53264"
+   inkscape:cy="414.17013"
+   inkscape:window-x="-8"
+   inkscape:window-y="-8"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Layer_1" />
+<style
+   type="text/css"
+   id="style2">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#ED1C24;}
+	.st1{fill:#FFFFFF;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;}
+	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#F8DA27;}
+	.st5{fill-rule:evenodd;clip-rule:evenodd;fill:#58585A;}
+</style>
+<g
+   id="g44"
+   transform="matrix(3.0565629,0,0,3.0565629,-659.9919,-1017.7417)">
+	<path
+   class="st0"
+   d="m 285.9,344.1 c 20.9,-11.1 43.4,-13.4 61.8,-9.1 41.9,9.9 45.2,41.4 22.9,73.9 -10.2,14.9 -25.3,29.2 -43.5,38.2 -29.9,14.8 -58.5,15.6 -77.3,4.2 -18.9,-11.4 -23.4,-30.6 -16.7,-51 6.9,-21.2 26.2,-43 52.8,-56.2 z"
+   id="path4"
+   inkscape:connector-curvature="0"
+   style="clip-rule:evenodd;fill:#ed1c24;fill-rule:evenodd" />
+	<path
+   class="st1"
+   d="m 351.7,368.2 v 0 c -0.1,1.2 -0.1,2.4 0.1,3.6 0.2,1.3 0.5,2.7 1,4 0.7,1.9 1.7,3.6 2.8,5 1,1.3 2.2,2.3 3.6,3.1 1.7,0.7 3.3,1.1 4.6,1 1.1,0 1.9,-0.3 2.5,-0.8 0.4,-0.4 0.7,-1 0.8,-1.8 0.2,-1.1 0,-2.5 -0.3,-4.3 -0.1,-0.5 -0.2,-0.9 -0.3,-1.4 -0.1,-0.4 -0.3,-0.9 -0.4,-1.3 -0.9,-2.3 -2.1,-4.4 -3.6,-6 -1.3,-1.4 -2.9,-2.4 -4.6,-2.9 -1.8,-0.5 -3.3,-0.5 -4.4,-0.1 -0.7,0.3 -1.3,0.8 -1.6,1.6 z M 350.9,340 c 8.9,-3.3 17.7,-2.6 25.2,1.1 7.8,3.8 14.1,10.9 17.4,19.8 1.9,5 2.6,10.2 2.3,15.1 -0.3,5 -1.6,9.8 -4,14.1 -0.1,0.2 -0.2,0.5 -0.5,0.9 -0.2,0.4 -0.4,0.7 -0.5,0.9 -3.6,5.9 -7.3,10.2 -11,13.3 -3.8,3.1 -7.5,5.1 -11.2,6.5 -9.1,3.4 -18.1,2.7 -25.7,-1 -8,-3.9 -14.4,-10.9 -17.7,-19.9 -1.8,-4.9 -2.7,-9.8 -2.5,-14.5 0.2,-4.8 1.3,-9.4 3.4,-13.7 1.6,-3.2 4.1,-6.9 7.4,-10.4 2.9,-3.1 6.4,-6.1 10.3,-8.7 v 0 c 1,-0.7 2.1,-1.3 3.2,-1.9 1.5,-0.6 2.7,-1.2 3.9,-1.6 z"
+   id="path6"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+	<path
+   class="st1"
+   d="m 309.3,356.4 15.2,-5.7 c 1.4,-0.5 2.9,0.2 3.4,1.6 0,0.1 0.1,0.1 0.1,0.2 l 21.6,57.7 c 0.2,0.3 0.3,0.7 0.3,1.1 0.1,0.8 -0.2,1.6 -0.8,2.1 l -7.1,7.1 c -0.3,0.3 -0.6,0.5 -1,0.6 l -12.5,4.6 c -0.8,0.3 -1.7,0.2 -2.4,-0.3 v 0 L 312,416 l 2.7,7.1 c 0.2,0.4 0.4,0.9 0.4,1.4 0,0.7 -0.3,1.4 -0.8,1.8 l -7.1,7.1 c -0.3,0.3 -0.6,0.5 -0.9,0.6 v 0 l -15.3,5.7 c -1.4,0.5 -2.9,-0.2 -3.4,-1.6 l -21.8,-58.3 c -0.4,-1.1 -0.1,-2.3 0.8,-3 l 6.9,-6.9 c 0.3,-0.3 0.6,-0.5 1,-0.6 l 13.3,-4.9 c 0.8,-0.3 1.7,-0.2 2.4,0.3 v 0 l 13,8.5 -2.4,-6.4 c -0.4,-1 -0.1,-2.1 0.6,-2.8 l 7,-7.1 c 0.3,-0.2 0.6,-0.4 0.9,-0.5 z"
+   id="path8"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+	<path
+   class="st1"
+   d="m 257.5,451.9 c -6,0.6 -11.2,-0.5 -15.7,-3.2 -6.1,-3.6 -10.6,-9.9 -13.7,-18 l -12,-32.2 c -0.4,-1.1 -0.1,-2.3 0.8,-3 l 6.9,-6.9 c 0.3,-0.3 0.6,-0.5 0.9,-0.6 v 0 l 15.3,-5.7 c 1.4,-0.5 2.9,0.2 3.4,1.6 l 12.3,32.9 c 0.7,1.9 1.7,3.7 3.1,4.9 1,0.9 2.3,1.5 3.9,1.6 0.3,0 0.7,0 1,0 0,-0.6 -0.1,-1.2 -0.2,-1.8 -0.2,-0.9 -0.4,-1.8 -0.8,-2.8 l -12.3,-32.9 c -0.4,-1.1 -0.1,-2.3 0.8,-3 l 6.7,-6.7 c 0.3,-0.4 0.7,-0.7 1.2,-0.9 l 15.3,-5.7 c 1.4,-0.5 2.9,0.2 3.4,1.6 l 12.2,32.6 c 1.9,5 2.8,9.8 2.7,14.3 -0.1,4.5 -1.1,8.7 -3.2,12.5 -1.7,3 -4.9,6.1 -8.1,9.2 -0.7,0.7 -1.5,1.4 -2.1,2 l -0.1,0.1 c -1.2,1.3 -2.6,2.5 -4.1,3.5 -5.1,3.6 -11.2,5.9 -17.6,6.6 z"
+   id="path10"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+	<polygon
+   class="st2"
+   points="327.6,423.2 306.7,409.3 312.3,424.5 312.3,424.5 312.4,424.5 305.3,431.5 290,437.3 268.2,379 275.3,371.9 288.7,367 308.4,379.9 303.2,366 310.2,358.9 325.4,353.2 347.3,411.5 340.2,418.6 "
+   id="polygon12"
+   style="clip-rule:evenodd;fill-rule:evenodd" />
+	<path
+   class="st2"
+   d="m 351.9,342.5 c 16.7,-6.2 33.2,3.2 39.2,19.3 3.5,9.3 2.8,19.3 -1.5,27.2 -0.2,0.5 -0.5,1 -0.8,1.5 -6.9,11.4 -14,16.1 -20.9,18.7 -17.2,6.4 -33.9,-3.2 -40,-19.3 -3.4,-9.2 -3.1,-18.2 0.8,-26.1 2.8,-5.7 8.9,-12.9 16.8,-18.1 v 0 c 1.9,-1.3 4.1,-2.4 6.4,-3.2 z m -2.8,25.2 c 0,-0.1 0.1,-0.2 0.1,-0.3 1.1,-3.6 4.7,-4.7 9.2,-3.5 4.6,1.2 8.1,5.5 10,10.5 0.4,1 0.7,2 0.9,3.1 0.9,4.1 0.5,7 -1.2,8.6 -2,1.9 -5.7,2 -9.9,0.2 -3.5,-1.9 -6.2,-5.4 -7.8,-9.6 -1.2,-3 -1.6,-6.1 -1.3,-9 z"
+   id="path14"
+   inkscape:connector-curvature="0"
+   style="clip-rule:evenodd;fill-rule:evenodd" />
+	<polygon
+   class="st2"
+   points="300.9,393.7 312.3,424.5 297,430.2 275.3,371.9 288.7,367 321.2,388.2 310.2,358.9 325.4,353.2 347.3,411.5 334.7,416.1 "
+   id="polygon16"
+   style="clip-rule:evenodd;fill-rule:evenodd" />
+	<polygon
+   class="st3"
+   points="296.8,388.6 309.8,423.3 298.2,427.6 277.9,373.1 288.4,369.2 325.2,393.3 312.8,360.1 324.2,355.8 344.7,410.3 334.9,413.9 "
+   id="polygon18"
+   style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
+	<polygon
+   class="st4"
+   points="314.6,360.9 323.4,357.6 342.8,409.5 335.1,412.3 294,385 308,422.5 299.1,425.8 279.7,374 288.2,370.8 328,396.8 "
+   id="polygon20"
+   style="clip-rule:evenodd;fill:#f8da27;fill-rule:evenodd" />
+	<path
+   class="st2"
+   d="m 351.9,342.5 c 16.7,-6.2 33.2,3.2 39.2,19.3 6,16.1 -0.3,34.1 -16.9,40.3 -16.7,6.2 -33.2,-3.2 -39.2,-19.3 -6.1,-16.2 0.2,-34.1 16.9,-40.3 z m 5.5,14.7 c -8.4,3.1 -9.9,11.7 -7,19.5 2.9,7.7 9.6,13.2 18.1,10.1 8.4,-3.2 9.9,-11.7 7,-19.5 -3,-7.7 -9.7,-13.2 -18.1,-10.1 z"
+   id="path22"
+   inkscape:connector-curvature="0"
+   style="clip-rule:evenodd;fill-rule:evenodd" />
+	<path
+   class="st3"
+   d="m 352.6,344.4 c 15.6,-5.8 31,3 36.7,18.2 5.6,15.1 -0.2,31.9 -15.8,37.8 -15.6,5.8 -31,-3.1 -36.7,-18.2 -5.6,-15.2 0.1,-32 15.8,-37.8 z m 4.1,10.9 c -9.5,3.5 -11.5,13.3 -8.2,22.1 3.3,8.8 11.1,14.8 20.7,11.3 9.5,-3.6 11.5,-13.3 8.2,-22 -3.4,-8.8 -11.2,-14.9 -20.7,-11.4 z"
+   id="path24"
+   inkscape:connector-curvature="0"
+   style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
+	<path
+   class="st4"
+   d="m 356.2,354 c 9.9,-3.7 18.7,2.2 22.4,12.1 3.7,9.9 0.9,20.1 -9,23.8 -9.9,3.7 -18.8,-2.2 -22.5,-12.1 -3.7,-9.8 -0.8,-20.1 9.1,-23.8 z m -3.1,-8.3 c 14.6,-5.5 29.4,2.6 34.9,17.3 5.5,14.7 -0.4,30.5 -14.9,35.9 -14.6,5.4 -29.4,-2.6 -34.9,-17.3 -5.6,-14.7 0.2,-30.5 14.9,-35.9 z"
+   id="path26"
+   inkscape:connector-curvature="0"
+   style="clip-rule:evenodd;fill:#f8da27;fill-rule:evenodd" />
+	<path
+   class="st2"
+   d="m 255.9,449.4 c -12,0.7 -20.5,-7 -25.2,-19.7 l -12,-32.2 7,-7.1 15.3,-5.7 12.3,32.9 c 1.6,4.2 4.5,7.9 9.4,8.1 1.4,0.1 3.3,-0.1 3.7,-1.9 0.1,-2.1 -0.3,-4.2 -1.1,-6.2 l -12.3,-32.9 7.1,-7.1 v 0 0 0 0 l 15.2,-5.7 12.2,32.6 c 3.5,9.4 3.5,17.8 -0.3,24.6 -1.8,3.2 -6.1,7 -9.7,10.6 v 0 c -5.5,5.8 -13.8,9.3 -21.6,9.7 z"
+   id="path28"
+   inkscape:connector-curvature="0"
+   style="clip-rule:evenodd;fill-rule:evenodd" />
+	<path
+   class="st2"
+   d="m 276,438.7 0.1,0.2 -3.2,1.2 c -0.1,0 -0.2,0.1 -0.2,0.1 -0.1,0 -0.2,0.1 -0.3,0.1 l -3.2,1.2 -0.1,-0.2 c -15.3,4 -25.8,-4 -31.3,-18.7 l -12,-32.2 15.3,-5.7 12.3,32.9 c 1.6,4.2 4.5,7.9 9.4,8.1 1.4,0.1 2.9,-0.2 4.2,-0.7 1.4,-0.5 2.7,-1.3 3.7,-2.3 3.5,-3.3 3.3,-8 1.7,-12.2 l -12.4,-32.9 15.3,-5.7 12.2,32.6 c 5.5,14.8 2.8,27.3 -11.5,34.2 z"
+   id="path30"
+   inkscape:connector-curvature="0"
+   style="clip-rule:evenodd;fill-rule:evenodd" />
+	<path
+   class="st3"
+   d="m 273.4,437.7 v 0 l -1.3,0.5 c -0.1,0 -0.2,0.1 -0.3,0.1 -0.1,0 -0.2,0.1 -0.3,0.1 l -1.3,0.5 v 0 C 255,443.7 244.9,436.4 239.6,422 l -11.3,-30.3 11.5,-4.3 11.6,31 c 1.9,5 5.5,9.2 11.2,9.4 1.7,0.1 3.4,-0.2 5,-0.8 1.6,-0.6 3.2,-1.5 4.4,-2.7 4.1,-3.9 4.1,-9.4 2.2,-14.4 l -11.6,-31 11.5,-4.3 11.5,30.7 c 5.4,14.4 2.5,26.1 -12.2,32.4 z"
+   id="path32"
+   inkscape:connector-curvature="0"
+   style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
+	<path
+   class="st4"
+   d="m 230.1,392.5 8.9,-3.3 11.1,29.7 c 3.7,9.8 11.5,11.8 18,9.4 6.5,-2.5 11.2,-9.1 7.4,-18.9 l -11.1,-29.7 8.9,-3.3 11,29.4 c 4.4,11.7 4.4,24.5 -12.7,31.2 v 0 c -0.1,0 -0.2,0.1 -0.3,0.1 -0.1,0 -0.2,0.1 -0.3,0.1 v 0 c -16.8,6 -25.7,-3.6 -30.2,-15.6 z"
+   id="path34"
+   inkscape:connector-curvature="0"
+   style="clip-rule:evenodd;fill:#f8da27;fill-rule:evenodd" />
+	<path
+   class="st5"
+   d="m 305.5,366.4 5.5,-5.6 3.1,8.3 -5.5,5.6 z m 4.1,11.1 5.5,-5.6 1.2,3.1 -5.5,5.6 z"
+   id="path36"
+   inkscape:connector-curvature="0"
+   style="clip-rule:evenodd;fill:#58585a;fill-rule:evenodd" />
+	<path
+   class="st5"
+   d="m 255.3,385.2 5.5,-5.6 3.1,8.3 -5.5,5.6 z m 4.1,11.1 5.5,-5.6 1.2,3.1 -5.5,5.6 z"
+   id="path38"
+   inkscape:connector-curvature="0"
+   style="clip-rule:evenodd;fill:#58585a;fill-rule:evenodd" />
+	<path
+   class="st5"
+   d="m 227.9,416.7 5.5,-5.6 3.1,8.3 -5.5,5.6 z m 4.2,11.1 5.5,-5.6 v 0 l 0.2,0.4 c 0.4,0.9 0.7,1.8 1.1,2.7 l -5.6,5.6 z"
+   id="path40"
+   inkscape:connector-curvature="0"
+   style="clip-rule:evenodd;fill:#58585a;fill-rule:evenodd" />
+	<path
+   class="st5"
+   d="m 364.2,364.7 5.6,-5.6 c 2,1.6 3.7,3.9 4.9,6.5 l -5.5,5.5 c -1.2,-2.4 -2.9,-4.7 -5,-6.4 z m 6.2,9.1 5.4,-5.5 c 0.4,1.2 0.6,2.3 0.8,3.5 l -5.3,5.3 V 377 c -0.2,-1 -0.5,-2.1 -0.9,-3.2 z"
+   id="path42"
+   inkscape:connector-curvature="0"
+   style="clip-rule:evenodd;fill:#58585a;fill-rule:evenodd" />
+</g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b5c61c9..a168df0 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body::-webkit-scrollbar {
+    display: none;
+}
diff --git a/frontend/src/library/button.tsx b/frontend/src/library/button.tsx
index d9f5396..319076e 100644
--- a/frontend/src/library/button.tsx
+++ b/frontend/src/library/button.tsx
@@ -11,7 +11,14 @@ type ButtonProps = {
 };
 
 function Button({ onClick, children }: ButtonProps) {
-    return <button onClick={onClick}>{children}</button>;
+    return (
+        <button
+            className="text-white bg-red-600 px-5 py-2 rounded-3xl text-md shadow-md transform transition-transform hover:scale-105 hover:shadow-glow hover:bg-red-900 active:bg-black active:scale-95 active:shadow-none"
+            onClick={onClick}
+        >
+            {children}
+        </button>
+    );
 }
 
 export default Button;
diff --git a/frontend/src/library/heading.tsx b/frontend/src/library/heading.tsx
index e69de29..510cf54 100644
--- a/frontend/src/library/heading.tsx
+++ b/frontend/src/library/heading.tsx
@@ -0,0 +1,13 @@
+type InputProps = {
+    name?: string;
+};
+
+const heading = ({ name }: InputProps) => {
+    return (
+        <div>
+            <h1 className="text-white text-3xl font-bold font-serif">{name}</h1>
+        </div>
+    );
+};
+
+export default heading;
diff --git a/frontend/src/pages/PlayOptions.tsx b/frontend/src/pages/PlayOptions.tsx
index 6600ba6..df10c29 100644
--- a/frontend/src/pages/PlayOptions.tsx
+++ b/frontend/src/pages/PlayOptions.tsx
@@ -1,26 +1,61 @@
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import Input from '../library/input';
 import Button from '../library/button';
+import Heading from '../library/heading';
+import '../index.css';
 
-function PlayOptions() {
+const PlayOptions = () => {
+    const [gameCode, setGameCode] = useState('');
     const navigate = useNavigate();
-    function handleCreateGame() {
-        console.log('Creating a new game');
+    const CreateGame = () => {
+        // Logic to create a game
+        console.log('Create Game');
         navigate('/game');
-    }
+    };
+
+    const JoinGame = () => {
+        // Logic to join a game
+        console.log('Join Game with code:', gameCode);
+    };
 
     return (
-        <>
-            <div>
-                <h1>Create a new game</h1>
-                <Button onClick={handleCreateGame}>Create game</Button>
-            </div>
-            <div>
-                <h1>Join a game</h1>
-                <Input placeholder="Enter game code" />
+        <div className="flex flex-col items-center justify-center h-screen bg-gradient-to-r from-neutral-950 via-red-950 to-neutral-950">
+            <div className="max-h-screen w-screen max-w-screen-md p-1 md:items-center md:justify-center">
+                <div className="flex items-center justify-center p-3 mb-10 ">
+                    <img
+                        src="/UNO_Logo.svg"
+                        alt="UNO Logo"
+                        className="h-12 w-auto mr-2"
+                    />
+                    <h1 className="text-white text-4xl font-bold font-serif">
+                        Ready for Action?
+                    </h1>
+                </div>
+                <div className="flex flex-col md:flex-row w-full md:max-w-screen-md space-y-10 md:space-y-0 md:space-x-10 p-10">
+                    <div className="bg-gradient-to-r from-red-900 via-blue-950 to-red-900 flex-1 w-full p-5 border-2 border-spacing-2 border-opacity-80 border-red-950 rounded-xl shadow-md flex flex-col items-center">
+                        <div className="pb-12 pt-3">
+                            <Heading name="Create a new game" />
+                        </div>
+                        <Button onClick={CreateGame}>New Game</Button>
+                    </div>
+                    <div className="bg-gradient-to-r from-red-900 via-green-950 to-red-900 flex-1 w-full p-3 border-2 border-spacing-2 border-opacity-80 border-red-950 rounded-xl shadow-md flex flex-col items-center">
+                        <div className="pt-2 pb-2">
+                            <Heading name="Join an existing Game" />
+                        </div>
+                        <div className="p-2 pb-2 w-full justify-self-center">
+                            <input
+                                placeholder="Enter the Game Code"
+                                value={gameCode}
+                                onChange={(e) => setGameCode(e.target.value)}
+                                className="border-2 border-red-600 rounded-lg p-1 mb-4 text-md w-full bg-black text-white"
+                            />
+                        </div>
+                        <Button onClick={JoinGame}>Join Game</Button>
+                    </div>
+                </div>
             </div>
-        </>
+        </div>
     );
-}
+};
 
 export default PlayOptions;