Switch icons

This commit is contained in:
momo5502
2025-04-21 19:46:36 +02:00
parent ad5e55a804
commit 4641d60bb1
4 changed files with 59 additions and 19 deletions

62
page/package-lock.json generated
View File

@@ -10,7 +10,6 @@
"dependencies": {
"@radix-ui/react-checkbox": "^1.2.2",
"@radix-ui/react-dialog": "^1.1.10",
"@radix-ui/react-icons": "^1.3.2",
"@radix-ui/react-label": "^2.1.4",
"@radix-ui/react-popover": "^1.1.10",
"@radix-ui/react-scroll-area": "^1.2.5",
@@ -24,6 +23,7 @@
"jszip": "^3.10.1",
"lucide-react": "^0.501.0",
"react": "^19.0.0",
"react-bootstrap-icons": "^1.11.5",
"react-dom": "^19.0.0",
"react-window": "^1.8.11",
"tailwind-merge": "^3.2.0",
@@ -1312,15 +1312,6 @@
}
}
},
"node_modules/@radix-ui/react-icons": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.2.tgz",
"integrity": "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==",
"license": "MIT",
"peerDependencies": {
"react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc"
}
},
"node_modules/@radix-ui/react-id": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
@@ -3507,7 +3498,6 @@
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
"dev": true,
"license": "MIT"
},
"node_modules/js-yaml": {
@@ -3866,6 +3856,18 @@
"dev": true,
"license": "MIT"
},
"node_modules/loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"license": "MIT",
"dependencies": {
"js-tokens": "^3.0.0 || ^4.0.0"
},
"bin": {
"loose-envify": "cli.js"
}
},
"node_modules/lru-cache": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3967,6 +3969,15 @@
"dev": true,
"license": "MIT"
},
"node_modules/object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/optionator": {
"version": "0.9.4",
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -4119,6 +4130,17 @@
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
"license": "MIT"
},
"node_modules/prop-types": {
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"license": "MIT",
"dependencies": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.13.1"
}
},
"node_modules/punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4159,6 +4181,18 @@
"node": ">=0.10.0"
}
},
"node_modules/react-bootstrap-icons": {
"version": "1.11.5",
"resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.11.5.tgz",
"integrity": "sha512-eOhtFJMUqw98IJcfKJsSMZkFHCeNPTTwXZAe9V9d4mT22ARmbrISxPO9GmtWWuf72zQctLeZMGodX/q6wrbYYg==",
"license": "MIT",
"dependencies": {
"prop-types": "^15.7.2"
},
"peerDependencies": {
"react": ">=16.8.6"
}
},
"node_modules/react-dom": {
"version": "19.1.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
@@ -4171,6 +4205,12 @@
"react": "^19.1.0"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"license": "MIT"
},
"node_modules/react-refresh": {
"version": "0.17.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",

View File

@@ -12,7 +12,6 @@
"dependencies": {
"@radix-ui/react-checkbox": "^1.2.2",
"@radix-ui/react-dialog": "^1.1.10",
"@radix-ui/react-icons": "^1.3.2",
"@radix-ui/react-label": "^2.1.4",
"@radix-ui/react-popover": "^1.1.10",
"@radix-ui/react-scroll-area": "^1.2.5",
@@ -26,6 +25,7 @@
"jszip": "^3.10.1",
"lucide-react": "^0.501.0",
"react": "^19.0.0",
"react-bootstrap-icons": "^1.11.5",
"react-dom": "^19.0.0",
"react-window": "^1.8.11",
"tailwind-merge": "^3.2.0",

View File

@@ -20,7 +20,7 @@ import { Popover, PopoverContent, PopoverTrigger } from './components/ui/popover
import { createDefaultSettings } from './settings';
import { SettingsMenu } from './components/settings-menu';
import { PlayIcon, GearIcon, StopIcon } from "@radix-ui/react-icons";
import { PlayFill, StopFill, GearFill } from 'react-bootstrap-icons';
import { StatusIndicator } from './components/status-indicator'
function selectAndReadFile(): Promise<UserFile> {
@@ -99,13 +99,13 @@ function App() {
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 overflow-y-auto">
<SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mr-2 h-4" />
<Button onClick={() => createEmulator()}><PlayIcon /> Run Sample</Button>
<Button onClick={() => loadAndRunUserFile()}><PlayIcon /> Run your .exe</Button>
<Button variant="secondary" onClick={() => emulator?.stop()}><StopIcon /> Stop Emulation</Button>
<Button onClick={() => createEmulator()}><PlayFill /> Run Sample</Button>
<Button onClick={() => loadAndRunUserFile()}><PlayFill /> Run your .exe</Button>
<Button variant="secondary" onClick={() => emulator?.stop()}><StopFill /> Stop Emulation</Button>
<Popover>
<PopoverTrigger asChild>
<Button variant="secondary"><GearIcon /> Settings</Button>
<Button variant="secondary"><GearFill /> Settings</Button>
</PopoverTrigger>
<PopoverContent>
<SettingsMenu settings={settings} onChange={setSettings} />

View File

@@ -1,5 +1,5 @@
import { Badge } from '@/components/ui/badge'
import { CircleIcon } from '@radix-ui/react-icons';
import { CircleFill } from 'react-bootstrap-icons';
export interface StatusIndicatorProps {
running: boolean;
@@ -16,6 +16,6 @@ export function StatusIndicator(props: StatusIndicatorProps) {
}
return (
<Badge variant="outline"><CircleIcon className={getColor() + " rounded-full mr-1 n duration-200 ease-in-out"} color='transparent' />{getText()}</Badge>
<Badge variant="outline"><CircleFill className={getColor() + " rounded-full mr-1 n duration-200 ease-in-out"} color='transparent' />{getText()}</Badge>
);
}