Add shortcut settings

Author: bacurrah

src/WidgetMap.tsx

@@ -2,7 +2,7 @@ import { BatteryWidget } from "./widgets/BatteryWidget";
 import { Clock, ClockSettings } from "./widgets/Clock";
 import { Notepad } from "./widgets/Notepad";
 import { Search, SearchSettings } from "./widgets/Search";
-import { Shortcut } from "./widgets/Shortcut";
+import { Shortcut, ShortcutSettings } from "./widgets/Shortcut";
 import { ToDoList } from "./widgets/ToDoList";
 import { Weather } from "./widgets/Weather";
 
@@ -38,6 +38,10 @@ const WidgetMap = {
     component: Shortcut,
     resizable: { x: false, y: false },
     size: { width: 1, height: 1 },
+    settings: {
+      website: "",
+      openInNewTab: false,
+    } satisfies ShortcutSettings,
   },
 
   todo: {

src/widgets/Shortcut.tsx

@@ -1,10 +1,15 @@
 import React, { useEffect, useState } from "react";
-import Widget from "../Widget";
+import { WidgetState } from "../Widget";
 import { LinkIcon } from "@phosphor-icons/react";
 import globalStyles from "../App.css";
 import styles from "./Shortcut.css";
 
-export function Shortcut({ url = "" }: { url?: string }) {
+export interface ShortcutSettings {
+  website: string;
+  openInNewTab: boolean;
+}
+
+export function Shortcut({ settings }: WidgetState<ShortcutSettings>) {
   const [loaded, setLoaded] = useState(false);
 
   // useEffect(() => {
@@ -14,13 +19,14 @@ export function Shortcut({ url = "" }: { url?: string }) {
   return (
     <a
       className={[globalStyles.container, styles.shortcut].join(" ")}
-      href={url}
-      title={url}
+      href={settings.website}
+      title={settings.website}
+      target={settings.openInNewTab ? "_blank" : "_self"}
     >
       {!loaded && <LinkIcon className={styles.icon} weight="bold"></LinkIcon>}
       <img
         className={styles.icon}
-        src={url + "/favicon.ico"}
+        src={settings.website + "/favicon.ico"}
         style={{
           display: loaded ? "initial" : "none",
         }}