Port <ResourceGroup> component to App Router style [#1066]

* Refactored styles from structured component to CSS Module
* Refactored <GroupLink> and <IndividualQuickLink> components out into
  `group-and-resource-links.tsx`
* Refactored <ResourceGroup> and contained components

static-site/components/list-resources/group-and-resource-links.module.css

@@ -1,13 +1,19 @@
 .baseLink {
-   color: #5097BA;
-   text-decoration: none;
+  color: #5097ba;
+  text-decoration: none;
 }
 .baseLink:hover {
   color: #31586c;
+  text-decoration: none;
+}
+
+.groupLink {
+  font-size: 2rem;
+  font-weight: 500;
 }
 
 .resourceLink {
-   font-size: 16px;
-   font-family: monospace;
-   white-space: pre; /* don't collapse back-to-back spaces */
+  font-size: 16px;
+  font-family: monospace;
+  white-space: pre; /* don't collapse back-to-back spaces */
 }

static-site/components/list-resources/group-and-resource-links.tsx

@@ -10,6 +10,94 @@ import { Resource } from "./types";
 
 import styles from "./group-and-resource-links.module.css";
 
+/**
+ * A React Client Component that displays a link to a group resource,
+ * with proper styling, with attributes to force the link open in a
+ * new window/tab and without sending referrer information.
+ *
+ * @param displayName - the text to use for the link
+ * @param href - the `href` property for the <a> element
+ */
+export function GroupLink({
+  displayName,
+  href,
+}: {
+  displayName: string;
+  href: string;
+}): React.ReactElement {
+  return (
+    <a
+      className={`${styles.baseLink} ${styles.groupLink}`}
+      href={href}
+      rel="noreferrer"
+      target="_blank"
+    >
+      {displayName}
+    </a>
+  );
+}
+
+/**
+ * A React Client Component that displays a link that opens a quick link,
+ * with proper styling, with attributes to force the link open in a
+ * new window/tab and without sending referrer information. Adds an
+ * `onClick` handler to the `<div>` wrapping the link, so that a shift
+ * click opens a modal with a timeline display of the resource.
+ *
+ * @param displayName - the text to use for the link
+ * @param href - the `href` property for the <a> element
+ * @param resource - the resource to display in a modal on a shift-click
+ */
+export function IndividualQuickLink({
+  displayName,
+  href,
+  resource,
+}: {
+  displayName: string;
+  href: string;
+  resource: Resource | undefined;
+}): React.ReactElement | null {
+  const setModalResource = useContext(SetModalResourceContext);
+  if (!setModalResource) {
+    throw new InternalError("Context not provided!");
+  }
+
+  if (!resource) {
+    return null;
+  }
+
+  function onClick(): void {
+    setModalResource && setModalResource(resource);
+  }
+
+  return (
+    <div onClick={onClick}>
+      <a
+        className={`${styles.baseLink} ${styles.resourceLink}`}
+        href={href}
+        rel="noreferrer"
+        target="_blank"
+      >
+        {displayName}
+      </a>
+    </div>
+  );
+}
+
+/**
+ * A React Client Component that displays a link that opens an individual
+ * resource, with proper styling, with attributes to force the link
+ * open in a new window/tab and without sending referrer information.
+ * Adds an `onClick` handler to the `<div>` wrapping the link, so that
+ * a shift click opens a modal with a timeline display of the
+ * resource. Further, adds hover state handling that changes the
+ * display of the resource name on mouse-over/mouse-out.
+ *
+ * @param resource - the resource to display in a modal on a shift-click
+ * @param topOfColumn - whether the resource is at the top of a column
+ * when displayed; items at the top of a column act like they're being
+ * hovered all the time
+ */
 export function IndividualResourceLink({
   resource,
   topOfColumn,

static-site/components/list-resources/resource-group.module.css

@@ -0,0 +1,79 @@
+.clickable {
+  cursor: pointer;
+}
+
+.collapsibleRow {
+  align-items: center;
+  font-size: 1.6rem;
+  gap: 0px;
+  padding-left: 0px;
+}
+
+.flexColumnContainer {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 10;
+  justify-content: flex-start;
+  overflow: hidden;
+}
+
+.flexSpan {
+  flex-grow: 100;
+}
+
+.headerContainer {
+  align-items: center;
+  background-color: rgb(248, 248, 248);
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  justify-content: flex-start;
+  margin-bottom: 5px;
+  padding: 5px;
+}
+
+.headerRow {
+  align-items: flex-end; /* all elements share common baseline */
+  color: #4f4b50;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  justify-content: flex-start;
+  padding-left: 10px; /* vertically aligns the row with the collapse icon (if any) */
+  width: 100%;
+}
+
+.individualResourceContainer {
+  column-gap: 20px;
+}
+
+.quickLinkRow {
+  font-size: 1.6rem;
+  padding-top: 5px;
+  white-space: nowrap;
+}
+
+.quickLinkWrapper {
+  padding-left: 5px;
+}
+
+.resourceGroupContainer {
+  background-color: rgb(251, 251, 251);
+  border-radius: 5px;
+  border: 2px solid rgb(204, 204, 204);
+  margin-bottom: 10px; /* spacing between groups */
+  padding-bottom: 5px; /* leave some space inside the group at the bottom */
+}
+
+.rotate {
+  display: inline-block;
+  max-height: 30px;
+  max-width: 30px;
+  transition: all 0.3s ease-in;
+}
+
+.unlinkedGroupName {
+  font-size: "2rem";
+  font-weight: "500";
+}