Merge pull request #796 from PlanB-Network/feat-resources-add-breadcr…

…umbs feat(resources): added breadcrumbs-backlink component
PlanB-Network · Nov 13, 2024 · 379fa5f · 379fa5f
2 parents fa379c9 + 2778b2f
commit 379fa5f
Show file tree

Hide file tree

Showing 8 changed files with 168 additions and 141 deletions.
diff --git a/apps/web/src/molecules/backlink.tsx b/apps/web/src/molecules/backlink.tsx
@@ -0,0 +1,23 @@
+import { Link } from '@tanstack/react-router';
+import { MdKeyboardArrowLeft } from 'react-icons/md';
+
+interface BackLinkProps {
+  to?: string;
+  label?: string;
+  className?: string;
+  onClick?: () => void;
+}
+
+export const BackLink = ({
+  to,
+  label,
+  className = 'flex items-center subtitle-large-med-20px md:display-large text-darkOrange-5 hover:text-white mb-[30px]',
+  onClick,
+}: BackLinkProps) => {
+  return (
+    <Link to={to} className={className} onClick={onClick}>
+      <MdKeyboardArrowLeft className="size-[18px] md:size-12" />
+      <span className="ml-1">{label}</span>
+    </Link>
+  );
+};
diff --git a/apps/web/src/routes/_content/_misc/professor.$professorName-$professorId.tsx b/apps/web/src/routes/_content/_misc/professor.$professorName-$professorId.tsx
@@ -8,6 +8,7 @@ import { Loader } from '@blms/ui';
 import { AuthorCardFull } from '#src/components/author-card-full.js';
 import { PageLayout } from '#src/components/page-layout.js';
 import { useNavigateMisc } from '#src/hooks/use-navigate-misc.js';
+import { BackLink } from '#src/molecules/backlink.tsx';
 import { formatNameForURL } from '#src/utils/string.js';
 import { trpc } from '#src/utils/trpc.js';
 
