feat: BoxMenuGrid block components

src/app/(main)/coba/page.tsx

@@ -1,3 +1,3 @@
 export default function CobaPage() {
-  return <>{/* <ImageSliderBlock /> */}</>;
+  return <></>;
 }

src/app/globals.css

@@ -3,12 +3,22 @@
 @tailwind utilities;
 
 :root {
+  --ext-color-primary-1: #6ec2b6;
+  --ext-color-primary-2: #90d4c9;
+  --ext-color-primary-3: #2e2d51;
+  --ext-color-primary-4: #d4a187;
+  --ext-color-primary-5: #e7ccc0;
   --background: #ffffff;
   --foreground: #171717;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
+    --ext-color-primary-1: #6ec2b6;
+    --ext-color-primary-2: #90d4c9;
+    --ext-color-primary-3: #2e2d51;
+    --ext-color-primary-4: #d4a187;
+    --ext-color-primary-5: #e7ccc0;
     --background: #0a0a0a;
     --foreground: #ededed;
   }
@@ -20,6 +30,24 @@ body {
   font-family: Arial, Helvetica, sans-serif;
 }
 
+@layer components {
+  .ext-btn {
+    @apply py-2 px-4 rounded-full hover:opacity-95 hover:scale-95 transition-transform font-semibold no-underline;
+  }
+
+  .ext-btn-primary {
+    @apply bg-extColorPrimary text-white;
+  }
+
+  .ext-btn-primary2 {
+    @apply bg-extColorPrimary2 text-white;
+  }
+
+  .ext-btn-primary3 {
+    @apply bg-extColorPrimary3 text-white;
+  }
+}
+
 .bg-gradient {
   background: linear-gradient(135deg, #6ec2b6, #90d4c9);
   position: relative;

src/blocks/BoxMenuGrid.ts

@@ -0,0 +1,27 @@
+import { Block } from "payload";
+
+export const BoxMenuGridBlock: Block = {
+  slug: "boxMenuGridBlock",
+  fields: [
+    {
+      name: "boxMenuGridItem",
+      type: "array",
+      fields: [
+        {
+          name: "title",
+          type: "text",
+          required: true,
+        },
+        {
+          name: "description",
+          type: "text",
+        },
+        {
+          name: "href",
+          type: "text",
+          required: true,
+        },
+      ],
+    },
+  ],
+};

src/collections/Pages.ts

@@ -1,4 +1,5 @@
 import { BeforeFooterBlock } from "@/blocks/BeforeFooter";
+import { BoxMenuGridBlock } from "@/blocks/BoxMenuGrid";
 import { ContentBlock } from "@/blocks/Content";
 import { HorizontalImageContentBlock } from "@/blocks/HorizontalImageContent";
 import { ImageSliderBlock } from "@/blocks/ImageSlider";
@@ -37,7 +38,14 @@ export const Pages: CollectionConfig = {
       label: "Page Layout",
       type: "blocks",
       minRows: 1,
-      blocks: [ContentBlock, BeforeFooterBlock, OurTeamBlock, HorizontalImageContentBlock, ImageSliderBlock],
+      blocks: [
+        ContentBlock,
+        BeforeFooterBlock,
+        OurTeamBlock,
+        HorizontalImageContentBlock,
+        ImageSliderBlock,
+        BoxMenuGridBlock,
+      ],
     },
     {
       name: "meta",

src/components/Blocks/BoxMenuGrid/BoxMenu.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+
+export interface BoxMenuProps {
+  title: string;
+  description?: string;
+  href: string;
+}
+
+export default function BoxMenu({ title, description, href }: BoxMenuProps) {
+  return (
+    <div className="flex flex-col bg-extColorPrimary4 text-white rounded-md items-center px-4 py-4">
+      <span className="font-semibold text-2xl">{title ?? ""}</span>
+      <div className="text-center font-medium mt-4">{description ?? ""}</div>
+      <Link href={fixedHref(href)} className="ext-btn ext-btn-primary mt-4">
+        Learn More
+      </Link>
+    </div>
+  );
+}
+
+function fixedHref(href: string) {
+  if (href.charAt(0) === "/") return href;
+
+  return `/${href}`;
+}

src/components/Blocks/BoxMenuGrid/index.tsx

@@ -0,0 +1,40 @@
+import BoxMenu from "./BoxMenu";
+
+type BoxMenuGridItem = {
+  id: string;
+  title: string;
+  description: string;
+  href: string;
+};
+
+export interface BoxMenuGridBlockProps {
+  boxMenuGridItem: BoxMenuGridItem[];
+}
+
+export function BoxMenuGridBlock({ boxMenuGridItem }: BoxMenuGridBlockProps) {
+  const dataLength = boxMenuGridItem.length ?? 0;
+
+  return (
+    <div className="py-24 px-4 bg-[linear-gradient(to_bottom,var(--ext-color-primary-5),#ffffff)]">
+      {dataLength === 1 && (
+        <div className="flex justify-center">
+          <div className="w-2/3">
+            <BoxMenu
+              title="Chemoterapy"
+              description="Chemotherapy is a range of chemical treatments that are designed to combat the growth and spread of
+                  cancer."
+              href="radixact"
+            />
+          </div>
+        </div>
+      )}
+      {dataLength > 1 && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full">
+          {boxMenuGridItem.map((b, idx) => (
+            <BoxMenu key={idx} title={b?.title ?? ""} description={b?.description ?? ""} href={b.href} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/Blocks/RenderBlocks.tsx

@@ -6,6 +6,7 @@ import { BeforeFooterBlock } from "./BeforeFooter";
 import { OurTeamBlock } from "./OurTeam";
 import { HorizontalImageContentBlock } from "./HorizontalImageContent";
 import { ImageSliderBlock } from "./ImageSlider";
+import { BoxMenuGridBlock } from "./BoxMenuGrid";
 
 const blockComponents = {
   contentBlock: ContentBlock,
@@ -13,6 +14,7 @@ const blockComponents = {
   ourTeamBlock: OurTeamBlock,
   horizontalImageContentBlock: HorizontalImageContentBlock,
   imageSliderBlock: ImageSliderBlock,
+  boxMenuGridBlock: BoxMenuGridBlock,
 };
 
 export const RenderBlocks: React.FC<{

src/components/Blogs/BlogCardItem.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import Link from "next/link";
 
 export interface BlogCardItemProps {
   data: {
@@ -22,13 +23,13 @@ export function BlogCardItem({ data }: BlogCardItemProps) {
     <div className="post-prev-3 col-12 col-lg-10 offset-lg-1 col-xl-6 offset-xl-0 mt-50">
       <div className="post-prev-3-container d-block d-sm-flex">
         <div className="post-prev-3-img">
-          <a href={`/${data.slug}`}>
+          <a href={`/${data.slug}/`}>
             <Image width={400} height={488} src={data?.img?.url ?? ""} alt={data?.img?.alt ?? ""} />
           </a>
         </div>
         <div className="post-prev-3-intro">
           <h4 className="post-prev-3-title">
-            <a href={`/${data.slug}`}>{data.title}</a>
+            <a href={`/${data.slug}/`}>{data.title}</a>
           </h4>
           <div className="post-prev-3-text">{data.contentPreview}</div>
           <div className="post-prev-3-info clearfix">

src/components/HeaderNav.tsx

@@ -57,16 +57,16 @@ export default function HeaderNav({ links, animateY = false }: any) {
 
             {Array.isArray(link?.child) && (
               <>
-                <a
+                <Link
-                  href="#"
+                  href={link?.href ?? "#"}
                   className="mn-has-sub"
-                  onClick={(e) => {
+                  // onClick={(e) => {
-                    e.preventDefault();
+                  //   e.preventDefault();
-                    toggleDropdown([link.text]);
+                  //   toggleDropdown([link.text]);
-                  }}
+                  // }}
                 >
                   {link.text} <i className="mi-chevron-down" />
-                </a>
+                </Link>
 
                 <ul className={`mn-sub to-left ${isDropdownOpen.includes(link.text) && "open"}`} ref={dropdownRef}>
                   {link.child.map((subLink: any, subLinkIdx: number) => (
@@ -78,16 +78,16 @@ export default function HeaderNav({ links, animateY = false }: any) {
                       )}
                       {Array.isArray(subLink?.child) && (
                         <>
-                          <a
+                          <Link
-                            href="#"
+                            href={subLink?.href ?? "#"}
                             className="mn-has-sub"
-                            onClick={(e) => {
+                            // onClick={(e) => {
-                              e.preventDefault();
+                            //   e.preventDefault();
-                              toggleDropdown([link.text, subLink.text]);
+                            //   toggleDropdown([link.text, subLink.text]);
-                            }}
+                            // }}
                           >
                             {subLink.text} <i className="mi-chevron-down" />
-                          </a>
+                          </Link>
 
                           <ul className={`mn-sub to-left ${isDropdownOpen.includes(subLink.text) && "open"}`}>
                             {subLink.child.map((subLink2: any, subLinkIdx2: number) => (

src/payload-types.ts

@@ -6,6 +6,60 @@
  * and re-run `payload generate:types` to regenerate this file.
  */
 
+/**
+ * Supported timezones in IANA format.
+ *
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "supportedTimezones".
+ */
+export type SupportedTimezones =
+  | 'Pacific/Midway'
+  | 'Pacific/Niue'
+  | 'Pacific/Honolulu'
+  | 'Pacific/Rarotonga'
+  | 'America/Anchorage'
+  | 'Pacific/Gambier'
+  | 'America/Los_Angeles'
+  | 'America/Tijuana'
+  | 'America/Denver'
+  | 'America/Phoenix'
+  | 'America/Chicago'
+  | 'America/Guatemala'
+  | 'America/New_York'
+  | 'America/Bogota'
+  | 'America/Caracas'
+  | 'America/Santiago'
+  | 'America/Buenos_Aires'
+  | 'America/Sao_Paulo'
+  | 'Atlantic/South_Georgia'
+  | 'Atlantic/Azores'
+  | 'Atlantic/Cape_Verde'
+  | 'Europe/London'
+  | 'Europe/Berlin'
+  | 'Africa/Lagos'
+  | 'Europe/Athens'
+  | 'Africa/Cairo'
+  | 'Europe/Moscow'
+  | 'Asia/Riyadh'
+  | 'Asia/Dubai'
+  | 'Asia/Baku'
+  | 'Asia/Karachi'
+  | 'Asia/Tashkent'
+  | 'Asia/Calcutta'
+  | 'Asia/Dhaka'
+  | 'Asia/Almaty'
+  | 'Asia/Jakarta'
+  | 'Asia/Bangkok'
+  | 'Asia/Shanghai'
+  | 'Asia/Singapore'
+  | 'Asia/Tokyo'
+  | 'Asia/Seoul'
+  | 'Australia/Sydney'
+  | 'Pacific/Guam'
+  | 'Pacific/Noumea'
+  | 'Pacific/Auckland'
+  | 'Pacific/Fiji';
+
 export interface Config {
   auth: {
     users: UserAuthOperations;
@@ -245,6 +299,19 @@ export interface Page {
             blockName?: string | null;
             blockType: 'imageSliderBlock';
           }
+        | {
+            boxMenuGridItem?:
+              | {
+                  title: string;
+                  description?: string | null;
+                  href: string;
+                  id?: string | null;
+                }[]
+              | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'boxMenuGridBlock';
+          }
       )[]
     | null;
   meta?: {
@@ -647,6 +714,20 @@ export interface PagesSelect<T extends boolean = true> {
               id?: T;
               blockName?: T;
             };
+        boxMenuGridBlock?:
+          | T
+          | {
+              boxMenuGridItem?:
+                | T
+                | {
+                    title?: T;
+                    description?: T;
+                    href?: T;
+                    id?: T;
+                  };
+              id?: T;
+              blockName?: T;
+            };
       };
   meta?:
     | T

tailwind.config.ts

@@ -11,6 +11,10 @@ export default {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
+        extColorPrimary: "var(--ext-color-primary-1)",
+        extColorPrimary2: "var(--ext-color-primary-2)",
+        extColorPrimary3: "var(--ext-color-primary-3)",
+        extColorPrimary4: "var(--ext-color-primary-4)",
       },
     },
   },