feat: enhanced sources and boss banner

package.json

@@ -13,6 +13,7 @@
     "prettier:fix": "prettier --write . --ignore-path .gitignore"
   },
   "dependencies": {
+    "@bitcoin-dev-project/bdp-ui": "^1.5.2",
     "@chakra-ui/react": "^2.0.0",
     "@elastic/elasticsearch": "^8.8.0",
     "@elastic/react-search-ui": "1.20.2",

src/components/Banner.tsx

@@ -1,48 +1,20 @@
-import Image from "next/image";
-import Link from "next/link";
-import React, { useEffect, useState } from "react";
+import { Banner } from "@bitcoin-dev-project/bdp-ui";
 
-const BANNER_KEY = "FOSS-banner";
-
-const Banner = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleClose = () => {
-    if (typeof window !== "undefined") {
-      sessionStorage.setItem(BANNER_KEY, "hidden");
-    }
-    setIsOpen(false);
-  };
-
-  useEffect(() => {
-    const banner_in_session = window.sessionStorage.getItem(BANNER_KEY);
-    if (banner_in_session === "hidden") {
-      setIsOpen(false);
-    } else {
-      setIsOpen(true);
-    }
-  }, []);
-
-  if (!isOpen) return null;
+const BossBanner = () => {
   return (
-    <div className="bg-orange-100 flex items-center w-full sticky top-0 z-[10] p-2">
-      <div className="flex flex-col grow items-center text-sm md:text-base text-gray-600 font-medium text-center">
-        <p className="">{`Start Your Career in Bitcoin Open Source`}</p>
-        <div className="flex gap-2 items-center">
-          <span>{`Development in 2024 `}</span>
-          <Link href="https://learning.chaincode.com/#FOSS" target="_blank">
-            <span className="uppercase text-custom-brightOrange-200 underline whitespace-nowrap">{`Apply Today!`}</span>
-          </Link>
-        </div>
-      </div>
-      <button
-        onClick={handleClose}
-        className="relative h-[18px] w-[18px] grid place-items-center rounded-full hover:bg-orange-300"
-      >
-        <Image src="/close_icon.svg" width={10} height={10} alt="close" />
-      </button>
+    <div className={`w-full bg-bdp-background sticky top-0`}>
+      <Banner
+        headingText="Start your career in bitcoin open source —"
+        linkText="APPLY TODAY"
+        linkTo="https://learning.chaincode.com/#BOSS"
+        hasBoss
+        styles={{
+          container: "data-[has-heading='true']:h-auto",
+          bannerInfoContainer: "py-2",
+        }}
+      />
     </div>
   );
 };
 
-export default Banner;
+export default BossBanner;

src/components/navBar/NavBar.tsx

@@ -12,6 +12,7 @@ import useSearchQuery from "@/hooks/useSearchQuery";
 import { removeMarkdownCharacters } from "@/utils/elastic-search-ui-functions";
 import { useTheme } from "@/context/Theme";
 import { Tooltip } from "@chakra-ui/react";
+import BossBanner from "../Banner";
 
 function ThemeSwitcher() {
   const { theme, toggleTheme } = useTheme();
@@ -128,10 +129,11 @@ const NavBar = () => {
 
   return (
     <nav
-      className={`navBar pointer-events-auto fixed top-0  text-left md:text-center w-full text-xs md:text-base 2xl:text-xl leading-normal z-20 ${
+      className={`navBar pointer-events-auto fixed top-0  text-left md:text-center w-full text-xs md:text-base 2xl:text-xl leading-normal z-40 ${
         hiddenHomeFacet ? "bg-custom-hover-state shadow-md" : ""
       }`}
     >
+      {!hiddenHomeFacet && <BossBanner />}
       <div
         className={`flex items-center justify-between p-3 md:p-5 2xl:p-7 w-full max-w-[1920px] m-auto ${
           !hiddenHomeFacet ? "flex-row-reverse" : ""

src/components/sources/DocumentTable.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { FaEye } from "react-icons/fa";
+import { formatTimeAgo } from "@/utils/dateUtils";
+import { Document } from "@/types";
+
+interface DocumentTableProps {
+  documents: Document[];
+  domain: string;
+  onViewDocument: (url: string) => void;
+}
+
+const DocumentTable: React.FC<DocumentTableProps> = ({
+  documents,
+  domain,
+  onViewDocument,
+}) => {
+  const trimUrl = (url: string, domain: string): string => {
+    const domainPattern = new RegExp(
+      `^(https?:\/\/)?(www\.)?${domain.replace(".", ".")}/?`,
+      "i"
+    );
+    const trimmed = url.replace(domainPattern, "");
+    return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+  };
+
+  return (
+    <table className="min-w-full border border-custom-stroke">
+      <thead>
+        <tr className="bg-custom-hover-state dark:bg-custom-hover-primary">
+          <th className="px-4 py-2 border-b border-custom-stroke">Title</th>
+          <th className="px-4 py-2 border-b border-custom-stroke">URL</th>
+          <th className="px-4 py-2 border-b border-custom-stroke">
+            Indexed At
+          </th>
+          <th className="w-10 px-2 py-2 border-b border-custom-stroke"></th>
+        </tr>
+      </thead>
+      <tbody>
+        {documents?.map((doc, index) => (
+          <tr
+            key={doc.url}
+            className={
+              index % 2 === 0
+                ? "bg-custom-hover-state dark:bg-custom-hover-primary"
+                : "bg-custom-background"
+            }
+          >
+            <td className="px-4 py-2 border-b border-custom-stroke max-w-xs">
+              <div className="truncate" title={doc.title}>
+                {doc.title}
+              </div>
+            </td>
+            <td className="px-4 py-2 border-b border-custom-stroke">
+              <div className="truncate max-w-md">
+                <a
+                  href={doc.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-custom-accent hover:underline"
+                  title={doc.url}
+                >
+                  {doc.url && trimUrl(doc.url, domain)}
+                </a>
+              </div>
+            </td>
+            <td className="px-4 py-2 border-b border-custom-stroke whitespace-nowrap">
+              <div className="group relative inline-block">
+                <span>{formatTimeAgo(doc.indexed_at)}</span>
+                <span className="invisible group-hover:visible absolute left-0 -translate-x-1/2 bottom-full mb-2 px-2 py-1 text-sm bg-custom-black text-custom-white rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap z-10">
+                  {new Date(doc.indexed_at).toLocaleString()}
+                </span>
+              </div>
+            </td>
+            <td className="w-10 px-2 py-2 border-b border-custom-stroke text-center">
+              <button
+                onClick={() => onViewDocument(doc.url)}
+                className="text-custom-accent hover:text-custom-accent-dark"
+                title="View document"
+              >
+                <FaEye className="w-5 h-5 inline-block" />
+              </button>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default DocumentTable;