add notification item code

src/DevGov/Notification/Item/Left.jsx

@@ -0,0 +1,42 @@
+/* INCLUDE: "common.jsx" */
+function href(widgetName, linkProps) {
+  linkProps = { ...linkProps };
+
+  if (props.referral) {
+    linkProps.referral = props.referral;
+  }
+
+  const linkPropsQuery = Object.entries(linkProps)
+    .filter(([_key, nullable]) => (nullable ?? null) !== null)
+    .map(([key, value]) => `${key}=${value}`)
+    .join("&");
+
+  return `/#/${REPL_DEVHUB}/widget/devhub.page.${widgetName}${
+    linkPropsQuery ? "?" : ""
+  }${linkPropsQuery}`;
+}
+/* END_INCLUDE: "common.jsx" */
+
+if (!props.type) {
+  return "Loading ...";
+}
+
+const type = props.type.split("/")[1];
+return props.type ? (
+  <>
+    {type == "like"
+      ? "liked your"
+      : type == "reply"
+      ? "replied to your"
+      : type == "edit"
+      ? "edited your"
+      : type == "mention"
+      ? "mentioned you in their"
+      : "???"}{" "}
+    <a className="fw-bold text-muted" href={href("post", { id: props.post })}>
+      DevHub post
+    </a>
+  </>
+) : (
+  "Loading ..."
+);

src/DevGov/Notification/Item/Right.jsx

@@ -0,0 +1,28 @@
+/* INCLUDE: "common.jsx" */
+function href(widgetName, linkProps) {
+  linkProps = { ...linkProps };
+
+  if (props.referral) {
+    linkProps.referral = props.referral;
+  }
+
+  const linkPropsQuery = Object.entries(linkProps)
+    .filter(([_key, nullable]) => (nullable ?? null) !== null)
+    .map(([key, value]) => `${key}=${value}`)
+    .join("&");
+
+  return `/#/${REPL_DEVHUB}/widget/devhub.page.${widgetName}${
+    linkPropsQuery ? "?" : ""
+  }${linkPropsQuery}`;
+}
+/* END_INCLUDE: "common.jsx" */
+
+return props.post === undefined ? (
+  "Loading ..."
+) : (
+  <>
+    <a className="btn btn-outline-dark" href={href("post", { id: props.post })}>
+      View DevHub post
+    </a>
+  </>
+);