Add gallery previous and next buttons in the modal

SU-SWS · Mar 11, 2024 · 41b4e84 · 41b4e84
1 parent 5198df8
commit 41b4e84
Show file tree

Hide file tree

Showing 33 changed files with 222 additions and 151 deletions.
diff --git a/app/@modal/(.)gallery/[...uuid]/page.tsx b/app/@modal/(.)gallery/[...uuid]/page.tsx
@@ -4,6 +4,7 @@ import {graphqlClient} from "@lib/gql/gql-client";
 import {ParagraphStanfordGallery} from "@lib/gql/__generated__/drupal.d";
 import {notFound} from "next/navigation";
 import {useId} from "react";
+import Link from "@components/elements/link";
 
 type Props = {
   params: { uuid: string[] }
@@ -17,6 +18,11 @@ const Page = async ({params: {uuid}}: Props) => {
   if (paragraphQuery.paragraph?.__typename !== "ParagraphStanfordGallery") notFound();
 
   const paragraph = paragraphQuery.paragraph as ParagraphStanfordGallery;
+
+  const currentImageIndex = paragraph.suGalleryImages?.findIndex((image => image.id === mediaUuid)) || 0;
+  const prevImageIndex = paragraph.suGalleryImages?.[currentImageIndex - 1] ? currentImageIndex - 1 : -1;
+  const nextImageIndex = paragraph.suGalleryImages?.[currentImageIndex + 1] ? currentImageIndex + 1 : -1;
+
   let galleryImages = mediaUuid ? paragraph.suGalleryImages?.filter(image => image.id === mediaUuid) : paragraph.suGalleryImages;
 
   galleryImages = galleryImages?.filter(image => !!image.suGalleryImage?.url)
@@ -27,22 +33,44 @@ const Page = async ({params: {uuid}}: Props) => {
         if (!galleryImage.suGalleryImage?.url) return;
 
         return (
-          <figure key={galleryImage.id}>
-            <picture>
-              <Image
-                src={galleryImage.suGalleryImage.url}
-                width={galleryImage.suGalleryImage.width}
-                height={galleryImage.suGalleryImage.height}
-                alt={galleryImage.suGalleryImage.alt || ""}
-                className="max-w-full h-auto m-0 p-0"
-              />
-            </picture>
-            {galleryImage.suGalleryCaption &&
-              <figcaption id={captionId} className="bg-white text-right p-5 m-0 table-caption caption-bottom w-full">
-                {galleryImage.suGalleryCaption}
-              </figcaption>
+          <div key={galleryImage.id}>
+            <figure key={galleryImage.id}>
+              <picture>
+                <Image
+                  src={galleryImage.suGalleryImage.url}
+                  width={galleryImage.suGalleryImage.width}
+                  height={galleryImage.suGalleryImage.height}
+                  alt={galleryImage.suGalleryImage.alt || ""}
+                  className="max-w-full h-auto m-0 p-0"
+                />
+              </picture>
+              {galleryImage.suGalleryCaption &&
+                <figcaption id={captionId} className="bg-white text-right p-5 m-0 table-caption caption-bottom w-full">
+                  {galleryImage.suGalleryCaption}
+                </figcaption>
+              }
+            </figure>
+            {(prevImageIndex || nextImageIndex) &&
+              <nav>
+                <ul className="list-unstyled flex justify-between">
+                  {prevImageIndex >= 0 &&
+                    <li className="mr-auto">
+                      <Link className="text-white no-underline hocus:underline hocus:text-white" href={`/gallery/${paragraph.id}/${paragraph.suGalleryImages?.[prevImageIndex].id}`} replace={true} scroll={false}>
+                        Previous Image
+                      </Link>
+                    </li>
+                  }
+                  {nextImageIndex >= 0 &&
+                    <li className="ml-auto">
+                      <Link className="text-white no-underline hocus:underline hocus:text-white" href={`/gallery/${paragraph.id}/${paragraph.suGalleryImages?.[nextImageIndex].id}`} replace={true} scroll={false}>
+                        Next Image
+                      </Link>
+                    </li>
+                  }
+                </ul>
+              </nav>
             }
-          </figure>
+          </div>
         )
       })}
     </InterceptionModal>

diff --git a/src/components/elements/action-link.tsx b/src/components/elements/action-link.tsx
@@ -1,14 +1,15 @@
 import Link from "@components/elements/link";
 import {ChevronRightIcon} from "@heroicons/react/20/solid";
 import {HtmlHTMLAttributes} from "react";
+import {twMerge} from "tailwind-merge";
 
 type Props = HtmlHTMLAttributes<HTMLAnchorElement> & {
   href: string
 }
 
 const ActionLink = ({children, ...props}: Props) => {
   return (
-    <Link {...props} className="relative">
+    <Link {...props} className={twMerge("relative", props.className)}>
       {children}
       <ChevronRightIcon height={25} className="ml-2 inline-block"/>
     </Link>

diff --git a/src/components/elements/address.tsx b/src/components/elements/address.tsx
@@ -1,20 +1,28 @@
 import {Address as AddressType} from "@lib/gql/__generated__/drupal.d";
-type Props = AddressType & {
+import {HTMLAttributes} from "react";
+
+type Props = AddressType & HTMLAttributes<HTMLElement> & {
   singleLine?: boolean
 }
 
 const Address = ({
+  additionalName: _a,
   addressLine1,
   addressLine2,
   administrativeArea,
   country,
   locality,
   organization,
   postalCode,
-  singleLine = false
+  dependentLocality: _d,
+  familyName: _f,
+  givenName: _g,
+  langcode: _l,
+  sortingCode: _s,
+  singleLine = false,
+  ...props
 }: Props) => {
 
-
   if (singleLine) {
     const parts = [
       organization,
@@ -25,12 +33,12 @@ const Address = ({
       `${country?.code}`
     ];
     return (
-      <address>{parts.filter(part => !!part).join(', ')}</address>
+      <address {...props}>{parts.filter(part => !!part).join(', ')}</address>
     )
   }
 
   return (
-    <address>
+    <address {...props}>
       {organization && <div className="font-semibold">{organization}</div>}
       {(addressLine1) && <div>{addressLine1}</div>}
       {(addressLine2) && <div>{addressLine2}</div>}

diff --git a/src/components/elements/interception-modal.tsx b/src/components/elements/interception-modal.tsx
@@ -5,6 +5,7 @@ import {useRouter} from "next/navigation";
 import ReactFocusLock from "react-focus-lock";
 import {XMarkIcon} from "@heroicons/react/20/solid";
 import {useEventListener, useScrollLock} from "usehooks-ts";
+import {twMerge} from "tailwind-merge";
 
 const InterceptionModal = ({children, ...props}: HtmlHTMLAttributes<HTMLDialogElement>) => {
   const overlay = useRef<HTMLDialogElement>(null);
@@ -27,7 +28,7 @@ const InterceptionModal = ({children, ...props}: HtmlHTMLAttributes<HTMLDialogEl
   return (
     <dialog
       ref={overlay}
-      className="modal fixed w-screen h-full overscroll-contain overflow-y-scroll overflow-x-hidden top-0 left-0 items-center justify-center z-[10000] bg-black-true bg-opacity-[90%] flex"
+      className={twMerge("modal fixed w-screen h-full overscroll-contain overflow-y-scroll overflow-x-hidden top-0 left-0 items-center justify-center z-[10000] bg-black-true bg-opacity-90 flex", props.className)}
       onClick={onClick}
       {...props}
     >

diff --git a/src/components/elements/ombed.tsx b/src/components/elements/ombed.tsx
@@ -4,6 +4,7 @@ import {SignalIcon} from "@heroicons/react/20/solid";
 import Embed from "react-tiny-oembed";
 import {HtmlHTMLAttributes} from "react";
 import {useIntersectionObserver} from "usehooks-ts";
+import {twMerge} from "tailwind-merge";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   url: string
@@ -12,7 +13,7 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const Oembed = ({url, ...props}: Props) => {
   const {isIntersecting, ref} = useIntersectionObserver({freezeOnceVisible: true})
   return (
-    <div {...props} ref={ref} className="relative aspect-[16/9] w-full">
+    <div {...props} ref={ref} className={twMerge("relative aspect-[16/9] w-full", props.className)}>
       {isIntersecting && <Embed url={url} LoadingFallbackElement={<Loading/>}/>}
     </div>
   )

diff --git a/src/components/elements/unpublished-banner.tsx b/src/components/elements/unpublished-banner.tsx
@@ -1,12 +1,13 @@
 import {HTMLAttributes} from "react";
+import {twMerge} from "tailwind-merge";
 
 type Props = HTMLAttributes<HTMLDivElement> & {
   status?: boolean
 }
 const UnpublishedBanner = ({status, children, ...props}: Props) => {
   if (status !== false) return;
   return (
-    <div className="bg-illuminating text-4xl p-5" {...props}>
+    <div {...props} className={twMerge("bg-illuminating text-4xl p-5", props.className)}>
       <div className="centered-container">
         {children}
       </div>

diff --git a/src/components/layouts/interior-page.tsx b/src/components/layouts/interior-page.tsx
@@ -4,6 +4,7 @@ import {HtmlHTMLAttributes} from "react";
 import {isDraftMode} from "@lib/drupal/utils";
 import {MenuAvailable} from "@lib/gql/__generated__/drupal.d";
 import useActiveTrail from "@lib/hooks/useActiveTrail";
+import {twMerge} from "tailwind-merge";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   currentPath: string
@@ -18,7 +19,7 @@ const InteriorPage = async ({children, currentPath, ...props}: Props) => {
   const subTree = topMenuItem ? topMenuItem.children : [];
 
   return (
-    <div className="centered flex gap-20" {...props}>
+    <div {...props} className={twMerge("centered flex gap-20", props.className)}>
 
       {(subTree.length > 1 || subTree[0]?.children) &&
         <aside className="hidden lg:block w-1/4 shrink-0">

diff --git a/src/components/menu/side-nav.tsx b/src/components/menu/side-nav.tsx
@@ -1,10 +1,16 @@
 import Link from "@components/elements/link";
 import {clsx} from "clsx";
 import {MenuItem as MenuItemType} from "@lib/gql/__generated__/drupal.d";
+import {HTMLAttributes} from "react";
 
-const SideNav = ({menuItems, activeTrail}: { menuItems: MenuItemType[], activeTrail: string[] }) => {
+type Props = HTMLAttributes<HTMLElement> & {
+  menuItems: MenuItemType[]
+  activeTrail: string[]
+}
+
+const SideNav = ({menuItems, activeTrail, ...props}: Props) => {
   return (
-    <nav aria-label="Secondary Navigation">
+    <nav aria-label="Secondary Navigation" {...props}>
       <ul className="list-unstyled">
         {menuItems.map(item =>
           <MenuItem key={`sidenav--${item.id}`} {...item} activeTrail={activeTrail} level={0}/>

diff --git a/src/components/nodes/cards/stanford-course/stanford-course-card.tsx b/src/components/nodes/cards/stanford-course/stanford-course-card.tsx
@@ -2,6 +2,7 @@ import Link from "@components/elements/link";
 import {H2, H3} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from 'react';
 import {NodeStanfordCourse} from "@lib/gql/__generated__/drupal.d";
+import {twMerge} from "tailwind-merge";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordCourse
@@ -12,9 +13,9 @@ const StanfordCourseCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
     <article
-      aria-labelledby={node.id}
-      className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden"
       {...props}
+      aria-labelledby={node.id}
+      className={twMerge("mx-auto shadow-xl border border-black-20 p-10 overflow-hidden", props.className)}
     >
       <div className="flex flex-col">
         <Heading className="text-m2 order-last" id={node.id}>

diff --git a/src/components/nodes/cards/stanford-event-series/stanford-event-series-card.tsx b/src/components/nodes/cards/stanford-event-series/stanford-event-series-card.tsx
@@ -2,6 +2,7 @@ import Link from "@components/elements/link";
 import {H2, H3} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
 import {NodeStanfordEventSeries} from "@lib/gql/__generated__/drupal.d";
+import {twMerge} from "tailwind-merge";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordEventSeries
@@ -12,9 +13,9 @@ const StanfordEventSeriesCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
     <article
-      aria-labelledby={node.id}
-      className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden"
       {...props}
+      aria-labelledby={node.id}
+      className={twMerge("mx-auto shadow-xl border border-black-20 p-10 overflow-hidden", props.className)}
     >
       <Heading className="text-m2 [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>
         <Link href={node.path}>

diff --git a/src/components/nodes/cards/stanford-event/stanford-event-card.tsx b/src/components/nodes/cards/stanford-event/stanford-event-card.tsx
@@ -4,6 +4,7 @@ import {H2, H3} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
 import {NodeStanfordEvent} from "@lib/gql/__generated__/drupal.d";
 import Address from "@components/elements/address";
+import {twMerge} from "tailwind-merge";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordEvent
@@ -25,9 +26,9 @@ const StanfordEventCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
     <article
-      aria-labelledby={node.id}
-      className="mx-auto shadow-lg border border-black-20 p-10 flex flex-col gap-5 overflow-hidden"
       {...props}
+      aria-labelledby={node.id}
+      className={twMerge("mx-auto shadow-lg border border-black-20 p-10 flex flex-col gap-5 overflow-hidden", props.className)}
     >
       <div aria-hidden className="flex flex-col items-start w-fit">
         <div className="text-m0 font-semibold mb-4 w-full text-center">

diff --git a/src/components/nodes/cards/stanford-news/stanford-news-card.tsx b/src/components/nodes/cards/stanford-news/stanford-news-card.tsx
@@ -3,6 +3,7 @@ import Link from "@components/elements/link";
 import {H2, H3} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
 import {NodeStanfordNews} from "@lib/gql/__generated__/drupal.d";
+import {twMerge} from "tailwind-merge";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordNews
@@ -24,9 +25,9 @@ const StanfordNewsCard = ({node, headingLevel, ...props}: Props) => {
 
   return (
     <article
-      aria-labelledby={node.id}
-      className="mx-auto shadow-xl border border-black-20 overflow-hidden"
       {...props}
+      aria-labelledby={node.id}
+      className={twMerge("mx-auto shadow-xl border border-black-20 overflow-hidden", props.className)}
     >
 
       {image?.url &&
@@ -43,17 +44,17 @@ const StanfordNewsCard = ({node, headingLevel, ...props}: Props) => {
       <div className="p-20">
 
         <div className="flex flex-col">
-        <Heading className="text-m2 [&_a]:text-black" id={node.id}>
-          <Link href={node.suNewsSource?.url || node.path}>
-            {node.title}
-          </Link>
-        </Heading>
+          <Heading className="text-m2 [&_a]:text-black" id={node.id}>
+            <Link href={node.suNewsSource?.url || node.path}>
+              {node.title}
+            </Link>
+          </Heading>
 
-        {publishDate &&
-          <div className="order-first">
-            {publishDate}
-          </div>
-        }
+          {publishDate &&
+            <div className="order-first">
+              {publishDate}
+            </div>
+          }
         </div>
 
         {topics &&

diff --git a/src/components/nodes/cards/stanford-page/stanford-page-card.tsx b/src/components/nodes/cards/stanford-page/stanford-page-card.tsx
@@ -3,6 +3,7 @@ import Image from "next/image";
 import {H2, H3} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
 import {NodeStanfordPage} from "@lib/gql/__generated__/drupal.d";
+import {twMerge} from "tailwind-merge";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordPage
@@ -17,9 +18,9 @@ const StanfordPageCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
     <article
-      aria-labelledby={node.id}
-      className="mx-auto shadow-xl border border-black-20 overflow-hidden"
       {...props}
+      aria-labelledby={node.id}
+      className={twMerge("mx-auto shadow-xl border border-black-20 overflow-hidden", props.className)}
     >
       {image &&
         <div

diff --git a/src/components/nodes/cards/stanford-person/stanford-person-card.tsx b/src/components/nodes/cards/stanford-person/stanford-person-card.tsx
@@ -3,6 +3,7 @@ import Link from "@components/elements/link";
 import {H2, H3} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
 import {NodeStanfordPerson} from "@lib/gql/__generated__/drupal.d";
+import {twMerge} from "tailwind-merge";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordPerson
@@ -15,9 +16,9 @@ const StanfordPersonCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
     <article
-      aria-labelledby={node.id}
-      className="mx-auto text-center overflow-hidden"
       {...props}
+      aria-labelledby={node.id}
+      className={twMerge("mx-auto text-center overflow-hidden", props.className)}
     >
       {imageUrl &&
         <div className="relative aspect-[1/1] mx-auto mb-20 w-3/5">

diff --git a/src/components/nodes/cards/stanford-policy/stanford-policy-card.tsx b/src/components/nodes/cards/stanford-policy/stanford-policy-card.tsx
@@ -3,6 +3,7 @@ import Wysiwyg from "@components/elements/wysiwyg";
 import {H2, H3} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
 import {NodeStanfordPolicy} from "@lib/gql/__generated__/drupal.d";
+import {twMerge} from "tailwind-merge";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordPolicy
@@ -20,9 +21,9 @@ const StanfordPolicyCard = ({node, headingLevel, ...props}: Props) => {
   const teaserSummary = node.body?.summary || (trimmedBodyText + '...');
   return (
     <article
-      aria-labelledby={node.id}
-      className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden"
       {...props}
+      aria-labelledby={node.id}
+      className={twMerge("mx-auto shadow-xl border border-black-20 p-10 overflow-hidden", props.className)}
     >
       <Heading className="text-m2" id={node.id}>
         <Link href={node.path}>