feat: implement text diff tool

This commit is contained in:
2024-05-14 22:35:27 +02:00
parent 91fe326261
commit 9582eab403
4 changed files with 47 additions and 19 deletions

View File

@@ -1,10 +1,11 @@
import { PropsWithChildren } from "react";
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,
title: toolGroups.text.tools.diff.longTitle,
description: toolGroups.text.tools.diff.description,
robots: {
googleBot: {
index: true,
@@ -12,6 +13,6 @@ export const metadata: Metadata = {
},
};
export default function Layout({ children }: { children: React.ReactNode }) {
export default function Layout({ children }: PropsWithChildren) {
return children;
}

View File

@@ -5,16 +5,13 @@ import { Panel, PanelGroup } from "react-resizable-panels";
import { PERSISTENCE_KEY } from "@/config/persistence-keys";
import { toolGroups } from "@/config/tools";
import { cn } from "@/lib/style";
import { DiffEditor } from "@/components/ui/diff-editor";
import { Editor } from "@/components/ui/editor";
import * as Button from "@/components/buttons";
import { Configuration } from "@/components/configuration";
import { Configurations } from "@/components/configurations";
import { ControlMenu } from "@/components/control-menu";
import * as Icon from "@/components/icons";
import * as icons from "@/components/icons";
import { Rows } from "@/components/icons";
import { LabeledSwitch } from "@/components/labeled-switch";
import { PageRootSection } from "@/components/page-root-section";
import { PageSection } from "@/components/page-section";
@@ -69,6 +66,7 @@ export default function Page() {
),
[setInput1, clearInput1]
);
const input2Control = useMemo(
() => (
<ControlMenu
@@ -93,16 +91,15 @@ export default function Page() {
[diffFullHeight, toggleFullHeight]
);
const hiddenInFullHeightMode = useMemo(() => (diffFullHeight ? "hidden" : ""), [diffFullHeight]);
return (
<PageRootSection
className="h-full"
title={toolGroups.text.tools.inspector_and_case_converter.longTitle}
>
<PageSection title="Configuration" className={cn(diffFullHeight && "hidden")}>
<PageRootSection className="h-full" title={toolGroups.text.tools.diff.longTitle}>
<PageSection title="Configuration" className={hiddenInFullHeightMode}>
<Configurations list={[inlineModeConfig]} />
</PageSection>
<PanelGroup direction="vertical" autoSaveId={PERSISTENCE_KEY.panels.textDiff.vertical}>
<Panel maxSize={VERTICAL_PANEL_MAX_SIZE} className={cn(diffFullHeight && "hidden")}>
<Panel maxSize={VERTICAL_PANEL_MAX_SIZE} className={hiddenInFullHeightMode}>
<PanelGroup
direction="horizontal"
autoSaveId={PERSISTENCE_KEY.panels.textDiff.horizontal}
@@ -121,7 +118,7 @@ export default function Page() {
</Panel>
</PanelGroup>
</Panel>
<PanelResizeHandle direction="horizontal" className={cn(diffFullHeight && "hidden")} />
<PanelResizeHandle direction="horizontal" className={hiddenInFullHeightMode} />
<Panel maxSize={diffPanelMaxSize}>
<PageSection className="h-full" title="Difference" control={diffControl}>
<DiffEditor