Merge pull request #35 from NishantChandla/34-few-fixes

add component for link buttons
OpenOceanHQ · Jun 11, 2024 · 09a19d0 · 09a19d0
2 parents 43053a4 + 17033f7
commit 09a19d0
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 97 deletions.
diff --git a/src/common/Blocks/CTACenteredBlock/index.tsx b/src/common/Blocks/CTACenteredBlock/index.tsx
@@ -1,5 +1,5 @@
-import Link from 'next/link';
 import type { CTACenteredBlock as CTACenteredBlockType } from '@/payload-types';
+import { LinkButton } from '../../Components/LinkButtons';
 
 export const CTACenteredBlock = ({ data }: { data: CTACenteredBlockType | null | undefined }) => {
   if (!data) return null;
@@ -22,20 +22,7 @@ export const CTACenteredBlock = ({ data }: { data: CTACenteredBlockType | null |
         </div>
 
         <div className="mt-10 flex items-center justify-center gap-x-6">
-          {data.links?.map(({ link }, index) => (
-            <Link
-              href={link.url ? link.url : ''}
-              key={index}
-              className={`rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm ${
-                link.appearance === 'primary'
-                  ? 'bg-indigo-600 text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
-                  : 'text-gray-900 bg-white'
-              }`}
-              target={link.newTab ? '_blank' : '_self'}
-            >
-              {link.label}
-            </Link>
-          ))}
+          {data.links?.map(({ link }, index) => <LinkButton link={link} key={index} />)}
         </div>
       </div>
     </section>

diff --git a/src/common/Blocks/CTAWithSplitContentAndButtonBlock/index.tsx b/src/common/Blocks/CTAWithSplitContentAndButtonBlock/index.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { LinkButton } from '../../Components/LinkButtons';
 import type { CTAWithSplitContentAndButtonBlock as CTAWithSplitContentAndButtonBlockType } from '@/payload-types';
 
 export const CTAWithSplitContentAndButtonBlock = ({
@@ -27,20 +27,7 @@ export const CTAWithSplitContentAndButtonBlock = ({
           </div>
 
           <div className="mt-10 flex items-center gap-x-6 lg:mt-0 lg:flex-shrink-0">
-            {data.links?.map(({ link }, index) => (
-              <Link
-                href={link.url ? link.url : ''}
-                key={index}
-                className={`rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm ${
-                  link.appearance === 'primary'
-                    ? 'bg-indigo-600 text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
-                    : 'text-gray-900 bg-white'
-                }`}
-                target={link.newTab ? '_blank' : '_self'}
-              >
-                {link.label}
-              </Link>
-            ))}
+            {data.links?.map(({ link }, index) => <LinkButton link={link} key={index} />)}
           </div>
         </div>
       </div>

diff --git a/src/common/Blocks/CTAWithSplitContentAndImageBlock/index.tsx b/src/common/Blocks/CTAWithSplitContentAndImageBlock/index.tsx
@@ -1,7 +1,6 @@
-import Link from 'next/link';
 import type { CTAWithSplitContentAndImageBlock as CTAWithSplitContentAndImageBlockType } from '@/payload-types';
-
 import Image from 'next/image';
+import { LinkButton } from '../../Components/LinkButtons';
 
 export const CTAWithSplitContentAndImageBlock = ({
   data,
@@ -48,20 +47,7 @@ export const CTAWithSplitContentAndImageBlock = ({
           </div>
 
           <div className="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
-            {data.links?.map(({ link }, index) => (
-              <Link
-                href={link.url ? link.url : ''}
-                key={index}
-                className={`rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm ${
-                  link.appearance === 'primary'
-                    ? 'bg-indigo-600 text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
-                    : 'text-gray-900 bg-white'
-                }`}
-                target={link.newTab ? '_blank' : '_self'}
-              >
-                {link.label}
-              </Link>
-            ))}
+            {data.links?.map(({ link }, index) => <LinkButton link={link} key={index} />)}
           </div>
         </div>
         <div className="relative mt-16 h-80 lg:mt-8">

diff --git a/src/common/Blocks/ContentBlock/index.tsx b/src/common/Blocks/ContentBlock/index.tsx
@@ -1,5 +1,5 @@
+import { LinkButton } from '../../Components/LinkButtons';
 import { ContentBlock as ContentBlockType } from '@/payload-types';
-import Link from 'next/link';
 
 export const ContentBlock = ({ data }: { data: ContentBlockType | null | undefined }) => {
   if (!data) return null;
@@ -27,20 +27,7 @@ export const ContentBlock = ({ data }: { data: ContentBlockType | null | undefin
             {richText_html && <div dangerouslySetInnerHTML={{ __html: richText_html }} />}
             {enableLink &&
               links &&
-              links.map(({ link }, index) => (
-                <Link
-                  key={index}
-                  href={link.url ? link.url : ''}
-                  target={link.newTab ? '_blank' : '_self'}
-                  className={`mr-2 mt-2 inline-block rounded border border-indigo-600 ${
-                    link.appearance === 'primary' && 'bg-indigo-600'
-                  } px-12 py-3 text-sm font-medium ${
-                    link.appearance === 'primary' ? 'text-white' : 'text-indigo-600'
-                  } transition hover:bg-indigo-700 focus:outline-none focus:ring focus:ring-yellow-400`}
-                >
-                  {link.label}
-                </Link>
-              ))}
+              links.map(({ link }, index) => <LinkButton link={link} key={index} />)}
           </div>
         ))}
       </div>

diff --git a/src/common/Blocks/FeatureWithThreeColumnBlock/index.tsx b/src/common/Blocks/FeatureWithThreeColumnBlock/index.tsx
@@ -1,6 +1,6 @@
-import Link from 'next/link';
 import { CustomIcon } from '../../Components/CustomIcon';
 import type { FeatureWithThreeColumnBlock as FeatureWithThreeColumnBlockType } from '@/payload-types';
+import { LinkButton } from '../../Components/LinkButtons';
 
 export const FeatureWithThreeColumnBlock = ({
   data,
@@ -27,12 +27,10 @@ export const FeatureWithThreeColumnBlock = ({
                 )}
                 <p className="mt-6">
                   {link && (
-                    <Link
-                      href={link.url ? link.url : ''}
+                    <LinkButton
+                      link={link}
                       className={`text-sm font-semibold leading-6 text-indigo-600`}
-                    >
-                      {link.label}
-                    </Link>
+                    />
                   )}
                 </p>
               </dd>

diff --git a/src/common/Blocks/HeroWithBackgroundBlock/index.tsx b/src/common/Blocks/HeroWithBackgroundBlock/index.tsx
@@ -1,6 +1,6 @@
-import Link from 'next/link';
 import type { HeroWithBackgroundBlock as HeroWithBackgroundBlockType } from '@/payload-types';
 import { MediaImage } from '../../Mediaimage';
+import { LinkButton } from '../../Components/LinkButtons';
 
 export const HeroWithBackgroundBlock = ({
   data,
@@ -41,19 +41,7 @@ export const HeroWithBackgroundBlock = ({
           </div>
 
           <div className="mt-6">
-            {data.links?.map(({ link }, index) => (
-              <Link
-                href={link.url ? link.url : ''}
-                key={index}
-                className={`mr-2 mt-2 inline-block rounded border border-indigo-600 ${
-                  link.appearance === 'primary' && 'bg-indigo-600'
-                } px-12 py-3 text-sm font-medium ${
-                  link.appearance === 'primary' ? 'text-white' : 'text-indigo-600'
-                } transition hover:bg-indigo-700 focus:outline-none focus:ring focus:ring-yellow-400`}
-              >
-                {link.label}
-              </Link>
-            ))}
+            {data.links?.map(({ link }, index) => <LinkButton link={link} key={index} />)}
           </div>
         </div>
         {data.backgroundType === 'backgroundImage' && data.backgroundImage && (

diff --git a/src/common/Blocks/HeroWithSplitContentAndImageBlock/index.tsx b/src/common/Blocks/HeroWithSplitContentAndImageBlock/index.tsx
@@ -1,6 +1,6 @@
-import Link from 'next/link';
 import type { HeroWithSplitContentAndImageBlock as HeroWithSplitContentAndImageBlockType } from '@/payload-types';
 import { MediaImage } from '../../Mediaimage';
+import { LinkButton } from '../../Components/LinkButtons';
 
 export const HeroWithSplitContentAndImageBlock = ({
   data,
@@ -42,20 +42,7 @@ export const HeroWithSplitContentAndImageBlock = ({
           </div>
 
           <div className="mt-6">
-            {data.links?.map(({ link }, index) => (
-              <Link
-                href={link.url ? link.url : ''}
-                key={index}
-                className={`mr-2 mt-2 inline-block rounded border border-indigo-600 ${
-                  link.appearance === 'primary' && 'bg-indigo-600'
-                } px-12 py-3 text-sm font-medium ${
-                  link.appearance === 'primary' ? 'text-white' : 'text-indigo-600'
-                } transition hover:bg-indigo-700 focus:outline-none focus:ring focus:ring-yellow-400`}
-                target={link.newTab ? '_blank' : '_self'}
-              >
-                {link.label}
-              </Link>
-            ))}
+            {data.links?.map(({ link }, index) => <LinkButton link={link} key={index} />)}
           </div>
         </div>
       </div>

diff --git a/src/common/Components/LinkButtons/index.tsx b/src/common/Components/LinkButtons/index.tsx
@@ -0,0 +1,79 @@
+import { Page } from '@/payload-types';
+import Link from 'next/link';
+
+interface Link {
+  type?: ('reference' | 'custom') | null;
+  newTab?: boolean | null;
+  reference?: {
+    relationTo: 'pages';
+    value: string | Page;
+  } | null;
+  url?: string | null;
+  label?: string;
+  appearance?: ('primary' | 'secondary') | null;
+}
+
+export const LinkButton = ({ link, className }: { link: Link; className?: string }) => {
+  if (link.type === 'custom') {
+    if (link.appearance)
+      return (
+        link && (
+          <Link
+            href={link.url ? link.url : ''}
+            className={`mr-2 mt-2 inline-block rounded border border-indigo-600 ${
+              link.appearance === 'primary' && 'bg-indigo-600'
+            } px-12 py-3 text-sm font-medium ${
+              link.appearance === 'primary' ? 'text-white' : 'text-indigo-600'
+            } transition hover:bg-indigo-700 hover:text-white focus:outline-none focus:ring focus:ring-yellow-400`}
+            target={link.newTab ? '_blank' : '_self'}
+          >
+            {link.label}
+          </Link>
+        )
+      );
+
+    return (
+      link && (
+        <Link
+          href={link.url ? link.url : ''}
+          className={`${className} text-sm font-semibold leading-6 text-indigo-600`}
+        >
+          {JSON.stringify(link)}
+          {link.label}
+        </Link>
+      )
+    );
+  }
+
+  if (link.type === 'reference') {
+    const doc = link.reference?.value;
+    if (typeof doc !== 'string' && doc?.slug) {
+      if (link.appearance) {
+        return (
+          link && (
+            <Link
+              className={`mr-2 mt-2 inline-block rounded border border-indigo-600 ${
+                link.appearance === 'primary' && 'bg-indigo-600'
+              } px-12 py-3 text-sm font-medium ${
+                link.appearance === 'primary' ? 'text-white' : 'text-indigo-600'
+              } transition hover:bg-indigo-700 hover:text-white focus:outline-none focus:ring focus:ring-yellow-400`}
+              target={link.newTab ? '_blank' : '_self'}
+              href={doc.slug}
+            >
+              {doc.title}
+            </Link>
+          )
+        );
+      }
+
+      return (
+        <Link
+          className={`${className} text-gray-500 transition hover:text-gray-500/75`}
+          href={doc.slug}
+        >
+          {doc.title}
+        </Link>
+      );
+    }
+  }
+};
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,7 +2,7 @@
 export default {
   content: [
     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/Components/**/*.{js,ts,jsx,tsx,mdx}',
     './src/common/**/*.{js,ts,jsx,tsx,mdx}',
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],