feat:create component add vibentec config design page
This commit is contained in:
parent
09b01f1d6b
commit
497c060756
|
|
@ -44,7 +44,7 @@
|
||||||
{
|
{
|
||||||
"Nav": {
|
"Nav": {
|
||||||
"config": {
|
"config": {
|
||||||
"className": "h-12 bg-white text-[#003F31] gap-12",
|
"className": "h-24 bg-white text-[#003F31] gap-12",
|
||||||
"left": [
|
"left": [
|
||||||
{
|
{
|
||||||
"Image": {
|
"Image": {
|
||||||
|
|
@ -165,17 +165,17 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"IconButton": {
|
"Button": {
|
||||||
"config": {
|
"config": {
|
||||||
"variant": "search",
|
"icon": "search",
|
||||||
"className": "shadow-none"
|
"className": "shadow-none"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"IconButton": {
|
"Button": {
|
||||||
"config": {
|
"config": {
|
||||||
"variant": "user",
|
"icon": "user",
|
||||||
"className": "shadow-none"
|
"className": "shadow-none"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -62,7 +62,7 @@
|
||||||
"config": {
|
"config": {
|
||||||
"label": "SUBCRIBE",
|
"label": "SUBCRIBE",
|
||||||
"href": "/",
|
"href": "/",
|
||||||
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:text-[#009b93]"
|
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:underline hover:text-white"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -71,7 +71,7 @@
|
||||||
"config": {
|
"config": {
|
||||||
"label": "REWARD",
|
"label": "REWARD",
|
||||||
"href": "/",
|
"href": "/",
|
||||||
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:text-[#009b93]"
|
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:underline hover:text-white"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -80,7 +80,7 @@
|
||||||
"config": {
|
"config": {
|
||||||
"navLabel": {
|
"navLabel": {
|
||||||
"text": "SHOP",
|
"text": "SHOP",
|
||||||
"className": "font-bold text-[1rem] flex items-center mr-8 gap-1 hover:text-[#009b93]"
|
"className": "font-bold text-[1rem] flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-white"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -90,7 +90,7 @@
|
||||||
"config": {
|
"config": {
|
||||||
"navLabel": {
|
"navLabel": {
|
||||||
"text": "OUR STORY",
|
"text": "OUR STORY",
|
||||||
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:text-[#009b93]"
|
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-white"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -127,9 +127,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"IconButton": {
|
"Button": {
|
||||||
"config": {
|
"config": {
|
||||||
"variant": "user",
|
"icon": "user",
|
||||||
"className": "shadow-none bg-transparent text-white"
|
"className": "shadow-none bg-transparent text-white"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -137,7 +137,7 @@
|
||||||
{
|
{
|
||||||
"VtCartButton": {
|
"VtCartButton": {
|
||||||
"config": {
|
"config": {
|
||||||
"variant": "cartIconButton",
|
"icon": "cartIconButton",
|
||||||
"className": "shadow-none bg-transparent text-white"
|
"className": "shadow-none bg-transparent text-white"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,211 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"Header": {
|
||||||
|
"config": {
|
||||||
|
"sticky": true
|
||||||
|
},
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"Banner": {
|
||||||
|
"config": {
|
||||||
|
"variant": "nav",
|
||||||
|
"className": "h-12 bg-[#E6EFFC] text-[#11314E] gap-12 pl-16",
|
||||||
|
"left": [
|
||||||
|
{
|
||||||
|
"Link": {
|
||||||
|
"config": {
|
||||||
|
"label": "Über Uns",
|
||||||
|
"href": "/",
|
||||||
|
"className": "text-[13px] flex items-center gap-1 cursor-pointer"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Link": {
|
||||||
|
"config": {
|
||||||
|
"label": "Kontaktieren Uns",
|
||||||
|
"href": "/",
|
||||||
|
"className": "text-[13px] flex items-center gap-1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"center": [
|
||||||
|
{
|
||||||
|
"Link": {
|
||||||
|
"config": {
|
||||||
|
"label": "Einsparung durch Digitalisierung in der Arztpraxis",
|
||||||
|
"href": "/",
|
||||||
|
"className": "text-[13px] flex items-center gap-1 "
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Button": {
|
||||||
|
"config": {
|
||||||
|
"label": "Mehr Info",
|
||||||
|
"href": "/",
|
||||||
|
"className": "text-[13px] flex items-center bg-[#112638] gap-1 "
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"right": [
|
||||||
|
{
|
||||||
|
"Dropdown": {
|
||||||
|
"config": {
|
||||||
|
"trigger": {
|
||||||
|
"text": "EURO",
|
||||||
|
"className": "font-bold text-[13px] text-[#11314E] flex items-center gap-1 hover:text-[#009b93]",
|
||||||
|
"isShowArrow": true
|
||||||
|
},
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/1200px-Flag_of_Germany.svg.png",
|
||||||
|
"text": "EURO",
|
||||||
|
"href": "/"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Dropdown": {
|
||||||
|
"config": {
|
||||||
|
"trigger": {
|
||||||
|
"text": "DE",
|
||||||
|
"className": "font-bold text-[13px] text-[#11314E] flex items-center gap-1 hover:text-[#009b93]",
|
||||||
|
"isShowArrow": true
|
||||||
|
},
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/1200px-Flag_of_Germany.svg.png",
|
||||||
|
"text": "DE",
|
||||||
|
"href": "/"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Nav": {
|
||||||
|
"config": {
|
||||||
|
"className": "h-24 bg-[white] text-[#11314E] gap-12 pl-16",
|
||||||
|
"left": [
|
||||||
|
{
|
||||||
|
"Image": {
|
||||||
|
"config": {
|
||||||
|
"src": "/VibentecIT-logo.svg",
|
||||||
|
"alt": "MyShop",
|
||||||
|
"className": "h-full w-[180px] mr-4",
|
||||||
|
"objectFit": "contain"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Link": {
|
||||||
|
"config": {
|
||||||
|
"label": "Home",
|
||||||
|
"href": "/",
|
||||||
|
"className": "text-[13px] text-[#11314E] flex items-center mr-8 gap-1 hover:underline hover:text-[#009b93]"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Link": {
|
||||||
|
"config": {
|
||||||
|
"label": "Shop",
|
||||||
|
"href": "/",
|
||||||
|
"className": "text-[13px] text-[#11314E] flex items-center mr-6 gap-1 hover:underline hover:text-[#009b93]"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"VtMegaMenu": {
|
||||||
|
"config": {
|
||||||
|
"navLabel": {
|
||||||
|
"text": "Sale",
|
||||||
|
"className": "text-[13px] text-[#11314E] flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-[#009b93]"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"VtMegaMenu": {
|
||||||
|
"config": {
|
||||||
|
"navLabel": {
|
||||||
|
"text": "OUR STORY",
|
||||||
|
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-white"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"right": [
|
||||||
|
{
|
||||||
|
"SearchInput": {
|
||||||
|
"config": {
|
||||||
|
"placeholder": "Search"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Button": {
|
||||||
|
"config": {
|
||||||
|
"icon": "user",
|
||||||
|
"className": " flex items-center gap-1 shadow-none"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Button": {
|
||||||
|
"config": {
|
||||||
|
"icon": "heart",
|
||||||
|
"className": " flex items-center gap-1 shadow-none"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"VtCartButton": {
|
||||||
|
"config": {
|
||||||
|
"variant": "shoppingBagbutton",
|
||||||
|
"className": "shadow-none bg-transparent text-black"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"CartMismatchBanner": {
|
||||||
|
"config": {
|
||||||
|
"show": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FreeShippingPriceNudge": {
|
||||||
|
"config": {
|
||||||
|
"variant": "popup"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"PropsChildren": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Footer": {
|
||||||
|
"config": {
|
||||||
|
"copyrightText": "© 2025 MyShop"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
<svg width="212" height="84" viewBox="0 0 212 84" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M29.0472 45.9341L28.8138 46.7324L27.3831 51.6197L26.498 47.2394L29.0472 45.9341Z" fill="url(#paint0_linear_13381_50018)"/>
|
||||||
|
<path d="M36.7918 41.5841C36.9009 41.7298 36.8524 41.9393 36.6917 42.0212L29.0503 45.9341L26.5011 47.2394L26.4344 46.9176L22.7364 23.3434C22.697 23.0824 23.0244 22.9428 23.179 23.1522L36.7887 41.5841H36.7918Z" fill="url(#paint1_linear_13381_50018)"/>
|
||||||
|
<path d="M41.8506 55.0225L36.9978 58.134L32.1904 54.8799L27.3861 51.6258L27.3831 51.6197V51.6167L28.8137 46.7324L41.8506 55.0225Z" fill="url(#paint2_linear_13381_50018)"/>
|
||||||
|
<path d="M54.8693 46.6687L41.8506 55.0195L36.9978 58.134L38.4709 59.1145L41.6809 61.2485C41.7779 61.3122 41.9022 61.3122 41.9992 61.2485L56.3 51.5529L54.8693 46.6687ZM42.1538 58.8807C41.8234 59.1054 41.3748 59.0143 41.1535 58.6774C40.9322 58.3404 41.0231 57.8851 41.3535 57.6635C41.6839 57.4389 42.1325 57.5299 42.3538 57.8669C42.5751 58.2038 42.4841 58.6591 42.1538 58.8807ZM44.0391 57.6058C43.7087 57.8304 43.2601 57.7394 43.0388 57.4024C42.8176 57.0655 42.9085 56.6101 43.2389 56.3885C43.5693 56.1639 44.0179 56.255 44.2392 56.5919C44.4604 56.9289 44.3695 57.3842 44.0391 57.6088V57.6058ZM45.9214 56.3278C45.591 56.5525 45.1424 56.4614 44.9212 56.1245C44.6999 55.7875 44.7908 55.3322 45.1212 55.1075C45.4516 54.8829 45.9002 54.974 46.1215 55.3109C46.3428 55.6479 46.2518 56.1032 45.9214 56.3248V56.3278ZM51.8018 52.3482L47.4946 55.2654C47.3582 55.3565 47.1763 55.32 47.0854 55.1834L46.6125 54.464C46.5216 54.3274 46.558 54.1422 46.6944 54.0481L51.0046 51.131C51.138 51.0399 51.3229 51.0763 51.4108 51.2129L51.8837 51.9324C51.9716 52.069 51.9382 52.2541 51.8018 52.3482Z" fill="url(#paint3_linear_13381_50018)"/>
|
||||||
|
<path d="M51.8018 52.3482L47.4946 55.2654C47.3582 55.3565 47.1763 55.32 47.0854 55.1834L46.6125 54.464C46.5216 54.3274 46.558 54.1422 46.6944 54.0481L51.0046 51.131C51.138 51.0399 51.3229 51.0763 51.4108 51.2129L51.8837 51.9324C51.9716 52.069 51.9382 52.2541 51.8018 52.3482Z" fill="url(#paint4_linear_13381_50018)"/>
|
||||||
|
<path d="M57.1852 47.1726L56.3001 51.5529L54.8694 46.6687L54.636 45.8673L57.1852 47.1726Z" fill="url(#paint5_linear_13381_50018)"/>
|
||||||
|
<path d="M46.8944 41.5204C46.7853 41.6661 46.8338 41.8755 46.9944 41.9575L54.6359 45.8703L57.1851 47.1756L57.2518 46.8539L60.9224 23.4436C60.9709 23.1431 60.589 22.9761 60.4072 23.222L46.8944 41.5204Z" fill="url(#paint6_linear_13381_50018)"/>
|
||||||
|
<path d="M42.1538 58.8807C41.8234 59.1054 41.3748 59.0143 41.1535 58.6774C40.9323 58.3404 41.0232 57.8851 41.3536 57.6635C41.684 57.4389 42.1326 57.5299 42.3539 57.8669C42.5751 58.2038 42.4842 58.6592 42.1538 58.8807Z" fill="url(#paint7_linear_13381_50018)"/>
|
||||||
|
<path d="M44.0391 57.6058C43.7087 57.8304 43.2601 57.7394 43.0388 57.4024C42.8175 57.0655 42.9085 56.6101 43.2389 56.3885C43.5692 56.1639 44.0178 56.255 44.2391 56.5919C44.4604 56.9289 44.3695 57.3842 44.0391 57.6088V57.6058Z" fill="url(#paint8_linear_13381_50018)"/>
|
||||||
|
<path d="M45.9214 56.3278C45.591 56.5525 45.1424 56.4614 44.9211 56.1245C44.6999 55.7875 44.7908 55.3322 45.1212 55.1075C45.4516 54.8829 45.9002 54.974 46.1214 55.3109C46.3427 55.6479 46.2518 56.1032 45.9214 56.3248V56.3278Z" fill="url(#paint9_linear_13381_50018)"/>
|
||||||
|
<path d="M51.8018 52.3482L47.4946 55.2654C47.3582 55.3565 47.1763 55.32 47.0854 55.1834L46.6125 54.464C46.5216 54.3274 46.558 54.1422 46.6944 54.0481L51.0046 51.131C51.138 51.0399 51.3229 51.0763 51.4108 51.2129L51.8837 51.9324C51.9716 52.069 51.9382 52.2541 51.8018 52.3482Z" fill="url(#paint10_linear_13381_50018)"/>
|
||||||
|
<path d="M74.205 39.8053C74.1201 39.5989 74.114 39.3925 74.1989 39.186C74.2777 38.9796 74.4202 38.8309 74.6263 38.7459C74.8324 38.6609 75.0385 38.6548 75.2446 38.7307C75.4507 38.8157 75.5993 38.9584 75.6841 39.1648L79.7883 48.572L83.8985 39.1648C83.9834 38.9584 84.1319 38.8157 84.338 38.7307C84.5441 38.6518 84.7502 38.6609 84.9564 38.7459C85.1625 38.8309 85.3049 38.9796 85.3837 39.186C85.4686 39.3925 85.4626 39.5989 85.3777 39.8053L80.537 50.9003C80.3945 51.2281 80.146 51.386 79.7913 51.386C79.4367 51.386 79.2033 51.222 79.0608 50.9003L74.2201 39.8053H74.214H74.205Z" fill="#112638"/>
|
||||||
|
<path d="M89.1545 51.392C88.9272 51.392 88.7423 51.3131 88.5877 51.1492C88.4301 50.9913 88.3452 50.8062 88.3452 50.5785V39.4683C88.3452 39.2468 88.424 39.0616 88.5877 38.8977C88.7514 38.7337 88.9272 38.6548 89.1545 38.6548C89.3819 38.6548 89.5728 38.7337 89.7304 38.8977C89.8881 39.0616 89.9729 39.2468 89.9729 39.4683V50.5785C89.9729 50.8062 89.8941 50.9913 89.7304 51.1492C89.5728 51.307 89.3819 51.392 89.1545 51.392Z" fill="#112638"/>
|
||||||
|
<path d="M93.6255 51.392C93.3981 51.392 93.2132 51.3131 93.0587 51.1492C92.901 50.9913 92.8162 50.8062 92.8162 50.5785V39.4683C92.8162 39.2468 92.895 39.0616 93.0587 38.8977C93.2223 38.7337 93.3981 38.6548 93.6255 38.6548H98.0055C98.9906 38.6548 99.8302 39.0039 100.533 39.7082C101.237 40.4124 101.576 41.2472 101.576 42.2368C101.576 43.1626 101.264 43.967 100.646 44.65C101.206 44.9627 101.655 45.3968 101.988 45.9462C102.328 46.5169 102.501 47.1271 102.501 47.7979C102.501 48.7875 102.152 49.6284 101.449 50.3265C100.755 51.0308 99.909 51.3799 98.9209 51.3799H93.6194L93.6255 51.386V51.392ZM94.4409 44.222H98.0115C98.5511 44.222 99.0118 44.0308 99.3967 43.6453C99.7787 43.2598 99.9727 42.7984 99.9727 42.258C99.9727 41.7177 99.7817 41.2624 99.3967 40.8768C99.0148 40.4913 98.5511 40.3001 98.0115 40.3001H94.4409V44.2251V44.222ZM94.4409 49.768H98.9269C99.4665 49.768 99.9272 49.5768 100.312 49.1912C100.694 48.8057 100.888 48.3443 100.888 47.8101C100.888 47.2758 100.697 46.8053 100.312 46.4228C99.9302 46.0373 99.4665 45.8461 98.9269 45.8461H94.4409V49.771V49.768Z" fill="#112638"/>
|
||||||
|
<path d="M113.77 38.673C113.998 38.673 114.189 38.752 114.346 38.9159C114.504 39.0798 114.589 39.265 114.589 39.4866C114.589 39.7082 114.51 39.9055 114.346 40.0633C114.183 40.2212 113.998 40.3062 113.77 40.3062H106.162C105.935 40.3062 105.75 40.2272 105.595 40.0633C105.438 39.9055 105.353 39.7142 105.353 39.4866C105.353 39.2589 105.432 39.0798 105.595 38.9159C105.759 38.752 105.935 38.673 106.162 38.673H113.77ZM113.77 44.222C113.998 44.222 114.189 44.301 114.346 44.4649C114.504 44.6288 114.589 44.814 114.589 45.0416C114.589 45.2693 114.51 45.4484 114.346 45.6123C114.183 45.7762 113.998 45.8552 113.77 45.8552H106.162C105.935 45.8552 105.75 45.7762 105.595 45.6123C105.438 45.4545 105.353 45.2632 105.353 45.0416C105.353 44.82 105.432 44.6227 105.595 44.4649C105.753 44.307 105.935 44.222 106.162 44.222H113.77ZM114.586 50.5876C114.586 50.8153 114.507 51.0004 114.343 51.1583C114.186 51.3161 113.995 51.4011 113.767 51.4011H106.159C105.932 51.4011 105.747 51.3222 105.592 51.1583C105.435 51.0004 105.35 50.8153 105.35 50.5876C105.35 50.3599 105.429 50.1687 105.592 50.0108C105.75 49.853 105.932 49.768 106.159 49.768H113.767C113.995 49.768 114.186 49.8469 114.343 50.0108C114.501 50.1748 114.586 50.3599 114.586 50.5876Z" fill="#112638"/>
|
||||||
|
<path d="M118.235 51.392C118.008 51.392 117.823 51.3131 117.668 51.1492C117.511 50.9913 117.426 50.8062 117.426 50.5785V39.4683C117.426 39.0828 117.611 38.8278 117.971 38.7064C118.332 38.585 118.638 38.67 118.872 38.9827L125.949 48.2047V39.4744C125.949 39.2528 126.028 39.0677 126.192 38.9037C126.355 38.7398 126.54 38.6609 126.768 38.6609C126.995 38.6609 127.171 38.7398 127.335 38.9037C127.498 39.0677 127.577 39.2528 127.577 39.4744V50.5846C127.577 50.9701 127.392 51.2251 127.031 51.3465C126.947 51.3738 126.862 51.389 126.777 51.389C126.513 51.389 126.295 51.2827 126.131 51.0672L119.053 41.8452V50.5755C119.053 50.8031 118.975 50.9883 118.811 51.1461C118.653 51.304 118.462 51.389 118.235 51.389V51.392Z" fill="#112638"/>
|
||||||
|
<path d="M131.229 40.291C131.002 40.291 130.817 40.2121 130.663 40.0481C130.505 39.8903 130.42 39.699 130.42 39.4714C130.42 39.2437 130.499 39.0646 130.663 38.9007C130.82 38.7428 131.002 38.6579 131.229 38.6579H139.762C139.983 38.6579 140.165 38.7368 140.329 38.9007C140.493 39.0646 140.571 39.2498 140.571 39.4714C140.571 39.693 140.493 39.8903 140.329 40.0481C140.165 40.206 139.98 40.291 139.762 40.291H136.298V50.5815C136.298 50.8092 136.219 50.9944 136.07 51.1522C135.922 51.3101 135.722 51.3951 135.494 51.3951C135.267 51.3951 135.076 51.3161 134.918 51.1522C134.761 50.9883 134.691 50.8092 134.691 50.5815V40.291H131.226H131.229Z" fill="#112638"/>
|
||||||
|
<path d="M151.835 38.673C152.063 38.673 152.253 38.752 152.411 38.9159C152.569 39.0798 152.654 39.265 152.654 39.4866C152.654 39.7082 152.575 39.9055 152.411 40.0633C152.247 40.2212 152.063 40.3062 151.835 40.3062H144.227C144 40.3062 143.815 40.2272 143.66 40.0633C143.503 39.9055 143.418 39.7142 143.418 39.4866C143.418 39.2589 143.497 39.0798 143.66 38.9159C143.818 38.758 144 38.673 144.227 38.673H151.835ZM151.835 44.222C152.063 44.222 152.253 44.301 152.411 44.4649C152.569 44.6288 152.654 44.814 152.654 45.0416C152.654 45.2693 152.575 45.4484 152.411 45.6123C152.247 45.7762 152.063 45.8552 151.835 45.8552H144.227C144 45.8552 143.815 45.7762 143.66 45.6123C143.503 45.4545 143.418 45.2632 143.418 45.0416C143.418 44.82 143.497 44.6227 143.66 44.4649C143.818 44.307 144 44.222 144.227 44.222H151.835ZM152.654 50.5876C152.654 50.8153 152.575 51.0004 152.411 51.1583C152.253 51.3161 152.063 51.4011 151.835 51.4011H144.227C144 51.4011 143.815 51.3222 143.66 51.1583C143.503 51.0004 143.418 50.8153 143.418 50.5876C143.418 50.3599 143.497 50.1687 143.66 50.0108C143.818 49.853 144 49.768 144.227 49.768H151.835C152.063 49.768 152.253 49.8469 152.411 50.0108C152.569 50.1748 152.654 50.3599 152.654 50.5876Z" fill="#112638"/>
|
||||||
|
<path d="M161.838 51.392C160.092 51.392 158.595 50.7728 157.358 49.5343C156.124 48.2958 155.506 46.7932 155.506 45.0416C155.506 43.2901 156.124 41.7814 157.358 40.5399C158.592 39.3014 160.092 38.6821 161.838 38.6821C163.584 38.6821 165.09 39.3014 166.324 40.5399C166.482 40.6977 166.566 40.889 166.566 41.1167C166.566 41.3443 166.488 41.5295 166.324 41.6873C166.166 41.8452 165.975 41.9302 165.748 41.9302C165.521 41.9302 165.336 41.8513 165.181 41.6873C164.26 40.7676 163.144 40.3062 161.832 40.3062C160.519 40.3062 159.419 40.7676 158.488 41.6873C157.573 42.6132 157.112 43.7394 157.112 45.0477C157.112 46.356 157.573 47.4701 158.488 48.402C159.41 49.3218 160.525 49.7832 161.832 49.7832C163.138 49.7832 164.254 49.3218 165.181 48.402C165.339 48.2441 165.521 48.1592 165.748 48.1592C165.975 48.1592 166.166 48.2381 166.324 48.402C166.482 48.5598 166.566 48.745 166.566 48.9727C166.566 49.2003 166.488 49.3916 166.324 49.5494C165.09 50.7879 163.59 51.4072 161.838 51.4072V51.392Z" fill="#112638"/>
|
||||||
|
<path d="M175.508 51.392C175.281 51.392 175.096 51.3131 174.941 51.1492C174.784 50.9913 174.699 50.8062 174.699 50.5785V39.4683C174.699 39.2468 174.778 39.0616 174.941 38.8977C175.099 38.7398 175.281 38.6548 175.508 38.6548C175.736 38.6548 175.927 38.7337 176.084 38.8977C176.242 39.0616 176.327 39.2468 176.327 39.4683V50.5785C176.327 50.8062 176.248 50.9913 176.084 51.1492C175.927 51.307 175.736 51.392 175.508 51.392Z" fill="#112638"/>
|
||||||
|
<path d="M179.979 40.291C179.752 40.291 179.567 40.2121 179.412 40.0481C179.255 39.8903 179.17 39.699 179.17 39.4714C179.17 39.2437 179.249 39.0646 179.412 38.9007C179.57 38.7428 179.752 38.6579 179.979 38.6579H188.512C188.733 38.6579 188.915 38.7368 189.079 38.9007C189.242 39.0646 189.321 39.2498 189.321 39.4714C189.321 39.693 189.242 39.8903 189.079 40.0481C188.915 40.206 188.73 40.291 188.512 40.291H185.047V50.5815C185.047 50.8092 184.968 50.9944 184.82 51.1522C184.671 51.3101 184.471 51.3951 184.244 51.3951C184.017 51.3951 183.826 51.3161 183.668 51.1522C183.511 50.9883 183.441 50.8092 183.441 50.5815V40.291H179.976H179.979Z" fill="#112638"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_13381_50018" x1="26.498" y1="48.7754" x2="29.0472" y2="48.7754" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#2477B7"/>
|
||||||
|
<stop offset="1" stop-color="#0BA1CE"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint1_linear_13381_50018" x1="22.7334" y1="35.1457" x2="36.8493" y2="35.1457" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#2477B7"/>
|
||||||
|
<stop offset="1" stop-color="#233166"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint2_linear_13381_50018" x1="27.3831" y1="52.4332" x2="41.8506" y2="52.4332" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0BA1CE"/>
|
||||||
|
<stop offset="1" stop-color="#2477B7"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint3_linear_13381_50018" x1="36.9978" y1="53.9844" x2="56.3" y2="53.9844" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#233166"/>
|
||||||
|
<stop offset="1" stop-color="#2477B7"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint4_linear_13381_50018" x1="51.6169" y1="51.5043" x2="46.8716" y2="54.8824" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#2477B7"/>
|
||||||
|
<stop offset="1" stop-color="#233166"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint5_linear_13381_50018" x1="54.636" y1="48.7116" x2="57.1852" y2="48.7116" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0BA1CE"/>
|
||||||
|
<stop offset="1" stop-color="#2477B7"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint6_linear_13381_50018" x1="60.9255" y1="35.1366" x2="46.8368" y2="35.1366" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#2477B7"/>
|
||||||
|
<stop offset="1" stop-color="#233166"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint7_linear_13381_50018" x1="42.4751" y1="58.2706" x2="41.0353" y2="58.2706" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#C25119"/>
|
||||||
|
<stop offset="1" stop-color="#F26522"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint8_linear_13381_50018" x1="44.3604" y1="56.9957" x2="42.9176" y2="56.9957" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#C25119"/>
|
||||||
|
<stop offset="1" stop-color="#F26522"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint9_linear_13381_50018" x1="46.2427" y1="55.7207" x2="44.8029" y2="55.7207" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#C25119"/>
|
||||||
|
<stop offset="1" stop-color="#F26522"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint10_linear_13381_50018" x1="51.9322" y1="53.1982" x2="46.561" y2="53.1982" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#C25119"/>
|
||||||
|
<stop offset="1" stop-color="#F26522"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -33,22 +33,23 @@ export default function VtDropdown({
|
||||||
{props.trigger.text} {props.trigger.isShowArrow && <ChevronDown />}
|
{props.trigger.text} {props.trigger.isShowArrow && <ChevronDown />}
|
||||||
</DropdownMenu.Trigger>
|
</DropdownMenu.Trigger>
|
||||||
<DropdownMenu.Content>
|
<DropdownMenu.Content>
|
||||||
{props.items.map(
|
{props.items.length > 0 &&
|
||||||
(
|
props.items.map(
|
||||||
item: {
|
(
|
||||||
text: string
|
item: {
|
||||||
className?: string
|
text: string
|
||||||
href?: string
|
className?: string
|
||||||
icon?: string
|
href?: string
|
||||||
},
|
icon?: string
|
||||||
index: number
|
},
|
||||||
) => (
|
index: number
|
||||||
<DropdownMenu.Item
|
) => (
|
||||||
key={item.text + index}
|
<DropdownMenu.Item
|
||||||
className={item.className || ""}
|
key={item.text + index}
|
||||||
>
|
className={item.className || ""}
|
||||||
{item.icon && (
|
>
|
||||||
<img
|
{item.icon && (
|
||||||
|
<img
|
||||||
src={item.icon}
|
src={item.icon}
|
||||||
alt={item.text}
|
alt={item.text}
|
||||||
className="w-5 h-5 rounded-[50%] mr-3"
|
className="w-5 h-5 rounded-[50%] mr-3"
|
||||||
|
|
|
||||||
|
|
@ -11,13 +11,13 @@ export default function BannerNav({ node, context }: { node: LayoutComponentDefi
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className="content-container txt-xsmall-plus flex items-center justify-between w-full h-full text-small-regular">
|
<nav className="content-container txt-xsmall-plus flex items-center justify-between w-full h-full text-small-regular">
|
||||||
<div className="flex items-center gap-x-4">
|
<div className="flex items-center gap-x-4 w-full h-full">
|
||||||
{props.left && <DynamicLayoutRenderer nodes={props.left} context={context} />}
|
{props.left && <DynamicLayoutRenderer nodes={props.left} context={context} />}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-x-4">
|
<div className="flex items-center gap-x-4 w-full h-full">
|
||||||
{props.center && <DynamicLayoutRenderer nodes={props.center} context={context} />}
|
{props.center && <DynamicLayoutRenderer nodes={props.center} context={context} />}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-x-4">
|
<div className="flex items-center gap-x-4 w-full h-full justify-end">
|
||||||
{props.right && <DynamicLayoutRenderer nodes={props.right} context={context} />}
|
{props.right && <DynamicLayoutRenderer nodes={props.right} context={context} />}
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
import { IconButton } from "@medusajs/ui"
|
import { Button, IconButton } from "@medusajs/ui"
|
||||||
import { MagnifyingGlass, User, ShoppingBag } from "@medusajs/icons"
|
import { MagnifyingGlass, User, ShoppingBag, Heart } from "@medusajs/icons"
|
||||||
import {
|
import {
|
||||||
LayoutComponentDefinition,
|
LayoutComponentDefinition,
|
||||||
LayoutContext,
|
LayoutContext,
|
||||||
} from "@vibentec/component-map"
|
} from "@vibentec/component-map"
|
||||||
|
|
||||||
export default function VtIconButton({
|
export default function VtButton({
|
||||||
nodes,
|
nodes,
|
||||||
context,
|
context,
|
||||||
}: {
|
}: {
|
||||||
|
|
@ -13,16 +13,29 @@ export default function VtIconButton({
|
||||||
context: LayoutContext
|
context: LayoutContext
|
||||||
}) {
|
}) {
|
||||||
const props = nodes.config || {}
|
const props = nodes.config || {}
|
||||||
const variantsIcon = {
|
|
||||||
search: MagnifyingGlass,
|
const icons = {
|
||||||
|
search: MagnifyingGlass,
|
||||||
user: User,
|
user: User,
|
||||||
cart: ShoppingBag
|
cart: ShoppingBag,
|
||||||
|
heart: Heart
|
||||||
}
|
}
|
||||||
if (!props.variant) return null
|
const Icon = props.icon && icons[props.icon as keyof typeof icons]
|
||||||
const Icon = variantsIcon[props.variant as keyof typeof variantsIcon]
|
|
||||||
return (
|
return (
|
||||||
<IconButton className={props?.className ?? ""}>
|
<>
|
||||||
<Icon />
|
{props?.icon && (
|
||||||
</IconButton>
|
<IconButton className={props?.className ?? ""}>
|
||||||
|
<Icon />
|
||||||
|
{props?.label && (
|
||||||
|
<span className="mr-2 text-[#11314E]">{props.label}</span>
|
||||||
|
)}
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
{!props?.icon && (
|
||||||
|
<Button className={props?.className ?? ""}>
|
||||||
|
{props?.label && <span>{props.label}</span>}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,13 +14,13 @@ export default function VtNav({ nodes, context }: { nodes: LayoutComponentDefini
|
||||||
return (
|
return (
|
||||||
<div className="relative mx-auto border-b duration-200 bg-white border-ui-border-base">
|
<div className="relative mx-auto border-b duration-200 bg-white border-ui-border-base">
|
||||||
<nav className={clx("content-container txt-xsmall-plus flex items-center justify-between w-full h-full text-small-regular", props.className)}>
|
<nav className={clx("content-container txt-xsmall-plus flex items-center justify-between w-full h-full text-small-regular", props.className)}>
|
||||||
<div className="flex items-center gap-x-4">
|
<div className="flex items-center gap-x-4 w-full h-full">
|
||||||
{props.left && <DynamicLayoutRenderer nodes={props.left} context={context} />}
|
{props.left && <DynamicLayoutRenderer nodes={props.left} context={context} />}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-x-4">
|
<div className="flex items-center gap-x-4 w-full h-full">
|
||||||
{props.center && <DynamicLayoutRenderer nodes={props.center} context={context} />}
|
{props.center && <DynamicLayoutRenderer nodes={props.center} context={context} />}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-x-4">
|
<div className="flex items-center gap-x-4 w-full h-full justify-end">
|
||||||
{props.right && <DynamicLayoutRenderer nodes={props.right} context={context} />}
|
{props.right && <DynamicLayoutRenderer nodes={props.right} context={context} />}
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
import React from "react"
|
||||||
|
import { MagnifyingGlass } from "@medusajs/icons"
|
||||||
|
import {
|
||||||
|
LayoutComponentDefinition,
|
||||||
|
LayoutContext,
|
||||||
|
} from "@vibentec/component-map"
|
||||||
|
|
||||||
|
export default function VtSearchInput({
|
||||||
|
nodes,
|
||||||
|
context,
|
||||||
|
}: {
|
||||||
|
nodes: LayoutComponentDefinition
|
||||||
|
context: LayoutContext
|
||||||
|
}) {
|
||||||
|
const props = nodes.config || {}
|
||||||
|
const placeholder = props.placeholder ?? "Search"
|
||||||
|
const shortcut = props.shortcut ?? "⌘K"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
`flex items-center gap-3 w-full max-w-xl bg-white border border-grey-20 rounded-rounded shadow-sm px-4 py-2 ${
|
||||||
|
props?.className ?? ""
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<MagnifyingGlass className="text-[#11314E]" />
|
||||||
|
<input
|
||||||
|
type="search"
|
||||||
|
placeholder={placeholder}
|
||||||
|
className="flex-1 bg-transparent outline-none text-[#11314E] placeholder:text-[#11314E]"
|
||||||
|
/>
|
||||||
|
{shortcut && (
|
||||||
|
<span className="text-[#11314E] border border-grey-30 rounded-rounded px-2 py-0.5 text-sm">
|
||||||
|
{shortcut}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -14,7 +14,8 @@ import VtLink from "@modules/layout/components/vt-linkbutton"
|
||||||
import VtSideMenu from "@modules/layout/components/vt-sidemenu"
|
import VtSideMenu from "@modules/layout/components/vt-sidemenu"
|
||||||
import VtImage from "@modules/layout/templates/vt-image"
|
import VtImage from "@modules/layout/templates/vt-image"
|
||||||
import VtDropdown from "@modules/layout/components/vt-dropdown"
|
import VtDropdown from "@modules/layout/components/vt-dropdown"
|
||||||
import VtIconButton from "@modules/layout/templates/vt-icon-button"
|
import VtButton from "@modules/layout/templates/vt-icon-button"
|
||||||
|
import VtSearchInput from "@modules/layout/templates/vt-search-input"
|
||||||
|
|
||||||
type ComponentConfig = Record<string, any>;
|
type ComponentConfig = Record<string, any>;
|
||||||
|
|
||||||
|
|
@ -56,7 +57,8 @@ export const componentMap: Record<string, ComponentRenderer> = {
|
||||||
Banner: nodesContextRenderer(Banner),
|
Banner: nodesContextRenderer(Banner),
|
||||||
HomeButton: nodesContextRenderer(HomeButton),
|
HomeButton: nodesContextRenderer(HomeButton),
|
||||||
AccountButton: nodesContextRenderer(AccountButton),
|
AccountButton: nodesContextRenderer(AccountButton),
|
||||||
IconButton: nodesContextRenderer(VtIconButton),
|
Button: nodesContextRenderer(VtButton),
|
||||||
|
SearchInput: nodesContextRenderer(VtSearchInput),
|
||||||
VtCartButton: nodesContextRenderer(VtCartButton),
|
VtCartButton: nodesContextRenderer(VtCartButton),
|
||||||
Link: nodesContextRenderer(VtLink),
|
Link: nodesContextRenderer(VtLink),
|
||||||
Image: nodesContextRenderer(VtImage),
|
Image: nodesContextRenderer(VtImage),
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ import fs from "fs"
|
||||||
import path from "path"
|
import path from "path"
|
||||||
import { jsonFileNames } from "./devJsonFileNames";
|
import { jsonFileNames } from "./devJsonFileNames";
|
||||||
|
|
||||||
const fileName = jsonFileNames.namDrsquatch;
|
const fileName = jsonFileNames.namVibentec;
|
||||||
|
|
||||||
export async function loadDesignConfig() {
|
export async function loadDesignConfig() {
|
||||||
const filePath = path.join(process.cwd(), "config", fileName)
|
const filePath = path.join(process.cwd(), "config", fileName)
|
||||||
|
|
|
||||||
|
|
@ -3,4 +3,5 @@ export const jsonFileNames = {
|
||||||
stePlayGround: "ste.playground.design.json",
|
stePlayGround: "ste.playground.design.json",
|
||||||
nam3Bear: "nam.3bear.design.json",
|
nam3Bear: "nam.3bear.design.json",
|
||||||
namDrsquatch: "nam.drsquatch.design.json",
|
namDrsquatch: "nam.drsquatch.design.json",
|
||||||
|
namVibentec: "nam.vibentec.design.json"
|
||||||
};
|
};
|
||||||
Loading…
Reference in New Issue