feat(ui): add ctaUrl field to Process block and link ArrowLink
This commit is contained in:
@@ -6,7 +6,7 @@ import { ArrowLink } from '../../components/ArrowLink'
|
|||||||
|
|
||||||
type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'process' }>
|
type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'process' }>
|
||||||
|
|
||||||
export const ProcessBlock: React.FC<Props> = ({ subtitle, title, steps, ctaText, image }) => {
|
export const ProcessBlock: React.FC<Props> = ({ subtitle, title, steps, ctaText, ctaUrl, image }) => {
|
||||||
const processMedia = typeof image === 'object' && image !== null ? (image as Media) : null;
|
const processMedia = typeof image === 'object' && image !== null ? (image as Media) : null;
|
||||||
const imageUrl = processMedia?.url || 'https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=1200&q=80';
|
const imageUrl = processMedia?.url || 'https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=1200&q=80';
|
||||||
const imageAlt = processMedia?.alt || 'Proces współpracy';
|
const imageAlt = processMedia?.alt || 'Proces współpracy';
|
||||||
@@ -52,7 +52,7 @@ export const ProcessBlock: React.FC<Props> = ({ subtitle, title, steps, ctaText,
|
|||||||
|
|
||||||
{ctaText && (
|
{ctaText && (
|
||||||
<div className="mt-4">
|
<div className="mt-4">
|
||||||
<ArrowLink href="/jak-sie-umowic">
|
<ArrowLink href={ctaUrl || '#'}>
|
||||||
{ctaText}
|
{ctaText}
|
||||||
</ArrowLink>
|
</ArrowLink>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -18,6 +18,7 @@ export const Process: Block = {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{ name: 'ctaText', type: 'text', localized: true },
|
{ name: 'ctaText', type: 'text', localized: true },
|
||||||
|
{ name: 'ctaUrl', type: 'text', localized: true },
|
||||||
{ name: 'image', type: 'upload', relationTo: 'media', required: true },
|
{ name: 'image', type: 'upload', relationTo: 'media', required: true },
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -23,15 +23,30 @@ export const ArrowLink: React.FC<ArrowLinkProps> = ({
|
|||||||
const circleSize = size === 'sm' ? 'w-10 h-10' : 'w-12 h-12';
|
const circleSize = size === 'sm' ? 'w-10 h-10' : 'w-12 h-12';
|
||||||
const iconSize = size === 'sm' ? 'w-4 h-4' : 'w-5 h-5';
|
const iconSize = size === 'sm' ? 'w-4 h-4' : 'w-5 h-5';
|
||||||
|
|
||||||
return (
|
const isAnchor = href?.startsWith('#')
|
||||||
<Link
|
|
||||||
href={href}
|
const innerContent = (
|
||||||
className={`group flex items-center gap-3 text-foreground font-semibold hover:text-accent transition-colors ${className}`}
|
<>
|
||||||
>
|
|
||||||
{children}
|
{children}
|
||||||
<div className={`${circleSize} rounded-full border border-border flex items-center justify-center group-hover:border-accent group-hover:bg-accent/5 transition-all`}>
|
<div className={`${circleSize} rounded-full border border-border flex items-center justify-center group-hover:border-accent group-hover:bg-accent/5 transition-all`}>
|
||||||
<ArrowRight className={`${iconSize} group-hover:translate-x-0.5 transition-transform`} />
|
<ArrowRight className={`${iconSize} group-hover:translate-x-0.5 transition-transform`} />
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
|
||||||
|
const classes = `group flex items-center gap-3 text-foreground font-semibold hover:text-accent transition-colors ${className}`
|
||||||
|
|
||||||
|
if (isAnchor) {
|
||||||
|
return (
|
||||||
|
<a href={href} className={classes}>
|
||||||
|
{innerContent}
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link href={href} className={classes}>
|
||||||
|
{innerContent}
|
||||||
</Link>
|
</Link>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -365,6 +365,7 @@ export interface Page {
|
|||||||
}[]
|
}[]
|
||||||
| null;
|
| null;
|
||||||
ctaText?: string | null;
|
ctaText?: string | null;
|
||||||
|
ctaUrl?: string | null;
|
||||||
image: number | Media;
|
image: number | Media;
|
||||||
id?: string | null;
|
id?: string | null;
|
||||||
blockName?: string | null;
|
blockName?: string | null;
|
||||||
@@ -792,6 +793,7 @@ export interface PagesSelect<T extends boolean = true> {
|
|||||||
id?: T;
|
id?: T;
|
||||||
};
|
};
|
||||||
ctaText?: T;
|
ctaText?: T;
|
||||||
|
ctaUrl?: T;
|
||||||
image?: T;
|
image?: T;
|
||||||
id?: T;
|
id?: T;
|
||||||
blockName?: T;
|
blockName?: T;
|
||||||
|
|||||||
Reference in New Issue
Block a user