diff --git a/src/Editor.tsx b/src/Editor.tsx index 72b51db..e80193f 100644 --- a/src/Editor.tsx +++ b/src/Editor.tsx @@ -70,9 +70,9 @@ export const Editor: FC = () => { }, [codeCopied]); return ( - + {/* EDITOR TOP BAR */} -
+
{/* CODE EDITOR */} -
+
-
- $setCode(code)} - highlight={(code) => hightlightWithLineNumbers(code, languages.hcl)} - textareaId="codeArea" - className="editor pt-3" - /> -
+
+ +
+ $setCode(code)} + highlight={(code) => hightlightWithLineNumbers(code, languages.hcl)} + textareaId="codeArea" + className="editor pt-3" + />
); diff --git a/src/Preview.tsx b/src/Preview.tsx index e602fcc..2cb809f 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -1,5 +1,6 @@ import { Button } from "@/components/Button"; import { ResizablePanel } from "@/components/Resizable"; +import { useTheme } from "@/contexts/theme"; import { type Diagnostic, type InternalDiagnostic, @@ -10,7 +11,8 @@ import { useDebouncedValue } from "@/hooks/debounce"; import { useStore } from "@/store"; import { cn } from "@/utils/cn"; import { ActivityIcon, ExternalLinkIcon, LoaderIcon } from "lucide-react"; -import { type FC, useEffect, useState } from "react"; +import { AnimatePresence, motion } from "motion/react"; +import { type FC, useEffect, useMemo, useState } from "react"; export const Preview: FC = () => { const $wasmState = useStore((state) => state.wasmState); @@ -87,9 +89,23 @@ export const Preview: FC = () => { )} >
-

- Parameters -

+
+

+ Parameters +

+ + + {isDebouncing && $wasmState === "loaded" ? ( + + + + ) : null} + +
@@ -98,9 +114,6 @@ export const Preview: FC = () => { "flex h-full w-full items-center justify-center overflow-x-clip rounded-xl border p-4", output && "block overflow-y-scroll", )} - style={{ - opacity: isDebouncing && $wasmState === "loaded" ? 0.5 : 1, - }} > {output ? (
@@ -183,60 +196,75 @@ const ErrorPane = () => { const $errors = useStore((state) => state.errors); const $toggleShowError = useStore((state) => state.toggleShowError); - if ($errors.diagnostics.length === 0) { - return null; - } + const hasErrors = useMemo(() => $errors.diagnostics.length > 0, [$errors]); return ( <> - {/* - * biome-ignore lint/a11y/useKeyWithClickEvents: key events don't seem to - * work for divs, and I'm otherwise not sure how to make this element - * more accesible. But I think it's fine since the functionality is able to - * be used with the button. - */} - + + {$errors.show && hasErrors ? ( + // lint/a11y/useKeyWithClickEvents: key events don't seem to + // work for divs, and I'm otherwise not sure how to make this element + // more accesible. But I think it's fine since the functionality is able to + // be used with the button below. + { + $toggleShowError(false); + }} + > + {/* OVERLAY */} + + ) : null} + -
- + + {hasErrors ? ( + + $toggleShowError()} + aria-label={ + $errors.show ? "Hide error dialog" : "Show error dialog" + } + > +
+
-
-
- {$errors.diagnostics.map((diagnostic, index) => ( - - ))} -
-
-
+ + {$errors.show ? ( + +
+ {$errors.diagnostics.map((diagnostic, index) => ( + + ))} +
+
+ ) : null} +
+ + ) : null} + ); };