add keyboard shortcut badge for update buttons
This commit is contained in:
parent
9f034f7dcc
commit
f6da5eb0d4
@ -12,7 +12,6 @@ import {
|
|||||||
FaMobile,
|
FaMobile,
|
||||||
FaUndo,
|
FaUndo,
|
||||||
} from "react-icons/fa";
|
} from "react-icons/fa";
|
||||||
|
|
||||||
import { Switch } from "./components/ui/switch";
|
import { Switch } from "./components/ui/switch";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
@ -42,6 +41,7 @@ import useBrowserTabIndicator from "./hooks/useBrowserTabIndicator";
|
|||||||
import TipLink from "./components/core/TipLink";
|
import TipLink from "./components/core/TipLink";
|
||||||
import SelectAndEditModeToggleButton from "./components/select-and-edit/SelectAndEditModeToggleButton";
|
import SelectAndEditModeToggleButton from "./components/select-and-edit/SelectAndEditModeToggleButton";
|
||||||
import { useAppStore } from "./store/app-store";
|
import { useAppStore } from "./store/app-store";
|
||||||
|
import KeyBadge from "./components/core/KeyBadge";
|
||||||
|
|
||||||
const IS_OPENAI_DOWN = false;
|
const IS_OPENAI_DOWN = false;
|
||||||
|
|
||||||
@ -534,7 +534,7 @@ function App() {
|
|||||||
onClick={() => doUpdate(updateInstruction)}
|
onClick={() => doUpdate(updateInstruction)}
|
||||||
className="dark:text-white dark:bg-gray-700 update-btn"
|
className="dark:text-white dark:bg-gray-700 update-btn"
|
||||||
>
|
>
|
||||||
Update
|
Update <KeyBadge letter="enter" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-end gap-x-2 mt-2">
|
<div className="flex items-center justify-end gap-x-2 mt-2">
|
||||||
|
|||||||
23
frontend/src/components/core/KeyBadge.tsx
Normal file
23
frontend/src/components/core/KeyBadge.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { BsArrowReturnLeft } from "react-icons/bs";
|
||||||
|
|
||||||
|
interface KeyBadgeProps {
|
||||||
|
letter: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const KeyBadge: React.FC<KeyBadgeProps> = ({ letter }) => {
|
||||||
|
const icon =
|
||||||
|
letter.toLowerCase() === "enter" || letter.toLowerCase() === "return" ? (
|
||||||
|
<BsArrowReturnLeft />
|
||||||
|
) : (
|
||||||
|
letter.toUpperCase()
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span className="font-mono text-xs ml-2 rounded bg-gray-700 dark:bg-gray-900 text-white py-[2px] px-2">
|
||||||
|
{icon}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default KeyBadge;
|
||||||
@ -3,6 +3,7 @@ import { Textarea } from "../ui/textarea";
|
|||||||
import { Button } from "../ui/button";
|
import { Button } from "../ui/button";
|
||||||
import { addHighlight, getAdjustedCoordinates, removeHighlight } from "./utils";
|
import { addHighlight, getAdjustedCoordinates, removeHighlight } from "./utils";
|
||||||
import { useAppStore } from "../../store/app-store";
|
import { useAppStore } from "../../store/app-store";
|
||||||
|
import KeyBadge from "../core/KeyBadge";
|
||||||
|
|
||||||
interface EditPopupProps {
|
interface EditPopupProps {
|
||||||
event: MouseEvent | null;
|
event: MouseEvent | null;
|
||||||
@ -139,7 +140,7 @@ const EditPopup: React.FC<EditPopupProps> = ({
|
|||||||
className="dark:bg-gray-700 dark:text-white"
|
className="dark:bg-gray-700 dark:text-white"
|
||||||
onClick={() => onUpdate(updateText)}
|
onClick={() => onUpdate(updateText)}
|
||||||
>
|
>
|
||||||
Update
|
Update <KeyBadge letter="enter" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user