dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pages): Page Editor module fixing and improvements

Browse Source
This commit is contained in:
Dwindi Ramadhana
2026-06-04 15:10:37 +07:00
parent fb1a6c40ef
commit 54a3a15f68
21 changed files with 489 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
customer-spa/src/pages/DynamicPage/sections/FeatureGridSection.tsx
View File

@@ -1,6 +1,7 @@
import { cn } from '@/lib/utils';
import * as LucideIcons from 'lucide-react';
import { getSectionBackground } from '@/lib/sectionStyles';
import { SectionBackgroundRenderer } from '@/components/SectionBackgroundRenderer';
interface FeatureItem {
title?: string;
@@ -78,43 +79,23 @@ export function FeatureGridSection({
const headingStyle = getTextStyles('heading');
const featureItemStyle = getTextStyles('feature_item');
const linkStyle = getTextStyles('link');
const hasCustomBackground = !!styles?.backgroundColor || !!styles?.backgroundImage || styles?.backgroundType === 'gradient';
const sectionBg = getSectionBackground(styles);
// Helper to get background style for dynamic schemes
const getBackgroundStyle = (): React.CSSProperties | undefined => {
if (hasCustomBackground) return sectionBg.style;
if (colorScheme === 'primary') {
return { backgroundColor: 'var(--wn-primary, #1a1a1a)' };
}
if (colorScheme === 'secondary') {
return { backgroundColor: 'var(--wn-secondary, #6b7280)' };
}
return undefined;
};
return (
<section
id={id}
className={cn(
'wn-section wn-feature-grid',
'wn-section wn-feature-grid relative overflow-hidden w-full',
`wn-feature-grid--${layout}`,
`wn-scheme--${colorScheme}`,
heightClasses,
{
'bg-muted': colorScheme === 'muted' && !hasCustomBackground,
'text-primary-foreground': colorScheme === 'primary' && !hasCustomBackground,
}
heightClasses
)}
style={getBackgroundStyle()}
style={sectionBg.style}
>
<div className={cn(
"mx-auto px-4",
styles?.contentWidth === 'full' ? 'w-full'
: styles?.contentWidth === 'boxed' ? 'max-w-5xl'
: 'container'
)}>
<SectionBackgroundRenderer bg={sectionBg} />
<div className="mx-auto px-4 relative z-10 w-full">
{heading && (
<h2
className={cn(
@@ -167,16 +148,22 @@ export function FeatureGridSection({
<p className="text-xs text-gray-400 mb-2 uppercase tracking-wider">{item.date}</p>
)}
{item.title && (
<h3 className="font-semibold text-gray-900 text-base leading-snug mb-2 group-hover:text-primary transition-colors line-clamp-2">
<h3 className={cn("font-semibold text-gray-900 leading-snug mb-2 group-hover:text-primary transition-colors line-clamp-2 w-full",
!elementStyles?.feature_item?.fontSize && "text-base",
featureItemStyle.classNames
)} style={featureItemStyle.style}>
{item.title}
</h3>
)}
{(item.excerpt || item.description) && (
<p className="text-sm text-gray-500 line-clamp-3 mb-4">
<p className={cn("text-gray-500 line-clamp-3 mb-4 w-full",
!elementStyles?.feature_item?.fontSize && "text-sm",
featureItemStyle.classNames
)} style={featureItemStyle.style}>
{item.excerpt || item.description}
</p>
)}
<span className="inline-flex items-center gap-1 text-sm font-medium text-primary">
<span className={cn("inline-flex items-center gap-1 text-sm font-medium text-primary", linkStyle.classNames)} style={linkStyle.style}>
Read more
<svg className="w-4 h-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />