rootadmin/multisite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wrapper

Browse source
This commit is contained in:
Mackie 2026-06-03 22:40:49 +08:00
parent 502acf04e5
commit d692200d4f
3 changed files with 80 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/blocks/RenderBlocks.tsx
View file

@ -54,8 +54,7 @@ export const RenderBlocks: React.FC<{
if (Block) { if (Block) {
return ( return (
<div className="my-16" key={index}> <div key={index}>
{/* @ts-expect-error there may be some mismatch between the expected types here */}
<Block {...block} disableInnerContainer /> <Block {...block} disableInnerContainer />
</div> </div>
) )

9
src/components/ui/Container.tsx Normal file
View file

@ -0,0 +1,9 @@
// components/ui/Container.tsx
import React from 'react'
export const Container: React.FC<{ children: React.ReactNode; className?: string }> = ({
children,
className = '',
}) => {
return <div className={`mx-auto w-full max-w-[1200px] px-8 ${className}`}>{children}</div>
}

128
src/heros/SplitHero/index.tsx
View file

@ -1,5 +1,6 @@
import React from 'react' import React from 'react'
import Image from 'next/image' import Image from 'next/image'
import { Container } from '@/components/ui/Container'
import type { Page } from '@/payload-types' import type { Page } from '@/payload-types'
import type { Media as MediaType } from '@/payload-types' import type { Media as MediaType } from '@/payload-types'
@ -18,67 +19,78 @@ export const SplitHero: React.FC<SplitHeroProps> = function (props) {
const hasImage = splitImage && typeof splitImage === 'object' && splitImage.url const hasImage = splitImage && typeof splitImage === 'object' && splitImage.url
return ( return (
<div className="grid grid-cols-1 md:grid-cols-2 border-b border-foreground/8"> <div className="border-b border-foreground/8">
<div className="flex flex-col justify-between gap-8 px-8 py-14 md:border-r border-foreground/8"> <Container className="px-0">
<div> <div className="grid grid-cols-1 md:grid-cols-2">
{eyebrow && ( <div className="flex flex-col justify-between gap-8 px-8 py-14 md:border-r border-foreground/8">
<p className="text-xs tracking-widest uppercase text-foreground/30 mb-5">{eyebrow}</p> <div>
)} {eyebrow && (
{heading && ( <p className="text-xs tracking-widest uppercase text-foreground/30 mb-5">
<h1 className="text-4xl font-medium text-foreground leading-[1.1] mb-4 whitespace-pre-line"> {eyebrow}
{heading} </p>
</h1> )}
)} {heading && (
{subtext && ( <h1 className="text-4xl font-medium text-foreground leading-[1.1] mb-4 whitespace-pre-line">
<p className="text-sm text-foreground/50 leading-relaxed max-w-sm mb-6">{subtext}</p> {heading}
)} </h1>
{Array.isArray(tags) && tags.length > 0 && ( )}
<div className="flex flex-wrap gap-2"> {subtext && (
{tags.map(function ({ tag }, i) { <p className="text-sm text-foreground/50 leading-relaxed max-w-sm mb-6">
return ( {subtext}
<span </p>
key={i} )}
className="text-xs text-foreground/40 border border-foreground/10 rounded-full px-3 py-1" {Array.isArray(tags) && tags.length > 0 && (
> <div className="flex flex-wrap gap-2">
{tag} {tags.map(function ({ tag }, i) {
</span> return (
) <span
})} key={i}
className="text-xs text-foreground/40 border border-foreground/10 rounded-full px-3 py-1"
>
{tag}
</span>
)
})}
</div>
)}
</div>
<div className="flex gap-3">
{primaryCta && primaryCta.label && primaryCta.url && (
<a
href={primaryCta.url}
className="flex items-center gap-2 text-sm font-medium text-foreground bg-muted/50 border border-foreground/10 rounded-lg px-5 py-2.5 hover:bg-muted transition-colors"
>
<i className="ti ti-briefcase" style={{ fontSize: 14 }} aria-hidden="true" />
{primaryCta.label}
</a>
)}
{secondaryCta && secondaryCta.label && secondaryCta.url && (
<a
href={secondaryCta.url}
className="flex items-center gap-2 text-sm text-foreground/50 border border-foreground/10 rounded-lg px-5 py-2.5 hover:text-foreground/80 hover:bg-muted/30 transition-colors"
>
<i className="ti ti-mail" style={{ fontSize: 14 }} aria-hidden="true" />
{secondaryCta.label}
</a>
)}
</div> </div>
)}
</div>
<div className="flex gap-3">
{primaryCta && primaryCta.label && primaryCta.url && (
<a
href={primaryCta.url}
className="flex items-center gap-2 text-sm font-medium text-foreground bg-muted/50 border border-foreground/10 rounded-lg px-5 py-2.5 hover:bg-muted transition-colors"
>
<i className="ti ti-briefcase" style={{ fontSize: 14 }} aria-hidden="true" />
{primaryCta.label}
</a>
)}
{secondaryCta && secondaryCta.label && secondaryCta.url && (
<a
href={secondaryCta.url}
className="flex items-center gap-2 text-sm text-foreground/50 border border-foreground/10 rounded-lg px-5 py-2.5 hover:text-foreground/80 hover:bg-muted/30 transition-colors"
>
<i className="ti ti-mail" style={{ fontSize: 14 }} aria-hidden="true" />
{secondaryCta.label}
</a>
)}
</div>
</div>
<div className="bg-muted/30 flex items-center justify-center min-h-[260px]">
{hasImage ? (
<div className="relative w-full h-full min-h-[260px]">
<Image src={splitImage.url!} alt={splitImage.alt ?? ''} fill className="object-cover" />
</div> </div>
) : ( <div className="bg-muted/30 flex items-center justify-center min-h-[320px] relative overflow-hidden">
<div className="flex flex-col items-center justify-center gap-2 opacity-20"> {hasImage ? (
<i className="ti ti-user" style={{ fontSize: 48 }} aria-hidden="true" /> <Image
src={splitImage.url!}
alt={splitImage.alt ?? ''}
fill
className="object-cover object-top"
/>
) : (
<div className="flex flex-col items-center justify-center gap-2 opacity-20">
<i className="ti ti-user" style={{ fontSize: 48 }} aria-hidden="true" />
</div>
)}
</div> </div>
)} </div>
</div> </Container>
</div> </div>
) )
} }