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-06-19 19:49:51 -04:00
1 parent 716bb98b50
commit cb51c0faeb
11 files changed
+123 -26
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/spa/src/components/Navbar.tsx
+25 -3
View File
@@ -86,20 +86,42 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
// Keep --navbar-bottom in sync so the fixed mega-menu dropdown sits flush below the navbar
useEffect(() => {
let animationFrameId: number;
const navElement = navRef.current;
const updateNavBottom = () => {
if (navRef.current) {
const bottom = navRef.current.getBoundingClientRect().bottom
if (navElement) {
const bottom = navElement.getBoundingClientRect().bottom
document.documentElement.style.setProperty('--navbar-bottom', `${bottom}px`)
}
}
updateNavBottom()
window.addEventListener('scroll', updateNavBottom, { passive: true })
window.addEventListener('resize', updateNavBottom)
const observer = new ResizeObserver(() => {
cancelAnimationFrame(animationFrameId);
animationFrameId = requestAnimationFrame(updateNavBottom);
});
if (navElement) {
observer.observe(navElement);
navElement.addEventListener('transitionend', updateNavBottom);
}
observer.observe(document.body);
return () => {
window.removeEventListener('scroll', updateNavBottom)
window.removeEventListener('resize', updateNavBottom)
observer.disconnect()
if (navElement) {
navElement.removeEventListener('transitionend', updateNavBottom);
}
}, [])
cancelAnimationFrame(animationFrameId);
}
}, [topOffsetClassName])
useEffect(() => { setMobileOpen(false) }, [navigate])
useEffect(() => {
apps/website/package.json
+6 -5
View File
@@ -9,15 +9,16 @@
"lint": "eslint"
},
"dependencies": {
"@homaroma/types": "workspace:*",
"axios": "^1.7.0",
"i18next": "^24.0.0",
"lucide-react": "^0.475.0",
"next": "16.2.4",
"react": "19.2.4",
"react-dom": "19.2.4",
"@homaroma/types": "workspace:*",
"lucide-react": "^0.475.0",
"zustand": "^5.0.0",
"i18next": "^24.0.0",
"react-i18next": "^15.0.0",
"axios": "^1.7.0"
"swiper": "^12.2.0",
"zustand": "^5.0.0"
},
"devDependencies": {
"@tailwindcss/postcss": "^4",
apps/website/src/app/[slug]/page.tsx
+14 -1
View File
@@ -3,6 +3,7 @@ import type { Metadata } from 'next'
import DynamicPageRenderer from '../../components/dynamic/DynamicPageRenderer'
import { getCategoriesResult, getCmsPageResult } from '../../lib/cms'
import { splitCmsLayoutSections } from '../../lib/cms-sections'
const lang = 'all'
@@ -78,10 +79,22 @@ export default async function CmsCustomPage({ params }: { params: Promise<{ slug
console.error(`[website-cms] categories unavailable for CMS page "${slug}": ${categoriesResult.error}`)
}
const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(sections)
return (
<main className="min-h-[70vh] bg-pop-bg">
{sections.length > 0 ? (
<DynamicPageRenderer sections={sections} categories={categories} lang={lang} />
<>
{announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)}
{heroSections.length > 0 && (
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
)}
{bottomSections.length > 0 && (
<DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
)}
</>
) : (
<div className="mx-auto max-w-4xl px-6 py-24 text-center">
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">HomAroma</p>
apps/website/src/app/globals.css
+9
View File
@@ -85,3 +85,12 @@ html {
border-radius: 16px;
box-shadow: var(--shadow-brutal);
}
/* Announcement Bar Layout Shifting via CSS :has() */
body:has(.announcement-bar) .global-navbar[data-scrolled="false"] {
top: 44px; /* Adjusts Navbar down when AnnouncementBar is present at the top */
}
body:has(.announcement-bar) .global-main {
padding-top: 116px; /* 72px original pt + 44px AnnouncementBar */
}
apps/website/src/app/layout.tsx
+1 -1
View File
@@ -89,7 +89,7 @@ export default async function RootLayout({
<body className="min-h-screen bg-pop-bg text-pop-black font-sans antialiased">
<ClientProviders>
<Navbar categories={categories} initialMenu={initialMenu} settings={settings} />
<main className="pt-[72px]">
<main className="global-main pt-[72px]">
{children}
</main>
<Footer
apps/website/src/app/page.tsx
+13 -1
View File
@@ -1,6 +1,7 @@
import type { Metadata } from 'next'
import DynamicPageRenderer from '../components/dynamic/DynamicPageRenderer'
import { getCategories, getCmsPage } from '../lib/cms'
import { splitCmsLayoutSections } from '../lib/cms-sections'
const lang = 'all'
@@ -20,11 +21,22 @@ export default async function HomePage() {
])
const sections = page?.sections ?? []
const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(sections)
return (
<div className="min-h-screen bg-pop-bg">
{sections.length > 0 ? (
<DynamicPageRenderer sections={sections} categories={categories} lang={lang} />
<>
{announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)}
{heroSections.length > 0 && (
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
)}
{bottomSections.length > 0 && (
<DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
)}
</>
) : (
<section className="mx-auto flex min-h-[70vh] max-w-5xl flex-col items-center justify-center px-6 text-center">
<p className="mb-4 text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">
apps/website/src/components/Footer.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ export default function Footer({
{/* Col 1 — Brand */}
<div className="space-y-6">
<div className="text-2xl font-bold tracking-widest">
{brandName} <span className="text-sm font-semibold italic text-pop-pink">Essential</span>
{brandName}
</div>
<p className="text-sm leading-relaxed text-gray-600">
{resolveLocalized(settings?.footerDescription, effectiveLang) || t('footer.catchphrase')}
apps/website/src/components/Navbar.tsx
+28 -7
View File
@@ -111,22 +111,42 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
}, [])
useEffect(() => {
let animationFrameId: number;
const navElement = navRef.current;
const updateNavBottom = () => {
if (navRef.current) {
const bottom = navRef.current.getBoundingClientRect().bottom
if (navElement) {
const bottom = navElement.getBoundingClientRect().bottom
document.documentElement.style.setProperty('--navbar-bottom', `${bottom}px`)
}
}
updateNavBottom()
window.addEventListener('scroll', updateNavBottom, { passive: true })
window.addEventListener('resize', updateNavBottom)
const observer = new ResizeObserver(() => {
cancelAnimationFrame(animationFrameId);
animationFrameId = requestAnimationFrame(updateNavBottom);
});
if (navElement) {
observer.observe(navElement);
navElement.addEventListener('transitionend', updateNavBottom);
}
observer.observe(document.body);
return () => {
window.removeEventListener('scroll', updateNavBottom)
window.removeEventListener('resize', updateNavBottom)
observer.disconnect()
if (navElement) {
navElement.removeEventListener('transitionend', updateNavBottom);
}
}, [])
cancelAnimationFrame(animationFrameId);
}
}, [scrolled])
useEffect(() => {
document.body.style.overflow = (searchOpen || mobileOpen || langSheetOpen) ? 'hidden' : ''
@@ -143,7 +163,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
}
}
const iconButtonClass = 'rounded-full p-1.5 text-pop-black/65 transition-all hover:bg-pop-bg hover:text-pop-pink md:p-2'
const iconButtonClass = 'group rounded-full p-2 text-pop-black transition-all hover:bg-pop-pink/10 hover:text-pop-pink md:p-2.5'
const activeLanguage = LANGUAGES.find((language) => lang.startsWith(language.code) || language.code.startsWith(lang)) ?? LANGUAGES[0]
const brandName = settings?.brandName || 'HomAroma'
@@ -151,7 +171,8 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
<>
<nav
ref={navRef}
className={`fixed top-0 z-50 w-full border-b border-black/5 px-4 py-3.5 transition-all duration-300 md:px-6 md:py-4 ${
data-scrolled={scrolled}
className={`global-navbar fixed top-0 z-50 w-full border-b border-black/5 px-4 py-3.5 transition-all duration-300 md:px-6 md:py-4 ${
scrolled
? 'bg-white/95 shadow-lg shadow-black/5 backdrop-blur-xl'
: 'bg-white/80 backdrop-blur-xl md:bg-[#F9F8F5] md:backdrop-blur-none'
@@ -164,7 +185,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
onClick={() => setMobileOpen(false)}
className="shrink-0 text-xl font-bold uppercase italic tracking-widest text-pop-black md:text-2xl"
>
{brandName} <span className="hidden text-xs font-light not-italic text-pop-black/55 md:inline md:text-sm">Essential</span>
{brandName}
</Link>
</div>
@@ -262,7 +283,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
onClick={loginWithLine}
className="ml-2 rounded-full bg-[#00B900] px-4 py-2 text-xs font-bold uppercase tracking-widest text-white shadow-sm transition-all duration-300 hover:bg-[#009900]"
>
LINE Login
{t('nav.login', 'เข้าสู่ระบบด้วย LINE')}
</button>
)}
</div>
apps/website/src/components/dynamic/DynamicPageRenderer.tsx
+21 -3
View File
@@ -7,6 +7,9 @@ import { getCategoryImage } from '@homaroma/types'
import ProductCard from '../ProductCard'
import { localizedFromRecord, resolveCategoryName, resolveLocalized, toRecord } from '../../lib/localization'
import { useLang } from '../../hooks/useLang'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay } from 'swiper/modules'
import 'swiper/css'
type DynamicPageRendererProps = {
sections: PageSection[]
@@ -68,16 +71,31 @@ function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>,
const i18nLang = useLang()
const resolvedLang = lang === 'all' ? i18nLang : lang
const slides = Array.isArray(payload.slides) ? payload.slides : []
const backgroundColor = typeof payload.backgroundColor === 'string' ? payload.backgroundColor : undefined
const textColor = typeof payload.textColor === 'string' ? payload.textColor : undefined
const speed = typeof payload.speed === 'number' ? payload.speed : 3000
if (!slides.length) return null
return (
<section className="bg-pop-black px-4 py-3 text-center text-sm font-semibold tracking-wide text-white">
<section
className={`announcement-bar absolute top-0 left-0 w-full z-[60] px-4 py-3 text-center text-sm font-semibold tracking-wide ${backgroundColor ? '' : 'bg-pop-black'} ${textColor ? '' : 'text-white'} overflow-hidden`}
style={{ backgroundColor, color: textColor }}
>
<Swiper
modules={[Autoplay]}
autoplay={{ delay: speed, disableOnInteraction: false }}
loop={slides.length > 1}
className="w-full select-none"
>
{slides.map((slide, index) => (
<span key={index} className={index === 0 ? '' : 'hidden md:inline'}>
{index > 0 && <span className="mx-4 text-white/30">/</span>}
<SwiperSlide key={index} className="flex items-center justify-center">
<span className="inline-block truncate max-w-full">
{localizedFromRecord({ slide }, 'slide', resolvedLang)}
</span>
</SwiperSlide>
))}
</Swiper>
</section>
)
}
apps/website/src/components/navigation/DesktopMegaMenu.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
className={`flex items-center gap-1 border-b py-2 transition-colors ${
isOpen || isActive
? 'border-pop-pink text-pop-black'
: 'border-transparent text-pop-black/65 hover:border-pop-pink hover:text-pop-black'
: 'border-transparent text-pop-black hover:border-pop-pink hover:text-pop-black'
}`}
>
{getLocalizedMenuText(item.label, lang)}
bun.lock
+4 -3
View File
@@ -127,6 +127,7 @@
"react": "19.2.4",
"react-dom": "19.2.4",
"react-i18next": "^15.0.0",
"swiper": "^12.2.0",
"zustand": "^5.0.0",
},
"devDependencies": {
@@ -737,7 +738,7 @@
"axe-core": ["axe-core@4.12.0", "", {}, "sha512-FTavr/7Ba0IptwGOPxnQvdyW2tAsdLBMTBXz7rKH6xJ2skpyxpBxyHkDdBs4lf69yRqYpkqCdfhnwS8YULGOmg=="],
"axios": ["axios@1.16.1", "", { "dependencies": { "follow-redirects": "^1.16.0", "form-data": "^4.0.5", "https-proxy-agent": "^5.0.1", "proxy-from-env": "^2.1.0" } }, "sha512-caYkukvroVPO8KrzuJEb50Hm07KwfBZPEC3VeFHTsqWHvKTsy54hjJz9BS/cdaypROE2rH6xvm9mHX4fgWkr3A=="],
"axios": ["axios@1.17.0", "", { "dependencies": { "follow-redirects": "^1.16.0", "form-data": "^4.0.5", "https-proxy-agent": "^5.0.1", "proxy-from-env": "^2.1.0" } }, "sha512-J8SwNxprqqpbfenehxWYXE7CW+wM1BB4w3+N+g+/Wx40xM4rsLrfPmHHxSWIxJLYDgSY/HqlFPIYb2/S3rxafw=="],
"axobject-query": ["axobject-query@4.1.0", "", {}, "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="],
@@ -1747,8 +1748,6 @@
"is-bun-module/semver": ["semver@7.8.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg=="],
"mcp-server/axios": ["axios@1.17.0", "", { "dependencies": { "follow-redirects": "^1.16.0", "form-data": "^4.0.5", "https-proxy-agent": "^5.0.1", "proxy-from-env": "^2.1.0" } }, "sha512-J8SwNxprqqpbfenehxWYXE7CW+wM1BB4w3+N+g+/Wx40xM4rsLrfPmHHxSWIxJLYDgSY/HqlFPIYb2/S3rxafw=="],
"micromatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
"next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
@@ -1769,6 +1768,8 @@
"type-is/mime-types": ["mime-types@3.0.2", "", { "dependencies": { "mime-db": "^1.54.0" } }, "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A=="],
"@liff/send-messages/@line/bot-sdk/axios": ["axios@1.16.1", "", { "dependencies": { "follow-redirects": "^1.16.0", "form-data": "^4.0.5", "https-proxy-agent": "^5.0.1", "proxy-from-env": "^2.1.0" } }, "sha512-caYkukvroVPO8KrzuJEb50Hm07KwfBZPEC3VeFHTsqWHvKTsy54hjJz9BS/cdaypROE2rH6xvm9mHX4fgWkr3A=="],
"@modelcontextprotocol/sdk/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
"@prisma/streams-local/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],