diff options
Diffstat (limited to 'frontend')
5 files changed, 36 insertions, 7 deletions
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx index 69da5d9..b1b6f80 100644 --- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx +++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx @@ -1,7 +1,6 @@ import { useAtomValue } from "jotai"; import React, { useRef, useState } from "react"; import { Link } from "react-router"; -import SubmitButton from "../../components/SubmitButton"; import { gamingLeftTimeSecondsAtom, scoreAtom, @@ -11,7 +10,9 @@ import type { PlayerProfile } from "../../types/PlayerProfile"; import BorderedContainer from "../BorderedContainer"; import LeftTime from "../Gaming/LeftTime"; import Problem from "../Gaming/Problem"; +import SubmitButton from "../SubmitButton"; import SubmitStatusLabel from "../SubmitStatusLabel"; +import ThreeColumnLayout from "../ThreeColumnLayout"; import UserIcon from "../UserIcon"; function calcCodeSize(code: string): number { @@ -87,7 +88,7 @@ export default function GolfPlayAppGaming({ </div> </Link> </div> - <div className="grow grid grid-cols-3 divide-x divide-gray-300"> + <ThreeColumnLayout> <Problem title={problemTitle} description={problemDescription} @@ -142,7 +143,7 @@ export default function GolfPlayAppGaming({ 過去の提出結果を閲覧する機能は現在実装中です。それまでは提出コードをお手元に保管しておいてください。 </p> </div> - </div> + </ThreeColumnLayout> </div> ); } diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx index 8e2b565..081212e 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx @@ -9,6 +9,7 @@ import LeftTime from "../Gaming/LeftTime"; import Problem from "../Gaming/Problem"; import ScoreBar from "../Gaming/ScoreBar"; import SubmitResult from "../Gaming/SubmitResult"; +import ThreeColumnLayout from "../ThreeColumnLayout"; import UserIcon from "../UserIcon"; type Props = { @@ -106,7 +107,7 @@ export default function GolfWatchAppGaming1v1({ bgA="bg-orange-400" bgB="bg-purple-400" /> - <div className="grow grid grid-cols-3 p-4 gap-4"> + <ThreeColumnLayout> <CodeBlock code={codeA} language="php" /> <div className="flex flex-col gap-4"> <div className="grid grid-cols-2 gap-4"> @@ -120,7 +121,7 @@ export default function GolfWatchAppGaming1v1({ /> </div> <CodeBlock code={codeB} language="php" /> - </div> + </ThreeColumnLayout> </div> ); } diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx index f3a377b..06a2376 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx @@ -4,6 +4,7 @@ import { gamingLeftTimeSecondsAtom } from "../../states/watch"; import LeftTime from "../Gaming/LeftTime"; import Problem from "../Gaming/Problem"; import RankingTable from "../Gaming/RankingTable"; +import TwoColumnLayout from "../TwoColumnLayout"; type RankingEntry = components["schemas"]["RankingEntry"]; @@ -34,7 +35,7 @@ export default function GolfWatchAppGamingMultiplayer({ </div> <div className="font-bold flex justify-between my-auto"></div> </div> - <div className="grow grid grid-cols-2 p-4 gap-4"> + <TwoColumnLayout> <Problem title={problemTitle} description={problemDescription} @@ -44,7 +45,7 @@ export default function GolfWatchAppGamingMultiplayer({ <div className="text-center text-xl font-bold">順位表</div> <RankingTable ranking={ranking} /> </div> - </div> + </TwoColumnLayout> </div> ); } diff --git a/frontend/app/components/ThreeColumnLayout.tsx b/frontend/app/components/ThreeColumnLayout.tsx new file mode 100644 index 0000000..42533b7 --- /dev/null +++ b/frontend/app/components/ThreeColumnLayout.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +type Props = { + children: React.ReactNode; +}; + +export default function ThreeColumnLayout({ children }: Props) { + return ( + <div className="grow grid grid-cols-3 divide-x divide-gray-300"> + {children} + </div> + ); +} diff --git a/frontend/app/components/TwoColumnLayout.tsx b/frontend/app/components/TwoColumnLayout.tsx new file mode 100644 index 0000000..980bf4d --- /dev/null +++ b/frontend/app/components/TwoColumnLayout.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +type Props = { + children: React.ReactNode; +}; + +export default function TwoColumnLayout({ children }: Props) { + return ( + <div className="grow grid grid-cols-2 divide-x divide-gray-300"> + {children} + </div> + ); +} |