rankrunners-dev/next-cochise
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: BoxMenuGrid block components

Browse Source
This commit is contained in:
RizqiSyahrendra 2025-02-13 13:51:36 +07:00
parent 60f40a495e
commit 40d4cfb53d
11 changed files with 234 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(main)/coba/page.tsx
View File

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

28
src/app/globals.css
View File

@ -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;

27
src/blocks/BoxMenuGrid.ts Normal file
View File

@ -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,
},
],
},
],
};

10
src/collections/Pages.ts
View File

@ -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",

25
src/components/Blocks/BoxMenuGrid/BoxMenu.tsx Normal file
View File

@ -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}`;
}

40
src/components/Blocks/BoxMenuGrid/index.tsx Normal file
View File

@ -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>
);
}

2
src/components/Blocks/RenderBlocks.tsx
View File

@ -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<{

5
src/components/Blogs/BlogCardItem.tsx
View File

@ -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">

28
src/components/HeaderNav.tsx
View File

@ -57,16 +57,16 @@ export default function HeaderNav({ links, animateY = false }: any) {
{Array.isArray(link?.child) && (
<>
<a
href="#"
<Link
href={link?.href ?? "#"}
className="mn-has-sub"
onClick={(e) => {
e.preventDefault();
toggleDropdown([link.text]);
}}
// onClick={(e) => {
// e.preventDefault();
// 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
href="#"
<Link
href={subLink?.href ?? "#"}
className="mn-has-sub"
onClick={(e) => {
e.preventDefault();
toggleDropdown([link.text, subLink.text]);
}}
// onClick={(e) => {
// e.preventDefault();
// 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) => (

81
src/payload-types.ts
View File

@ -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

4
tailwind.config.ts
View File

@ -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)",
},
},
},