Shop
/
Shop-Storefront
4
0
Fork 0
Code Issues 25 Pull Requests Packages Projects 1 Releases Wiki Activity

feat: create json file for header drsquatch page

This commit is contained in:
Nam Doan 2025-11-24 15:43:06 +07:00
parent 1bace8a023
commit b330582ad3
2 changed files with 311 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

286
config/nam.drsquatch.design.json Normal file
View File

@ -0,0 +1,286 @@
[
{
"AnnouncementBanner": {
"props": {
"label": [
{
"text": "BLACK FRIDAY PRE-SALE",
"className": " #b31b1f font-bold"
},
{
"text": "FREE MYSTERY GIFT on $70",
"className": ""
},
{
"text": "SHOP NOW",
"className": "font-bold text-sm underline"
}
],
"className": "bg-[#b31b1f] text-white"
}
}
},
{
"Nav": {
"props": {
"className": "bg-[#1f3621] text-white"
},
"children": [
{
"Div": {
"props": {
"className": "flex items-center h-full"
},
"children": [
{
"Image": {
"props": {
"src": "https://www.drsquatch.com/cdn/shop/files/2drsq_horiz_logo_white_3_1.svg?v=1743539246",
"alt": "Medusa Store",
"width": 120,
"height": 40,
"className": "cursor-pointer ml-8"
}
}
},
{
"Div": {
"props": {
"className": "flex items-center h-full gap-16 font-bold"
},
"children": [
{
"DropdownMenus": {
"props": {
"label": "SUBCRIBE",
"className": "hover:underline flex items-center gap-2 ml-16",
"data-testid": "nav-categories-link",
"isShowArrow": false
},
"children": [
{
"DropdownMenuItems": {
"props": {
"label": "All Categories",
"className": "",
"data-testid": "nav-all-categories-link"
}
}
},
{
"DropdownMenuItems": {
"props": {
"label": "New Arrivals",
"className": "hover:underline flex items-center gap-2",
"data-testid": "nav-new-arrivals-link"
}
}
},
{
"DropdownMenuItems": {
"props": {
"label": "Best Sellers",
"className": "hover:underline flex items-center gap-2",
"data-testid": "nav-best-sellers-link"
}
}
}
]
}
},
{
"DropdownMenus": {
"props": {
"label": "REWARD",
"className": "hover:underline flex items-center gap-2",
"data-testid": "nav-categories-link"
},
"children": [
{
"DropdownMenuItems": {
"props": {
"label": "All Categories",
"className": "hover:underline flex items-center gap-2",
"data-testid": "nav-all-categories-link"
}
}
},
{
"DropdownMenuItems": {
"props": {
"label": "New Arrivals",
"className": "hover:underline flex items-center gap-2",
"data-testid": "nav-new-arrivals-link"
}
}
},
{
"DropdownMenuItems": {
"props": {
"label": "Best Sellers",
"className": "hover:underline",
"data-testid": "nav-best-sellers-link"
}
}
}
]
}
},
{
"DropdownMenus": {
"props": {
"label": "SHOP",
"className": "hover:underline flex items-center gap-2",
"data-testid": "nav-categories-link",
"isShowArrow": false
},
"children": [
{
"DropdownMenuItems": {
"props": {
"label": "All Categories",
"className": "hover:underline",
"data-testid": "nav-all-categories-link"
}
}
},
{
"DropdownMenuItems": {
"props": {
"label": "New Arrivals",
"className": "hover:underline",
"data-testid": "nav-new-arrivals-link"
}
}
},
{
"DropdownMenuItems": {
"props": {
"label": "Best Sellers",
"className": "hover:underline",
"data-testid": "nav-best-sellers-link"
}
}
}
]
}
},
{
"DropdownMenus": {
"props": {
"label": "OUR STORY",
"className": "hover:underline flex items-center gap-2",
"data-testid": "nav-categories-link",
"isShowArrow": false
},
"children": [
{
"DropdownMenuItems": {
"props": {
"label": "OUR STORY",
"className": "hover:underline",
"data-testid": "nav-all-categories-link",
"isShowArrow": false
}
}
},
{
"DropdownMenuItems": {
"props": {
"label": "New Arrivals",
"className": "hover:underline",
"data-testid": "nav-new-arrivals-link",
"isShowArrow": false
}
}
},
{
"DropdownMenuItems": {
"props": {
"label": "Best Sellers",
"className": "hover:underline",
"data-testid": "nav-best-sellers-link",
"isShowArrow": false
}
}
}
]
}
}
]
}
}
]
}
},
{
"Div": {
"props": {
"className": "flex items-center gap-x-6 h-full justify-end"
},
"children": [
{
"SearchButton": {
"props": {
"className": "hover:underline hover:text-black flex items-center gap-2 text-white",
"data-testid": "nav-account-link"
}
}
},
{
"UserButton": {
"props": {
"className": "hover:underline hover:text-black flex items-center gap-2 text-white",
"data-testid": "nav-account-link"
}
}
},
{
"Suspense": {
"props": {
"fallback": [
{
"LocalizedClientLink": {
"props": {
"href": "/cart",
"label": "Cart (0)",
"className": "hover:underline flex gap-2",
"data-testid": "nav-cart-link"
}
}
}
]
},
"children": [
{
"CartButton": {}
}
]
}
}
]
}
}
]
}
},
{
"CartMismatchBanner": {
"show": true
}
},
{
"FreeShippingPriceNudge": {
"variant": "popup"
}
},
{
"PropsChildren": {}
},
{
"Footer": {
"copyrightText": "© 2025 MyShop"
}
}
]

25
src/modules/layout/templates/drsquatch-template/announcement-bar/index.tsx Normal file
View File

@ -0,0 +1,25 @@
type TextItem = { text: string; className?: string }
export default async function AnnouncementBanner({
className,
label,
...props
}: { className: string; label: TextItem[] }) {
return (
<div className={className}>
<div className="container mx-auto flex justify-center items-center py-2">
<div className="flex items-center gap-4">
{label.map((item, index) => {
return (
<div key={`${index}-${item.text}`} className={`last:mr-0 ${item.className || ""}`}>
{item.text}
</div>
)
})}
</div>
</div>
</div>
)
}