chore: initial public commit

client/app/components/sidebar/SidebarItem.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import Popup from "../Popup";
+import { Link } from "react-router";
+
+interface Props {
+    name: string;
+    to?: string;
+    onClick: Function;
+    children: React.ReactNode;
+    modal: React.ReactNode;
+    keyHint?: React.ReactNode;
+    space?: number
+    externalLink?: boolean
+    /* true if the keyhint is an icon and not text */
+    icon?: boolean
+}
+
+export default function SidebarItem({ externalLink, space, keyHint, name, to, children, modal, onClick, icon }: Props) {
+    const classes = "hover:cursor-pointer hover:bg-(--color-bg-tertiary) transition duration-100 rounded-md p-2 inline-block";
+
+    const popupInner = keyHint ? (
+        <div className="flex items-center gap-2">
+            <span>{name}</span>
+            {icon ?
+            <div>
+                {keyHint}
+            </div>
+            :
+            <kbd className="px-1 text-sm rounded bg-(--color-bg-tertiary) text-(--color-fg) border border-[var(--color-fg)]">
+                {keyHint}
+            </kbd>
+            }
+        </div>
+    ) : name;
+
+    return (
+        <>
+            <Popup position="right" space={space ?? 20} inner={popupInner}>
+                {to ? (
+                    <Link target={externalLink ? "_blank" : ""} className={classes} to={to}>{children}</Link>
+                ) : (
+                    <a className={classes} onClick={() => onClick()}>{children}</a>
+                )}
+            </Popup>
+            {modal}
+        </>
+    );
+}