feat: show code in ranking page

1 files changed, 43 insertions, 0 deletions

diff --git a/frontend/app/components/Gaming/CodePopover.tsx b/frontend/app/components/Gaming/CodePopover.tsx
new file mode 100644
index 0000000..a574a77
--- /dev/null
+++ b/frontend/app/components/Gaming/CodePopover.tsx
@@ -0,0 +1,43 @@
+import { Popover } from "@base-ui-components/react/popover";
+import { faCode, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { calcCodeSize } from "../../states/play";
+import BorderedContainer from "../BorderedContainer";
+import CodeBlock from "../Gaming/CodeBlock";
+
+type Props = {
+	code: string;
+};
+
+export default function CodePopover({ code }: Props) {
+	const codeSize = calcCodeSize(code);
+
+	return (
+		<Popover.Root>
+			<Popover.Trigger>
+				<FontAwesomeIcon icon={faCode} fixedWidth />
+			</Popover.Trigger>
+			<Popover.Portal>
+				<Popover.Positioner>
+					<Popover.Popup>
+						<BorderedContainer className="grow flex flex-col gap-4">
+							<div className="flex flex-row gap-2 items-center">
+								<div className="grow font-semibold text-lg">
+									コードサイズ: {codeSize}
+								</div>
+								<Popover.Close className="p-1 bg-gray-50 border-1 border-gray-300 rounded-sm">
+									<FontAwesomeIcon
+										icon={faXmark}
+										fixedWidth
+										className="text-gray-500"
+									/>
+								</Popover.Close>
+							</div>
+							<CodeBlock code={code} language="php" />
+						</BorderedContainer>
+					</Popover.Popup>
+				</Popover.Positioner>
+			</Popover.Portal>
+		</Popover.Root>
+	);
+}