From 1be6007f81488d0f186b44994fe8ee23385059a1 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Thu, 1 Aug 2024 02:02:04 +0900
Subject: feat(frontend): add minimal styling to game pages

---
 .../components/GolfPlayApps/GolfPlayAppGaming.tsx  | 43 ++++++++++++++--------
 1 file changed, 27 insertions(+), 16 deletions(-)

(limited to 'frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx')

diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
index 332cb3c..fc672f5 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
@@ -1,29 +1,40 @@
+type Props = {
+  problem: string;
+  onCodeChange: (code: string) => void;
+  currentScore: number | null;
+};
+
 export default function GolfPlayAppGaming({
   problem,
   onCodeChange,
   currentScore,
-}: {
-  problem: string;
-  onCodeChange: (code: string) => void;
-  currentScore: number | null;
-}) {
+}: Props) {
   const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     onCodeChange(e.target.value);
   };
 
   return (
-    <div style={{ display: "flex" }}>
-      <div style={{ flex: 1, padding: "10px", borderRight: "1px solid #ccc" }}>
-        <div>{problem}</div>
-        <div>
-          {currentScore == null ? "Score: -" : `Score: ${currentScore}`}
+    <div className="min-h-screen flex">
+      <div className="mx-auto flex min-h-full flex-grow">
+        <div className="flex w-1/2 flex-col justify-between p-4">
+          <div>
+            <div className="mb-2 text-xl font-bold">TODO</div>
+            <div className="text-gray-700">{problem}</div>
+          </div>
+          <div className="mb-4 mt-auto">
+            <div className="font-semibold text-green-500">
+              Score: {currentScore == null ? "-" : `${currentScore}`}
+            </div>
+          </div>
+        </div>
+        <div className="w-1/2 p-4 flex">
+          <div className="flex-grow">
+            <textarea
+              className="h-full w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              onChange={handleTextChange}
+            ></textarea>
+          </div>
         </div>
-      </div>
-      <div style={{ flex: 1, padding: "10px" }}>
-        <textarea
-          style={{ width: "100%", height: "100%" }}
-          onChange={handleTextChange}
-        />
       </div>
     </div>
   );
-- 
cgit v1.2.3-70-g09d2