diff --git a/apps/frontend/components/EditorDescription.tsx b/apps/frontend/components/EditorDescription.tsx index b13056c3b2..49b758f61d 100644 --- a/apps/frontend/components/EditorDescription.tsx +++ b/apps/frontend/components/EditorDescription.tsx @@ -8,54 +8,12 @@ import { AccordionTrigger } from '@/components/ui/accordion' import { Badge } from '@/components/ui/badge' -import { - Dialog, - DialogContent, - DialogHeader, - DialogTitle, - DialogTrigger -} from '@/components/ui/dialog' import { convertToLetter } from '@/lib/utils' -import CopyIcon from '@/public/24_copy.svg' -import compileIcon from '@/public/compileVersion.svg' -import copyIcon from '@/public/copy.svg' -import copyCompleteIcon from '@/public/copyComplete.svg' import type { ContestProblem, ProblemDetail } from '@/types/type' import type { Level } from '@/types/type' -import { motion } from 'framer-motion' import { sanitize } from 'isomorphic-dompurify' -import { FileText } from 'lucide-react' -import Image from 'next/image' -import { useState } from 'react' -import useCopyToClipboard from 'react-use/lib/useCopyToClipboard' -import { toast } from 'sonner' -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger -} from './ui/tooltip' - -const useCopy = () => { - const [, copyToClipboard] = useCopyToClipboard() - - // copiedID is used to show the checkmark icon when the user copies the input/output - const [copiedID, setCopiedID] = useState('') - const [timeoutID, setTimeoutID] = useState(null) - - const copy = (value: string, id: string) => { - copyToClipboard(value) - setCopiedID(id) - - // Clear the timeout if it's already set - // This will prevent the previous setTimeout from executing - timeoutID && clearTimeout(timeoutID) - const timeout = setTimeout(() => setCopiedID(''), 2000) - setTimeoutID(timeout) - } - - return { copiedID, copy } -} +import EditorSampleField from './EditorSampleField' +import ReferenceDialog from './ReferenceDialog' export function EditorDescription({ problem, @@ -66,8 +24,6 @@ export function EditorDescription({ contestProblems?: ContestProblem[] isContest?: boolean }) { - const { copiedID, copy } = useCopy() - const level = problem.difficulty const levelNumber = level.slice(-1) return ( @@ -92,187 +48,34 @@ export function EditorDescription({

Input

-
+
+ +

Output

-
+
+ +
- -
- {problem.problemTestcase.map(({ id, input, output }, index) => { - const whitespaceStyle = - 'color: rgb(53, 129, 250); min-width: 0.5em; display: inline-block;' - const changedInput = input - .replaceAll(/ /g, `␣`) - .replaceAll(/\n/g, `↵\n`) - .replaceAll(/\t/g, `↹`) - const changedOutput = output - .replaceAll(/ /g, `␣`) - .replaceAll(/\n/g, `↵\n`) - .replaceAll(/\t/g, `↹`) - return ( -
-

Sample

- -
-
-
-

- Input {index + 1} -

- - - - {copiedID == `input-${id}` ? ( - copy - ) : ( - - { - copy(input + '\n\n', `input-${id}`) // add newline to the end for easy testing - toast('Successfully copied', { - unstyled: true, - closeButton: false, - icon: copy, - style: { backgroundColor: '#f0f8ff' }, - classNames: { - toast: - 'inline-flex items-center py-2 px-3 rounded gap-2', - title: 'text-primary font-medium' - } - }) - }} - className="cursor-pointer transition-opacity hover:opacity-60" - src={copyIcon} - alt="copy" - width={24} - /> - - )} - - -

Copy

- - - -
-
- 
-
-
- -
-
-

- Output {index + 1} -

- - - - {copiedID == `output-${id}` ? ( - copy - ) : ( - - { - copy(output + '\n\n', `output-${id}`) // add newline to the end for easy testing - toast('Successfully copied', { - unstyled: true, - closeButton: false, - icon: copy, - style: { backgroundColor: '#f0f8ff' }, - classNames: { - toast: - 'inline-flex items-center py-2 px-3 rounded gap-2', - title: 'text-primary font-medium' - } - }) - }} - className="cursor-pointer transition-opacity hover:opacity-60" - src={copyIcon} - alt="copy" - width={24} - /> - - )} - - -

Copy

- - - -
-
- 
-
-
-
-
- ) - })} -
+
-
-

Time Limit

-

Memory Limit

-

Source

+
+

Time Limit

+

Memory Limit

+

Source

-
-

{problem.timeLimit} ms

-

{problem.memoryLimit} MB

-

{problem.source}

+
+

{problem.timeLimit} ms

+

{problem.memoryLimit} MB

+

{problem.source}

@@ -295,112 +98,7 @@ export function EditorDescription({
- - - compile - - - - - Compiler Version Document - - -
- - - - - - - - - - - - - - - - - - - - - - - - - -
LanguageCompiler Version Document
C -
- - - - gcc 13.2.0 -
-
- - - - c11 -
-
C++ -
- - - - g++ 13.2.0 -
-
- - - - c++ 14 -
-
Java -
- - - - openjdk 17.0.11 -
-
Python -
- - - - python 3.12.3 -
-
-
- - +
) diff --git a/apps/frontend/components/EditorSampleField.tsx b/apps/frontend/components/EditorSampleField.tsx new file mode 100644 index 0000000000..be3c2530b9 --- /dev/null +++ b/apps/frontend/components/EditorSampleField.tsx @@ -0,0 +1,176 @@ +'use client' + +import CopyIcon from '@/public/24_copy.svg' +import copyIcon from '@/public/copy.svg' +import copyCompleteIcon from '@/public/copyComplete.svg' +import type { ProblemDetail } from '@/types/type' +import { motion } from 'framer-motion' +import { sanitize } from 'isomorphic-dompurify' +import Image from 'next/image' +import { useState } from 'react' +import { useRef } from 'react' +import { useCopyToClipboard } from 'react-use' +import { toast } from 'sonner' +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger +} from './ui/tooltip' + +interface EditorSampleFieldProps { + problemTestCase: ProblemDetail['problemTestcase'] +} + +const useCopy = () => { + const [, copyToClipboard] = useCopyToClipboard() + + // copiedID is used to show the checkmark icon when the user copies the input/output + const [copiedID, setCopiedID] = useState('') + const timeoutIDRef = useRef(null) + + const copy = (value: string, id: string) => { + copyToClipboard(value) + setCopiedID(id) + + // Clear the timeout if it's already set + // This will prevent the previous setTimeout from executing + if (timeoutIDRef.current) { + clearTimeout(timeoutIDRef.current) + } + timeoutIDRef.current = setTimeout(() => { + setCopiedID('') + timeoutIDRef.current = null + }, 2000) + } + + return { copiedID, copy } +} + +export default function EditorSampleField({ + problemTestCase +}: EditorSampleFieldProps) { + const { copiedID, copy } = useCopy() + return problemTestCase.map(({ id, input, output }, index) => { + const whitespaceStyle = + 'color: rgb(53, 129, 250); min-width: 0.5em; display: inline-block;' + const changedInput = input + .replaceAll(/ /g, `␣`) + .replaceAll(/\n/g, `↵\n`) + .replaceAll(/\t/g, `↹`) + const changedOutput = output + .replaceAll(/ /g, `␣`) + .replaceAll(/\n/g, `↵\n`) + .replaceAll(/\t/g, `↹`) + return ( +
+

Sample

+ +
+
+
+

+ Input {index + 1} +

+ +
+
+ 
+
+
+ +
+
+

+ Output {index + 1} +

+ +
+
+ 
+
+
+
+
+ ) + }) +} + +function CopyButton({ + id, + title, + content, + copiedID, + copy +}: { + id: number + title: string + content: string + copiedID: string + copy: (value: string, id: string) => void +}) { + return ( + + + + {copiedID == `${title}-${id}` ? ( + copy + ) : ( + + { + copy(content + '\n\n', `${title}-${id}`) // add newline to the end for easy testing + toast('Successfully copied', { + unstyled: true, + closeButton: false, + icon: copy, + style: { backgroundColor: '#f0f8ff' }, + classNames: { + toast: 'inline-flex items-center py-2 px-3 rounded gap-2', + title: 'text-primary font-medium' + } + }) + }} + className="cursor-pointer transition-opacity hover:opacity-60" + src={copyIcon} + alt="copy" + width={24} + /> + + )} + + +

Copy

+ + + + ) +} diff --git a/apps/frontend/components/ReferenceDialog.tsx b/apps/frontend/components/ReferenceDialog.tsx new file mode 100644 index 0000000000..e8785803a8 --- /dev/null +++ b/apps/frontend/components/ReferenceDialog.tsx @@ -0,0 +1,115 @@ +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger +} from '@/components/ui/dialog' +import compileIcon from '@/public/compileVersion.svg' +import { FileText } from 'lucide-react' +import Image from 'next/image' + +export default function ReferenceDialog() { + return ( + + + compile + + + + + Compiler Version Document + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
LanguageCompiler Version Document
C +
+ + + + gcc 13.2.0 +
+
+ + + + c11 +
+
C++ +
+ + + + g++ 13.2.0 +
+
+ + + + c++ 14 +
+
Java +
+ + + + openjdk 17.0.11 +
+
Python +
+ + + + python 3.12.3 +
+
+
+ + + ) +}