diff --git a/.gitignore b/.gitignore index dbaa84d..5aac315 100644 --- a/.gitignore +++ b/.gitignore @@ -45,3 +45,6 @@ firebase-debug.log /test-results/ /playwright-report/ /playwright/.cache/ + +# editors +.idea \ No newline at end of file diff --git a/README.md b/README.md index cb60a50..dafd410 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ pnpm dev # route types will be generated by next.js ## Known issues - Tool search does not set query parameters - - [(Shallow routing) updating search params causes server code to rerun.](https://github.com/vercel/next.js/issues/49668) +- [(Shallow routing) updating search params causes server code to rerun.](https://github.com/vercel/next.js/issues/49668) - [Editor may not resize to fit container size](https://github.com/suren-atoyan/monaco-react/issues/346) - CSS outlines messed up @@ -27,6 +27,8 @@ pnpm dev # route types will be generated by next.js - [x] Formatters - [x] Generators - [ ] Text + - [x] Text Inspector + - [ ] Text Diff - [ ] Graphic - [ ] Settings - [x] Settings menu item diff --git a/app/text/inspector/layout.tsx b/app/text/inspector/layout.tsx new file mode 100644 index 0000000..fdd5631 --- /dev/null +++ b/app/text/inspector/layout.tsx @@ -0,0 +1,17 @@ +import { Metadata } from "next"; + +import { toolGroups } from "@/config/tools"; + +export const metadata: Metadata = { + title: toolGroups.text.tools.inspector_and_case_converter.longTitle, + description: toolGroups.text.tools.inspector_and_case_converter.description, + robots: { + googleBot: { + index: true, + }, + }, +}; + +export default function Layout({ children }: { children: React.ReactNode }) { + return children; +} diff --git a/app/text/inspector/page.tsx b/app/text/inspector/page.tsx new file mode 100644 index 0000000..ed8da03 --- /dev/null +++ b/app/text/inspector/page.tsx @@ -0,0 +1,89 @@ +"use client"; + +import { useCallback, useMemo, useState } from "react"; + +import { toolGroups } from "@/config/tools"; +import { noOp } from "@/lib/base"; +import { + countBytes, + countCharacters, + countLines, + countWords, + modeTitle, + TextTransformMode, + textTransformModes, + transformText, +} from "@/lib/text"; +import { Textarea, TextareaProps } from "@/components/ui/textarea"; +import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; +import * as Button from "@/components/buttons"; +import { ControlMenu } from "@/components/control-menu"; +import { PageRootSection } from "@/components/page-root-section"; +import { PageSection } from "@/components/page-section"; + +export default function Page() { + const [input, setInput] = useState("ConvertMe"); + const [mode, setMode] = useState(TextTransformMode.original); + + const output = transformText(input, mode); + + const stats = useMemo( + () => ({ + characters: countCharacters(input), + words: countWords(input), + lines: countLines(input), + bytes: countBytes(input), + }), + [input] + ); + + const clearInput = useCallback(() => setInput(""), []); + + const onInputChange: TextareaProps["onChange"] = e => setInput(e.currentTarget.value); + const onModeChange = (value: string) => { + if (value && value in TextTransformMode) { + setMode(value as TextTransformMode); + } + }; + + const inputPasteButton = ; + const inputFileButton = ; + const inputClearButton = ; + + const outputCopyButton = ; + + const inputControl = ; + const outputControl = ; + + return ( + + + + {textTransformModes.map(m => ( + + {modeTitle[m]} + + ))} + + + +
+ +