-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: enhanced sources and boss banner (#152)
* Enhanced Document Views for Source Explorer (#150) * feat(sources): add view modes and refactor Documents component - Add threaded and combined summaries view modes for documents - Filter out combined-summary documents from default view - Break down Documents component into smaller, reusable components - Add source metadata for available view modes (threads/summaries) - Improve component organization and maintainability * fix build error with more readable code not related with the change but resulting in build error * Addition of boss banner (#151) * chore(banner): add boss banner * chore(version): updated bdp-ui patch fix --------- Co-authored-by: Andreas <[email protected]> Co-authored-by: 0tuedon <[email protected]>
- Loading branch information
3 people
authored
Nov 29, 2024
1 parent
ade1520
commit 0427795
Showing
16 changed files
with
659 additions
and
184 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
Oops, something went wrong.