chore: add random name button

This commit is contained in:
Steven
2024-01-10 10:50:02 +08:00
parent 2771602e5c
commit 59ee192bf8
8 changed files with 337 additions and 313 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 280 KiB

After

Width:  |  Height:  |  Size: 83 KiB

View File

@ -16,8 +16,8 @@
"@emotion/styled": "^11.11.0",
"@mui/joy": "5.0.0-beta.20",
"@plasmohq/storage": "^1.9.0",
"axios": "^1.6.3",
"classnames": "^2.5.0",
"axios": "^1.6.5",
"classnames": "^2.5.1",
"lodash-es": "^4.17.21",
"lucide-react": "^0.264.0",
"plasmo": "^0.83.1",
@ -31,21 +31,21 @@
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
"@types/chrome": "^0.0.241",
"@types/lodash-es": "^4.17.12",
"@types/node": "^20.10.5",
"@types/react": "^18.2.45",
"@types/node": "^20.10.8",
"@types/react": "^18.2.47",
"@types/react-dom": "^18.2.18",
"@typescript-eslint/eslint-plugin": "^6.16.0",
"@typescript-eslint/parser": "^6.16.0",
"@typescript-eslint/eslint-plugin": "^6.18.1",
"@typescript-eslint/parser": "^6.18.1",
"autoprefixer": "^10.4.16",
"eslint": "^8.56.0",
"eslint-config-prettier": "^8.10.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.33.2",
"long": "^5.2.3",
"postcss": "^8.4.32",
"postcss": "^8.4.33",
"prettier": "^2.8.8",
"protobufjs": "^7.2.5",
"tailwindcss": "^3.4.0",
"tailwindcss": "^3.4.1",
"typescript": "^5.3.3"
},
"manifest": {

File diff suppressed because it is too large Load Diff

View File

@ -50,6 +50,18 @@ const CreateShortcutButton = () => {
});
};
const generateRandomName = () => {
const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
let name = "";
for (let i = 0; i < 8; i++) {
name += chars.charAt(Math.floor(Math.random() * chars.length));
}
setState((state) => ({
...state,
name,
}));
};
const handleNameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setState((state) => ({
...state,
@ -118,7 +130,18 @@ const CreateShortcutButton = () => {
<div className="overflow-x-hidden w-full flex flex-col justify-start items-center">
<div className="w-full flex flex-row justify-start items-center mb-2">
<span className="block w-12 mr-2 shrink-0">Name</span>
<Input className="grow" type="text" placeholder="Unique shortcut name" value={state.name} onChange={handleNameInputChange} />
<Input
className="grow"
type="text"
placeholder="Unique shortcut name"
value={state.name}
onChange={handleNameInputChange}
endDecorator={
<IconButton size="sm" onClick={generateRandomName}>
<Icon.RefreshCcw className="w-4 h-auto cursor-pointer" />
</IconButton>
}
/>
</div>
<div className="w-full flex flex-row justify-start items-center mb-2">
<span className="block w-12 mr-2 shrink-0">Title</span>