aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend/app/components/Gaming/CodePopover.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/app/components/Gaming/CodePopover.tsx')
-rw-r--r--frontend/app/components/Gaming/CodePopover.tsx62
1 files changed, 31 insertions, 31 deletions
diff --git a/frontend/app/components/Gaming/CodePopover.tsx b/frontend/app/components/Gaming/CodePopover.tsx
index 91245df..c4065ed 100644
--- a/frontend/app/components/Gaming/CodePopover.tsx
+++ b/frontend/app/components/Gaming/CodePopover.tsx
@@ -7,39 +7,39 @@ import BorderedContainer from "../BorderedContainer";
import CodeBlock from "../Gaming/CodeBlock";
type Props = {
- code: string;
- language: SupportedLanguage;
+ code: string;
+ language: SupportedLanguage;
};
export default function CodePopover({ code, language }: Props) {
- const codeSize = calcCodeSize(code, language);
+ const codeSize = calcCodeSize(code, language);
- 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={language} />
- </BorderedContainer>
- </Popover.Popup>
- </Popover.Positioner>
- </Popover.Portal>
- </Popover.Root>
- );
+ 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={language} />
+ </BorderedContainer>
+ </Popover.Popup>
+ </Popover.Positioner>
+ </Popover.Portal>
+ </Popover.Root>
+ );
}