feat(comp):增加可激活链接组件。

src/components/ActivatableLink/ActivatableLink.jsx

@@ -0,0 +1,40 @@
+import { A } from "@solidjs/router";
+import { defaultTo, isNil, pick, pipe, prop } from "ramda";
+import { Show } from "solid-js";
+import classes from "./ActivatableLink.module.css";
+
+/**
+ * @typedef {import("@solidjs/router").AnchorProps} AnchorProps
+ * @typedef {import("solid-js").ParentProps} ParentProps
+ * @typedef {Partial<AnchorProps> & ParentProps} ActivatableLinkBase
+ *
+ * @typedef {Object} ActivatableLinkExtends
+ * @property {string} href
+ * @property {boolean} [activatable]
+ * @property {JSX.Element} [leftIcon]
+ * @property {JSX.Element} [rightIcon]
+ *
+ * @typedef {ActivatableLinkBase & ActivatableLinkExtends} ActivatableLinkProps
+ */
+
+const defaultActivatable = pipe(defaultTo(true), prop("activatable"));
+
+/**
+ * @param {ActivatableLinkProps} props
+ * @returns {import("solid-js").Component<ActivatableLinkProps>}
+ */
+export default function ActivatableLink(props) {
+  return (
+    <A
+      class={prop("activatable-link", classes)}
+      {...(defaultActivatable(props) && {
+        activeClass: "activated",
+      })}
+      {...pick(["replace", "end", "href"], props)}
+    >
+      <Show when={!isNil(props.leftIcon)}>{props.leftIcon}</Show>
+      <Show when={!isNil(props.children)}>{props.children}</Show>
+      <Show when={!isNil(props.rightIcon)}>{props.rightIcon}</Show>
+    </A>
+  );
+}

src/components/ActivatableLink/ActivatableLink.module.css

@@ -0,0 +1,28 @@
+@import "@/mixins.css";
+
+.activatable-link {
+  @include flex(row, flex-start, center, --spacing-xs);
+  @util padding(var(--spacing-s) var(--spacing-xs));
+  @util size(100% auto);
+  border-radius: var(--border-radius-xs);
+  color: var(--palette-white-8);
+  @include dark-mode {
+    color: var(--palette-white-3);
+  }
+  &:hover {
+    color: var(--palette-white-8);
+    background-color: var(--palette-bright-blue-3);
+    @include dark-mode {
+      color: var(--palette-white-0);
+      background-color: var(--palette-bright-blue-4);
+    }
+  }
+  &.activated {
+    color: var(--palette-gray-1);
+    background-color: var(--palette-bright-blue-5);
+    @include dark-mode {
+      color: var(--palette-white-0);
+      background-color: var(--palette-bright-blue-8);
+    }
+  }
+}