@@ -40,17 +41,26 @@ export const Route = createFileRoute(
 });
 
 function ProfessorDetail() {
+  const navigate = useNavigate();
   const { navigateTo404 } = useNavigateMisc();
   const { t, i18n } = useTranslation();
   const params = Route.useParams();
 
-  const navigate = useNavigate();
-
   const { data: professor, isFetched } = trpc.content.getProfessor.useQuery({
     professorId: Number(params.professorId),
     language: i18n.language,
   });
 
+  const categoryHash = window.location.hash.replace('#', '') || 'all';
+
+  const handleBackClick = () => {
+    if (categoryHash) {
+      navigate({ to: `/professors/${categoryHash}` });
+    } else {
+      navigate({ to: '/professors/all' });
+    }
+  };
+
   useEffect(() => {
     if (
       professor &&
@@ -74,14 +84,10 @@ function ProfessorDetail() {
       )}
       {professor && (
         <div className="flex flex-col gap-1 items-start text-white">
-          <Link
-            to={'/professors'}
-            className="flex items-center subtitle-large-med-20px md:display-large text-darkOrange-5 hover:text-white mb-6 lg:mb-12"
-          >
-            <ArrowLeft />
-
-            <span className="ml-1">{t('professors.pageTitle')}</span>
-          </Link>
+          <BackLink
+            label={t('professors.pageTitle')}
+            onClick={handleBackClick}
+          />
           <div className="flex w-full flex-col items-start">
             <AuthorCardFull professor={professor} className="mx-auto" />
           </div>
@@ -127,23 +133,3 @@ function ProfessorDetail() {
     </PageLayout>
   );
 }
-
-const ArrowLeft = () => {
-  return (
-    <svg
-      width="48"
-      height="48"
-      viewBox="0 0 48 48"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className="text-current size-[18px] md:size-12"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M16.5856 25.4142C16.2106 25.0391 16 24.5305 16 24.0002C16 23.4699 16.2106 22.9613 16.5856 22.5862L27.8996 11.2722C28.0841 11.0812 28.3048 10.9288 28.5488 10.824C28.7928 10.7192 29.0552 10.664 29.3208 10.6617C29.5863 10.6594 29.8497 10.71 30.0955 10.8106C30.3413 10.9111 30.5646 11.0596 30.7524 11.2474C30.9402 11.4352 31.0887 11.6585 31.1892 11.9043C31.2898 12.1501 31.3404 12.4134 31.3381 12.679C31.3358 12.9446 31.2806 13.207 31.1758 13.451C31.071 13.695 30.9186 13.9157 30.7276 14.1002L20.8276 24.0002L30.7276 33.9002C31.0919 34.2774 31.2935 34.7826 31.2889 35.307C31.2844 35.8314 31.074 36.333 30.7032 36.7038C30.3324 37.0747 29.8308 37.285 29.3064 37.2896C28.782 37.2941 28.2768 37.0925 27.8996 36.7282L16.5856 25.4142Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
diff --git a/apps/web/src/routes/_content/_misc/professors/$category/index.tsx b/apps/web/src/routes/_content/_misc/professors/$category/index.tsx
@@ -120,6 +120,7 @@ export function ProfessorCategoryPage() {
               to={`/professor/${formatNameForURL(professor.name)}-${professor.id}`}
               key={professor.id}
               className="h-auto w-full sm:w-auto"
+              hash={`${params.category}`}
             >
               <div className="h-full">
                 <ProfessorCard professor={professor} className="h-full" />

diff --git a/apps/web/src/routes/_content/resources/-components/resource-layout.tsx b/apps/web/src/routes/_content/resources/-components/resource-layout.tsx
@@ -31,6 +31,7 @@ interface Props {
   activeCategory?: string;
   maxWidth?: '1152' | '1360';
   marginTopChildren?: boolean;
+  showResourcesDropdownMenu?: boolean;
 }
 
 export const ResourceLayout = ({
@@ -47,6 +48,7 @@ export const ResourceLayout = ({
   backToCategoryButton,
   maxWidth,
   marginTopChildren = true,
+  showResourcesDropdownMenu = true,
 }: Props) => {
   return (
     <MainLayout footerVariant="dark">
@@ -63,10 +65,12 @@ export const ResourceLayout = ({
           )}
         >
           <CategoryTabs resourceActiveCategory={activeCategory} />
-          <ResourcesDropdownMenu
-            resourceActiveCategory={activeCategory}
-            backToCategoryButton={backToCategoryButton}
-          />
+          {showResourcesDropdownMenu && (
+            <ResourcesDropdownMenu
+              resourceActiveCategory={activeCategory}
+              backToCategoryButton={backToCategoryButton}
+            />
+          )}
 
           {showPageHeader && (
             <PageHeader

diff --git a/apps/web/src/routes/_content/resources/books/$bookId.tsx b/apps/web/src/routes/_content/resources/books/$bookId.tsx
@@ -15,6 +15,7 @@ import {
 
 import { ProofreadingProgress } from '#src/components/proofreading-progress.js';
 import { useGreater } from '#src/hooks/use-greater.js';
+import { BackLink } from '#src/molecules/backlink.tsx';
 import { useSuggestedContent } from '#src/utils/resources-hook.ts';
 import { trpc } from '#src/utils/trpc.js';
 
@@ -72,6 +73,7 @@ function Book() {
       activeCategory="books"
       showPageHeader={false}
       backToCategoryButton
+      showResourcesDropdownMenu={false}
     >
       {!isFetched && <Loader size={'s'} />}
       {isFetched && !book && (
@@ -94,57 +96,60 @@ function Book() {
           ) : (
             <></>
           )}
-          <Card className="md:mx-auto" color="orange">
-            <article className="w-full flex flex-col md:flex-row gap-5 lg:gap-9">
-              <div className="flex flex-col items-center justify-center">
-                <img
-                  className="md:w-[367px]  max-h-[229px] md:max-h-max mx-auto object-cover [overflow-clip-margin:_unset] rounded-[10px] lg:max-w-[347px] md:mx-0 lg:rounded-[22px]"
-                  alt={t('imagesAlt.bookCover')}
-                  src={book?.cover}
-                />
-              </div>
-
-              <div className="w-full max-w-2xl my-4 flex flex-col md:mt-0">
-                <div>
-                  <h2 className="title-large-24px md:display-large-med-48px text-white mb-5 lg:mb-8">
-                    {book?.title}
-                  </h2>
-
-                  <div className="flex flex-wrap gap-[10px] mb-5 lg:mb-8">
-                    {book?.tags.map((tag, i) => (
-                      <TextTag
-                        key={i}
-                        size="resourcesNewSize"
-                        variant="newGray"
-                      >
-                        {tag.charAt(0).toUpperCase() + tag.slice(1)}
-                      </TextTag>
-                    ))}
-                  </div>
+          <div className="flex-col">
+            <BackLink to={'/resources/books'} label={t('words.library')} />
+            <Card className="md:mx-auto" color="orange">
+              <article className="w-full flex flex-col md:flex-row gap-5 lg:gap-9">
+                <div className="flex flex-col items-center justify-center">
+                  <img
+                    className="md:w-[367px]  max-h-[229px] md:max-h-max mx-auto object-cover [overflow-clip-margin:_unset] rounded-[10px] lg:max-w-[347px] md:mx-0 lg:rounded-[22px]"
+                    alt={t('imagesAlt.bookCover')}
+                    src={book?.cover}
+                  />
+                </div>
 
-                  <div className="flex items-center">
-                    <span className="text-white body-14px-medium md:label-medium-med-16px pr-1">
-                      {t('words.writtenByPodcasts')}
-                    </span>
-                    <h5 className="text-white body-14px md:body-16px ">
-                      {book?.author}
-                    </h5>
+                <div className="w-full max-w-2xl my-4 flex flex-col md:mt-0">
+                  <div>
+                    <h2 className="title-large-24px md:display-large-med-48px text-white mb-5 lg:mb-8">
+                      {book?.title}
+                    </h2>
+
+                    <div className="flex flex-wrap gap-[10px] mb-5 lg:mb-8">
+                      {book?.tags.map((tag, i) => (
+                        <TextTag
+                          key={i}
+                          size="resourcesNewSize"
+                          variant="newGray"
+                        >
+                          {tag.charAt(0).toUpperCase() + tag.slice(1)}
+                        </TextTag>
+                      ))}
+                    </div>
+
+                    <div className="flex items-center">
+                      <span className="text-white body-14px-medium md:label-medium-med-16px pr-1">
+                        {t('words.writtenByPodcasts')}
+                      </span>
+                      <h5 className="text-white body-14px md:body-16px ">
+                        {book?.author}
+                      </h5>
+                    </div>
+                    <div className="flex items-center">
+                      <span className="body-14px-medium md:label-medium-med-16px text-white pr-1">
+                        {t('words.publicationDate')}
+                      </span>
+                      <span className="body-14px md:body-16px text-white ">
+                        {book?.publicationYear}
+                      </span>
+                    </div>
                   </div>
-                  <div className="flex items-center">
-                    <span className="body-14px-medium md:label-medium-med-16px text-white pr-1">
-                      {t('words.publicationDate')}
-                    </span>
-                    <span className="body-14px md:body-16px text-white ">
-                      {book?.publicationYear}
-                    </span>
-                  </div>
-                </div>
 
-                {isScreenMd && displayAbstract()}
-              </div>
-            </article>
-            {!isScreenMd && displayAbstract()}
-          </Card>
+                  {isScreenMd && displayAbstract()}
+                </div>
+              </article>
+              {!isScreenMd && displayAbstract()}
+            </Card>
+          </div>
         </div>
       )}
       <section className="mt-8 lg:mt-[100px]">

diff --git a/apps/web/src/routes/_content/resources/builders/$builderId.tsx b/apps/web/src/routes/_content/resources/builders/$builderId.tsx
@@ -9,6 +9,7 @@ import { Button, Loader, cn } from '@blms/ui';
 import Nostr from '#src/assets/icons/nostr.svg?react';
 import { ProofreadingProgress } from '#src/components/proofreading-progress.js';
 import { useGreater } from '#src/hooks/use-greater.js';
+import { BackLink } from '#src/molecules/backlink.tsx';
 import Flag from '#src/molecules/Flag/index.js';
 import { trpc } from '#src/utils/trpc.js';
 
@@ -84,6 +85,7 @@ function Builder() {
       activeCategory="builders"
       showPageHeader={false}
       backToCategoryButton
+      showResourcesDropdownMenu={false}
     >
       {!isFetched && <Loader size={'s'} />}
       {isFetched && !builder && (
@@ -95,6 +97,7 @@ function Builder() {
       )}
       {builder && (
         <>
+          <BackLink to={'/resources/builders'} label={t('words.builders')} />
           <article className="w-full border-2 border-darkOrange-5 bg-darkOrange-10 rounded-[1.25rem] mb-7 md:mb-24">
             {proofreading ? (
               <ProofreadingProgress

diff --git a/apps/web/src/routes/_content/resources/conferences/$conferenceId.tsx b/apps/web/src/routes/_content/resources/conferences/$conferenceId.tsx
@@ -11,6 +11,7 @@ import { Button, Loader, Tag, cn } from '@blms/ui';
 
 import { DropdownMenu } from '#src/components/Dropdown/dropdown-menu.tsx';
 import { ProofreadingProgress } from '#src/components/proofreading-progress.js';
+import { BackLink } from '#src/molecules/backlink.tsx';
 import { trpc } from '#src/utils/trpc.js';
 
 import { ResourceLayout } from '../-components/resource-layout.tsx';
@@ -104,6 +105,7 @@ function Conference() {
       backToCategoryButton={true}
       maxWidth="1360"
       className="max-md:mx-4"
+      showResourcesDropdownMenu={false}
     >
       {!isFetched && <Loader size={'s'} />}
       {isFetched && !conference && (
@@ -128,15 +130,10 @@ function Conference() {
           )}
 
           {/* Top part */}
-          <div className="flex justify-start mb-4 text-darkOrange-5 gap-1 max-md:hidden">
-            <Link to="/resources/conferences">
-              <span className="">{t('conferences.pageTitle')}</span>
-            </Link>
-            <span>&gt;</span>
-            <span className="underline underline-offset-2">
-              {conference.name}
-            </span>
-          </div>
+          <BackLink
+            to={'/resources/conferences'}
+            label={t('conferences.pageTitle')}
+          />
 
           <div className="flex flex-col lg:flex-row justify-center items-center w-full gap-4 lg:gap-8">
             <div className="lg:order-2 w-full max-w-full">