Refactor routing in App component to enhance navigation and improve error handling by integrating dynamic routes and updating the NotFound route.

node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/radio-checkbox.js

@@ -0,0 +1,109 @@
+const styles = ["purple", "gray", "red", "green", "yellow", "blue"];
+class DevToolbarRadioCheckbox extends HTMLElement {
+  _radioStyle = "purple";
+  input;
+  shadowRoot;
+  get radioStyle() {
+    return this._radioStyle;
+  }
+  set radioStyle(value) {
+    if (!styles.includes(value)) {
+      console.error(`Invalid style: ${value}, expected one of ${styles.join(", ")}.`);
+      return;
+    }
+    this._radioStyle = value;
+    this.updateStyle();
+  }
+  static observedAttributes = ["radio-style", "checked", "disabled", "name", "value"];
+  constructor() {
+    super();
+    this.shadowRoot = this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = `
+		<style>
+			:host {
+				--purple-unchecked: rgba(224, 204, 250, 0.33);
+				--purple-checked: rgba(224, 204, 250, 1);
+
+				--gray-unchecked: rgba(191, 193, 201, 0.33);
+				--gray-checked: rgba(191, 193, 201, 1);
+
+				--red-unchecked: rgba(249, 196, 215, 0.33);
+				--red-checked: rgba(179, 62, 102, 1);
+
+				--green-unchecked: rgba(213, 249, 196, 0.33);
+				--green-checked: rgba(61, 125, 31, 1);
+
+				--yellow-unchecked: rgba(255, 236, 179, 0.33);
+				--yellow-checked: rgba(181, 138, 45, 1);
+
+				--blue-unchecked: rgba(189, 195, 255, 0.33);
+				--blue-checked: rgba(54, 69, 217, 1);
+			}
+
+			input[type="radio"] {
+				appearance: none;
+				-webkit-appearance: none;
+				display: flex;
+				align-content: center;
+				justify-content: center;
+				border: 2px solid var(--unchecked-color);
+				border-radius: 9999px;
+				width: 16px;
+				height: 16px;
+			}
+
+			input[type="radio"]::before {
+				content: "";
+				background-color: var(--checked-color);
+				width: 8px;
+				height: 8px;
+				border-radius: 9999px;
+				visibility: hidden;
+				margin: 2px;
+			}
+
+			input[type="radio"]:checked {
+				border-color: var(--checked-color);
+			}
+
+			input[type="radio"]:checked::before {
+				visibility: visible;
+			}
+		</style>
+		<style id="selected-style"></style>
+		`;
+    this.input = document.createElement("input");
+    this.input.type = "radio";
+    this.shadowRoot.append(this.input);
+  }
+  connectedCallback() {
+    this.updateInputState();
+    this.updateStyle();
+  }
+  updateStyle() {
+    const styleElement = this.shadowRoot.querySelector("#selected-style");
+    if (styleElement) {
+      styleElement.innerHTML = `
+				:host {
+					--unchecked-color: var(--${this._radioStyle}-unchecked);
+					--checked-color: var(--${this._radioStyle}-checked);
+				}
+			`;
+    }
+  }
+  updateInputState() {
+    this.input.checked = this.hasAttribute("checked");
+    this.input.disabled = this.hasAttribute("disabled");
+    this.input.name = this.getAttribute("name") || "";
+    this.input.value = this.getAttribute("value") || "";
+  }
+  attributeChangedCallback() {
+    if (this.hasAttribute("radio-style")) {
+      this.radioStyle = this.getAttribute("radio-style");
+    }
+    this.updateInputState();
+  }
+}
+export {
+  DevToolbarRadioCheckbox
+};