admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

x

Browse Source
This commit is contained in:
Your Name committed 2026-10-04 18:59:27 +07:00
1 parent b641acbeb7
commit e349ef5b84
14 files changed
+720 -558
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/spa/src/components/DynamicHero.tsx
+134 -129
View File
@@ -7,6 +7,138 @@ interface DynamicHeroProps {
payload: HeroSectionPayload;
}
// Map 9-box grid position to mobile flex classes
export const getHeroMobilePositionClasses = (pos: string) => {
switch (pos) {
case 'top-left':
return {
wrapper: 'justify-start items-start text-left pt-20 pb-12 pl-6 pr-6',
content: 'items-start text-left',
actions: 'items-start justify-start'
};
case 'top-center':
return {
wrapper: 'justify-start items-center text-center pt-20 pb-12 px-6',
content: 'items-center text-center',
actions: 'items-center justify-center'
};
case 'top-right':
return {
wrapper: 'justify-start items-end text-right pt-20 pb-12 pr-6 pl-6',
content: 'items-end text-right',
actions: 'items-end justify-end'
};
case 'center-left':
return {
wrapper: 'justify-center items-start text-left py-16 pl-6 pr-6',
content: 'items-start text-left',
actions: 'items-start justify-start'
};
case 'center-right':
return {
wrapper: 'justify-center items-end text-right py-16 pr-6 pl-6',
content: 'items-end text-right',
actions: 'items-end justify-end'
};
case 'bottom-left':
return {
wrapper: 'justify-end items-start text-left pt-12 pb-16 pl-6 pr-6',
content: 'items-start text-left',
actions: 'items-start justify-start'
};
case 'bottom-center':
return {
wrapper: 'justify-end items-center text-center pt-12 pb-16 px-6',
content: 'items-center text-center',
actions: 'items-center justify-center'
};
case 'bottom-right':
return {
wrapper: 'justify-end items-end text-right pt-12 pb-16 pr-6 pl-6',
content: 'items-end text-right',
actions: 'items-end justify-end'
};
case 'center':
default:
return {
wrapper: 'justify-center items-center text-center py-16 px-6',
content: 'items-center text-center',
actions: 'items-center justify-center'
};
}
};
// Map 9-box grid position to desktop (md:) flex classes
export const getHeroDesktopPositionClasses = (pos: string) => {
switch (pos) {
case 'top-left':
return {
wrapper: 'md:justify-start md:items-start md:text-left md:pt-28 md:pb-12 md:pl-16 md:pr-6',
content: 'md:items-start md:text-left',
actions: 'md:items-start md:justify-start'
};
case 'top-center':
return {
wrapper: 'md:justify-start md:items-center md:text-center md:pt-28 md:pb-12 md:px-6',
content: 'md:items-center md:text-center',
actions: 'md:items-center md:justify-center'
};
case 'top-right':
return {
wrapper: 'md:justify-start md:items-end md:text-right md:pt-28 md:pb-12 md:pr-16 md:pl-6',
content: 'md:items-end md:text-right',
actions: 'md:items-end md:justify-end'
};
case 'center-left':
return {
wrapper: 'md:justify-center md:items-start md:text-left md:py-16 md:pl-16 md:pr-6',
content: 'md:items-start md:text-left',
actions: 'md:items-start md:justify-start'
};
case 'center-right':
return {
wrapper: 'md:justify-center md:items-end md:text-right md:py-16 md:pr-16 md:pl-6',
content: 'md:items-end md:text-right',
actions: 'md:items-end md:justify-end'
};
case 'bottom-left':
return {
wrapper: 'md:justify-end md:items-start md:text-left md:pt-12 md:pb-24 md:pl-16 md:pr-6',
content: 'md:items-start md:text-left',
actions: 'md:items-start md:justify-start'
};
case 'bottom-center':
return {
wrapper: 'md:justify-end md:items-center md:text-center md:pt-12 md:pb-24 md:px-6',
content: 'md:items-center md:text-center',
actions: 'md:items-center md:justify-center'
};
case 'bottom-right':
return {
wrapper: 'md:justify-end md:items-end md:text-right md:pt-12 md:pb-24 md:pr-16 md:pl-6',
content: 'md:items-end md:text-right',
actions: 'md:items-end md:justify-end'
};
case 'center':
default:
return {
wrapper: 'md:justify-center md:items-center md:text-center md:py-16 md:px-6',
content: 'md:items-center md:text-center',
actions: 'md:items-center md:justify-center'
};
}
};
export function getHeroPositionClasses(mobilePos: string, desktopPos: string) {
const mClasses = getHeroMobilePositionClasses(mobilePos);
const dClasses = getHeroDesktopPositionClasses(desktopPos);
return {
wrapperClasses: `${mClasses.wrapper} ${dClasses.wrapper}`,
contentClasses: `${mClasses.content} ${dClasses.content}`,
actionsClasses: `${mClasses.actions} ${dClasses.actions}`,
};
}
export default function DynamicHero({ payload }: DynamicHeroProps) {
const { t, i18n } = useTranslation();
const lang = i18n.language;
@@ -53,134 +185,7 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
});
};
// Map 9-box grid position to mobile flex classes
const getMobilePositionClasses = (pos: string) => {
switch (pos) {
case 'top-left':
return {
wrapper: 'justify-start items-start text-left pt-20 pb-12 pl-6 pr-6',
content: 'items-start text-left',
actions: 'items-start justify-start'
};
case 'top-center':
return {
wrapper: 'justify-start items-center text-center pt-20 pb-12 px-6',
content: 'items-center text-center',
actions: 'items-center justify-center'
};
case 'top-right':
return {
wrapper: 'justify-start items-end text-right pt-20 pb-12 pr-6 pl-6',
content: 'items-end text-right',
actions: 'items-end justify-end'
};
case 'center-left':
return {
wrapper: 'justify-center items-start text-left py-16 pl-6 pr-6',
content: 'items-start text-left',
actions: 'items-start justify-start'
};
case 'center-right':
return {
wrapper: 'justify-center items-end text-right py-16 pr-6 pl-6',
content: 'items-end text-right',
actions: 'items-end justify-end'
};
case 'bottom-left':
return {
wrapper: 'justify-end items-start text-left pt-12 pb-16 pl-6 pr-6',
content: 'items-start text-left',
actions: 'items-start justify-start'
};
case 'bottom-center':
return {
wrapper: 'justify-end items-center text-center pt-12 pb-16 px-6',
content: 'items-center text-center',
actions: 'items-center justify-center'
};
case 'bottom-right':
return {
wrapper: 'justify-end items-end text-right pt-12 pb-16 pr-6 pl-6',
content: 'items-end text-right',
actions: 'items-end justify-end'
};
case 'center':
default:
return {
wrapper: 'justify-center items-center text-center py-16 px-6',
content: 'items-center text-center',
actions: 'items-center justify-center'
};
}
};
// Map 9-box grid position to desktop (md:) flex classes
const getDesktopPositionClasses = (pos: string) => {
switch (pos) {
case 'top-left':
return {
wrapper: 'md:justify-start md:items-start md:text-left md:pt-28 md:pb-12 md:pl-16 md:pr-6',
content: 'md:items-start md:text-left',
actions: 'md:items-start md:justify-start'
};
case 'top-center':
return {
wrapper: 'md:justify-start md:items-center md:text-center md:pt-28 md:pb-12 md:px-6',
content: 'md:items-center md:text-center',
actions: 'md:items-center md:justify-center'
};
case 'top-right':
return {
wrapper: 'md:justify-start md:items-end md:text-right md:pt-28 md:pb-12 md:pr-16 md:pl-6',
content: 'md:items-end md:text-right',
actions: 'md:items-end md:justify-end'
};
case 'center-left':
return {
wrapper: 'md:justify-center md:items-start md:text-left md:py-16 md:pl-16 md:pr-6',
content: 'md:items-start md:text-left',
actions: 'md:items-start md:justify-start'
};
case 'center-right':
return {
wrapper: 'md:justify-center md:items-end md:text-right md:py-16 md:pr-16 md:pl-6',
content: 'md:items-end md:text-right',
actions: 'md:items-end md:justify-end'
};
case 'bottom-left':
return {
wrapper: 'md:justify-end md:items-start md:text-left md:pt-12 md:pb-24 md:pl-16 md:pr-6',
content: 'md:items-start md:text-left',
actions: 'md:items-start md:justify-start'
};
case 'bottom-center':
return {
wrapper: 'md:justify-end md:items-center md:text-center md:pt-12 md:pb-24 md:px-6',
content: 'md:items-center md:text-center',
actions: 'md:items-center md:justify-center'
};
case 'bottom-right':
return {
wrapper: 'md:justify-end md:items-end md:text-right md:pt-12 md:pb-24 md:pr-16 md:pl-6',
content: 'md:items-end md:text-right',
actions: 'md:items-end md:justify-end'
};
case 'center':
default:
return {
wrapper: 'md:justify-center md:items-center md:text-center md:py-16 md:px-6',
content: 'md:items-center md:text-center',
actions: 'md:items-center md:justify-center'
};
}
};
const mClasses = getMobilePositionClasses(mobilePosition);
const dClasses = getDesktopPositionClasses(desktopPosition);
const wrapperClasses = `${mClasses.wrapper} ${dClasses.wrapper}`;
const contentClasses = `${mClasses.content} ${dClasses.content}`;
const actionsClasses = `${mClasses.actions} ${dClasses.actions}`;
const { wrapperClasses, contentClasses, actionsClasses } = getHeroPositionClasses(mobilePosition, desktopPosition);
const overlayStyle = (payload as any).overlayStyle || 'gradient';
const overlayOpacity = (payload as any).overlayOpacity !== undefined ? (payload as any).overlayOpacity : 45;
@@ -245,7 +250,7 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
</h1>
)}
{description && (
<p className="ui-hero-copy !text-white/90 drop-shadow-md !pb-2">
<p className={`ui-hero-copy !text-white/90 drop-shadow-md !pb-2 ${contentClasses.includes('text-left') ? '!mx-0' : contentClasses.includes('text-right') ? '!ml-auto !mr-0' : '!mx-auto'}`}>
{description}
</p>
)}