@levo-so/blocks 0.1.65 → 0.1.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/package.json +3 -3
  2. package/src/blocks/index.ts +1 -0
  3. package/src/blocks/navbar/navbar-1.schema.ts +689 -10
  4. package/src/blocks/navbar/navbar-1.tsx +17 -7
  5. package/src/blocks/tabs/tab-3.schema.ts +271 -0
  6. package/src/blocks/tabs/tab-3.tsx +75 -0
  7. package/src/schemas/blocks.ts +2 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@levo-so/blocks",
3
- "version": "0.1.65",
3
+ "version": "0.1.66",
4
4
  "author": "Levo Engineering <devs@theinternetfolks.com>",
5
5
  "description": "Set of blocks for Levo studio",
6
6
  "type": "module",
@@ -15,9 +15,9 @@
15
15
  "peerDependencies": {
16
16
  "react": ">=18",
17
17
  "react-dom": ">=18",
18
+ "@levo-so/react": "0.1.65",
18
19
  "@levo-so/core": "0.1.65",
19
- "@levo-so/studio": "0.1.65",
20
- "@levo-so/react": "0.1.65"
20
+ "@levo-so/studio": "0.1.66"
21
21
  },
22
22
  "dependencies": {
23
23
  "dayjs": "1.11.13",
package/src/blocks/index.ts CHANGED
@@ -115,6 +115,7 @@ export const blocks: Record<string, BlockComponent> = {
115
115
  "service-3:v1": lazy(() => import("./services/service-3")),
116
116
  "tab-1:v1": lazy(() => import("./tabs/tab-1")),
117
117
  "tab-2:v1": lazy(() => import("./tabs/tab-2")),
118
+ "tab-3:v1": lazy(() => import("./tabs/tab-3")),
118
119
  "service-1:v1": lazy(() => import("./services/service-1")),
119
120
  "floating-button-1:v1": lazy(() => import("./floating-buttons/floating-button-1")),
120
121
  };
package/src/blocks/navbar/navbar-1.schema.ts CHANGED
@@ -223,6 +223,11 @@ export const Navbar1: IBlock = {
223
223
  },
224
224
  ],
225
225
  },
226
+ {
227
+ key: "desktop-search-container",
228
+ label: "Desktop Search Container",
229
+ field_interface: "BoxWidget",
230
+ },
226
231
  {
227
232
  key: "desktop-cta-group",
228
233
  label: "Desktop CTA Group",
@@ -241,6 +246,16 @@ export const Navbar1: IBlock = {
241
246
  label: "Mobile Background Overlay",
242
247
  field_interface: "BoxWidget",
243
248
  },
249
+ {
250
+ key: "mobile-nav-container",
251
+ label: "Mobile Nav Container",
252
+ field_interface: "BoxWidget",
253
+ },
254
+ {
255
+ key: "mobile-search-container",
256
+ label: "Mobile Search Container",
257
+ field_interface: "BoxWidget",
258
+ },
244
259
  {
245
260
  key: "mobile-nav-menu-button",
246
261
  label: "Mobile Nav Menu Button",
@@ -502,6 +517,7 @@ export const Navbar1: IBlock = {
502
517
  left: "0",
503
518
  "z-index": 20,
504
519
  },
520
+
505
521
  "mobile-nav-menu-button": {
506
522
  display: "none",
507
523
  tablet: {
@@ -645,27 +661,56 @@ export const Navbar1: IBlock = {
645
661
  },
646
662
  },
647
663
  ],
664
+ "mobile-nav-container": {
665
+ display: "none",
666
+ _hover: {
667
+ opacity: "0.9",
668
+ },
669
+ tablet: {
670
+ display: "flex",
671
+ "column-gap": "base",
672
+ },
673
+ mobile: {
674
+ "column-gap": "xs",
675
+ },
676
+ },
677
+ "desktop-search-container": {
678
+ display: "none",
679
+ },
680
+ "mobile-search-container": {
681
+ tablet: {
682
+ display: "none",
683
+ },
684
+ },
648
685
  },
649
686
  content: DEFAULT_CONTENT,
650
687
  config: {},
651
688
  },
652
- // Full Width
653
689
  {
654
- key: "full-width",
655
- title: "Full Width",
690
+ key: "default-search",
691
+ title: "Default with Search",
656
692
  styles: {
657
693
  layout: {
658
694
  position: "fixed",
659
- top: "0",
660
- left: "0",
661
- right: "0",
695
+ top: "2rem",
696
+ left: "50%",
662
697
  "z-index": 30,
663
698
  width: "100%",
699
+ "max-width": "1200px",
700
+ "border-radius": "base",
664
701
  "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
665
702
  "background-color": "rgba(255,255,255,0.8)",
666
703
  "backdrop-filter": "blur(20px)",
667
- "padding-top": "lg",
668
- "padding-bottom": "lg",
704
+ transform: "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
705
+ "padding-top": "sm",
706
+ "padding-bottom": "sm",
707
+ tablet: {
708
+ top: "2rem",
709
+ "max-width": "98%",
710
+ },
711
+ mobile: {
712
+ top: "20px",
713
+ },
669
714
  },
670
715
  "nav-container": {
671
716
  display: "flex",
@@ -722,7 +767,7 @@ export const Navbar1: IBlock = {
722
767
  },
723
768
  "sub-items": Array(3)
724
769
  .fill(0)
725
- .map(() => ({
770
+ .map((_, index) => ({
726
771
  "sub-item-link": {
727
772
  display: "flex",
728
773
  "padding-top": "sm",
@@ -816,7 +861,7 @@ export const Navbar1: IBlock = {
816
861
  "padding-right": "28px",
817
862
  "flex-direction": "column",
818
863
  position: "fixed",
819
- top: "85px",
864
+ top: "70px",
820
865
  left: "50%",
821
866
  width: "98%",
822
867
  "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
@@ -938,6 +983,640 @@ export const Navbar1: IBlock = {
938
983
  },
939
984
  },
940
985
  ],
986
+ "mobile-nav-container": {
987
+ display: "none",
988
+ _hover: {
989
+ opacity: "0.9",
990
+ },
991
+ tablet: {
992
+ display: "flex",
993
+ "column-gap": "base",
994
+ },
995
+ mobile: {
996
+ "column-gap": "xs",
997
+ },
998
+ },
999
+ "desktop-search-container": {},
1000
+ "mobile-search-container": {},
1001
+ },
1002
+ content: DEFAULT_CONTENT,
1003
+ config: {},
1004
+ },
1005
+ // Full Width
1006
+ {
1007
+ key: "full-width",
1008
+ title: "Full Width",
1009
+ styles: {
1010
+ layout: {
1011
+ position: "fixed",
1012
+ top: "0",
1013
+ left: "0",
1014
+ right: "0",
1015
+ "z-index": 30,
1016
+ width: "100%",
1017
+ "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
1018
+ "background-color": "rgba(255,255,255,0.8)",
1019
+ "backdrop-filter": "blur(20px)",
1020
+ "padding-top": "lg",
1021
+ "padding-bottom": "lg",
1022
+ },
1023
+ "nav-container": {
1024
+ display: "flex",
1025
+ "justify-content": "space-between",
1026
+ "align-items": "center",
1027
+ },
1028
+ "nav-logo": {
1029
+ height: "36px",
1030
+ },
1031
+ "desktop-nav-menu_levoGroup": {
1032
+ display: "flex",
1033
+ "align-items": "center",
1034
+ "column-gap": "7xl",
1035
+ tablet: {
1036
+ display: "none",
1037
+ },
1038
+ },
1039
+ "desktop-nav-menu": Array(3)
1040
+ .fill(0)
1041
+ .map(() => ({
1042
+ "nav-item-title": {
1043
+ width: "fit-content",
1044
+ "font-size": "base",
1045
+ "font-weight": 400,
1046
+ "white-space": "nowrap",
1047
+ color: "text-1",
1048
+ },
1049
+ "nav-item-dropdown-trigger": {
1050
+ display: "flex",
1051
+ "column-gap": "2xs",
1052
+ "align-items": "center",
1053
+ cursor: "pointer",
1054
+ },
1055
+ "nav-item-dropdown-trigger-title": {
1056
+ width: "fit-content",
1057
+ "font-size": "base",
1058
+ "line-height": 1.5,
1059
+ "font-weight": 400,
1060
+ "white-space": "nowrap",
1061
+ color: "var(--color-text-1)",
1062
+ },
1063
+ "sub-items_levoGroup": {
1064
+ display: "flex",
1065
+ padding: "4xs",
1066
+ "flex-direction": "column",
1067
+ "column-gap": "0",
1068
+ "row-gap": "0",
1069
+ "border-width": "1px",
1070
+ "outline-style": "none",
1071
+ width: "fit-content",
1072
+ "background-color": "#ffffff",
1073
+ "box-shadow":
1074
+ "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
1075
+ },
1076
+ "sub-items": Array(3)
1077
+ .fill(0)
1078
+ .map(() => ({
1079
+ "sub-item-link": {
1080
+ display: "flex",
1081
+ "padding-top": "sm",
1082
+ "padding-bottom": "sm",
1083
+ "padding-left": "sm",
1084
+ "padding-right": "sm",
1085
+ "column-gap": "sm",
1086
+ "align-items": "center",
1087
+ "border-radius": "base",
1088
+ width: "100%",
1089
+ _hover: {
1090
+ "background-color": "rgba(241 245 249 / 0.5)",
1091
+ },
1092
+ },
1093
+ "sub-item-icon-container": {
1094
+ "aspect-ratio": "1",
1095
+ display: "flex",
1096
+ "justify-content": "center",
1097
+ "align-items": "center",
1098
+ "border-radius": "base",
1099
+ height: "41.4px",
1100
+ width: "41.4px",
1101
+ "background-color": "rgb(241 245 249 / 1)",
1102
+ },
1103
+ "sub-item-icon": {
1104
+ "object-fit": "contain",
1105
+ width: "24px",
1106
+ height: "24px",
1107
+ },
1108
+ "sub-item-text-container": {
1109
+ display: "flex",
1110
+ "flex-direction": "column",
1111
+ flex: "1 1 0%",
1112
+ "row-gap": "5xs",
1113
+ },
1114
+ "sub-item-title": {
1115
+ "font-size": "sm",
1116
+ "line-height": 1.625,
1117
+ "font-weight": 600,
1118
+ color: "var(--color-text-1)",
1119
+ },
1120
+ "sub-item-description": {
1121
+ "font-size": "xs",
1122
+ "line-height": 1.375,
1123
+ "font-weight": 400,
1124
+ color: "var(--color-text-2)",
1125
+ },
1126
+ })),
1127
+ })),
1128
+ "desktop-cta-group_levoGroup": {
1129
+ display: "flex",
1130
+ "column-gap": "sm",
1131
+ tablet: {
1132
+ display: "none",
1133
+ },
1134
+ },
1135
+ "desktop-cta-group": [
1136
+ {
1137
+ cta: {},
1138
+ },
1139
+ {
1140
+ cta: {},
1141
+ },
1142
+ ],
1143
+ "mobile-background-overlay": {
1144
+ position: "fixed",
1145
+ top: "0",
1146
+ right: "0",
1147
+ bottom: "0",
1148
+ left: "0",
1149
+ "z-index": 20,
1150
+ },
1151
+ "mobile-nav-menu-button": {
1152
+ display: "none",
1153
+ tablet: {
1154
+ display: "flex",
1155
+ },
1156
+ _hover: {
1157
+ opacity: "0.9",
1158
+ },
1159
+ },
1160
+ "mobile-nav-menu-wrapper": {
1161
+ display: "flex",
1162
+ "justify-content": "center",
1163
+ "border-radius": "base",
1164
+ "background-color": "#ffffff",
1165
+ color: "brandForeground",
1166
+ "padding-top": "12px",
1167
+ "padding-bottom": "12px",
1168
+ "padding-left": "28px",
1169
+ "padding-right": "28px",
1170
+ "flex-direction": "column",
1171
+ position: "fixed",
1172
+ top: "85px",
1173
+ left: "50%",
1174
+ width: "98%",
1175
+ "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
1176
+ transform: "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
1177
+ },
1178
+ "mobile-nav-menu_levoGroup": {
1179
+ display: "flex",
1180
+ "flex-direction": "column",
1181
+ "row-gap": "2xs",
1182
+ },
1183
+ "mobile-nav-menu": Array(3)
1184
+ .fill(0)
1185
+ .map(() => ({
1186
+ "nav-item-title-container": {
1187
+ width: "100%",
1188
+ },
1189
+ "nav-item-title": {
1190
+ "padding-top": "2xs",
1191
+ "padding-bottom": "2xs",
1192
+ "column-gap": "2xs",
1193
+ "justify-content": "flex-start",
1194
+ width: "100%",
1195
+
1196
+ color: "text-1",
1197
+ },
1198
+ "nav-item-dropdown-container": {
1199
+ display: "flex",
1200
+ "flex-direction": "column",
1201
+ width: "100%",
1202
+ },
1203
+ "nav-item-dropdown-trigger": {
1204
+ display: "flex",
1205
+ "padding-top": "2xs",
1206
+ "padding-bottom": "2xs",
1207
+ "column-gap": "2xs",
1208
+ "justify-content": "space-between",
1209
+ "align-items": "center",
1210
+ width: "100%",
1211
+ "font-size": "lg",
1212
+ "line-height": 1.625,
1213
+ "font-weight": 600,
1214
+ cursor: "pointer",
1215
+ },
1216
+ "nav-item-dropdown-trigger-title": {
1217
+ "font-size": "lg",
1218
+ "line-height": "28px",
1219
+ "font-weight": 600,
1220
+ color: "var(--color-text-1)",
1221
+ },
1222
+ "sub-items_levoGroup": {
1223
+ display: "flex",
1224
+ "flex-direction": "column",
1225
+ "row-gap": "4xs",
1226
+ width: "100%",
1227
+ },
1228
+ "sub-items": Array(3)
1229
+ .fill(0)
1230
+ .map(() => ({
1231
+ "sub-item-link": {
1232
+ display: "flex",
1233
+ "padding-top": "2xs",
1234
+ "padding-bottom": "2xs",
1235
+ "padding-left": "2xs",
1236
+ "padding-right": "2xs",
1237
+ "column-gap": "sm",
1238
+ "align-items": "center",
1239
+ "border-radius": "base",
1240
+ width: "100%",
1241
+ },
1242
+ "sub-item-icon-container": {
1243
+ "aspect-ratio": "1 / 1",
1244
+ display: "flex",
1245
+ "justify-content": "center",
1246
+ "align-items": "center",
1247
+ "border-radius": "base",
1248
+ },
1249
+ "sub-item-icon": {
1250
+ "object-fit": "contain",
1251
+ width: "24px",
1252
+ height: "24px",
1253
+ },
1254
+ "sub-item-text-container": {
1255
+ display: "flex",
1256
+ "flex-direction": "column",
1257
+ flex: "1 1 0%",
1258
+ "row-gap": "4xs",
1259
+ },
1260
+ "sub-item-title-container": {},
1261
+ "sub-item-title": {
1262
+ "font-size": "base",
1263
+ "line-height": 1.2,
1264
+ "font-weight": 600,
1265
+ color: "var(--color-text-1)",
1266
+ },
1267
+ "sub-item-description": {
1268
+ "font-size": "sm",
1269
+ "line-height": 1.375,
1270
+ "font-weight": 400,
1271
+ color: "var(--color-text-2)",
1272
+ },
1273
+ })),
1274
+ })),
1275
+ "mobile-cta-group_levoGroup": {
1276
+ "margin-top": "2xs",
1277
+ width: "100%",
1278
+ display: "flex",
1279
+ "flex-direction": "column",
1280
+ "row-gap": "2xs",
1281
+ },
1282
+ "mobile-cta-group": [
1283
+ {
1284
+ cta: {
1285
+ width: "100%",
1286
+ },
1287
+ },
1288
+ {
1289
+ cta: {
1290
+ width: "100%",
1291
+ },
1292
+ },
1293
+ ],
1294
+ "mobile-nav-container": {
1295
+ display: "none",
1296
+ _hover: {
1297
+ opacity: "0.9",
1298
+ },
1299
+ tablet: {
1300
+ display: "flex",
1301
+ "column-gap": "base",
1302
+ },
1303
+ mobile: {
1304
+ "column-gap": "xs",
1305
+ },
1306
+ },
1307
+ "desktop-search-container": {
1308
+ display: "none",
1309
+ },
1310
+ "mobile-search-container": {
1311
+ display: "none",
1312
+ },
1313
+ },
1314
+ content: DEFAULT_CONTENT,
1315
+ config: {},
1316
+ },
1317
+ {
1318
+ key: "full-width-search",
1319
+ title: "Full Width with Search",
1320
+ styles: {
1321
+ layout: {
1322
+ position: "fixed",
1323
+ top: "0",
1324
+ left: "0",
1325
+ right: "0",
1326
+ "z-index": 30,
1327
+ width: "100%",
1328
+ "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
1329
+ "background-color": "rgba(255,255,255,0.8)",
1330
+ "backdrop-filter": "blur(20px)",
1331
+ "padding-top": "lg",
1332
+ "padding-bottom": "lg",
1333
+ },
1334
+ "nav-container": {
1335
+ display: "flex",
1336
+ "justify-content": "space-between",
1337
+ "align-items": "center",
1338
+ },
1339
+ "nav-logo": {
1340
+ height: "36px",
1341
+ },
1342
+ "desktop-nav-menu_levoGroup": {
1343
+ display: "flex",
1344
+ "align-items": "center",
1345
+ "column-gap": "7xl",
1346
+ tablet: {
1347
+ display: "none",
1348
+ },
1349
+ },
1350
+ "desktop-nav-menu": Array(3)
1351
+ .fill(0)
1352
+ .map(() => ({
1353
+ "nav-item-title": {
1354
+ width: "fit-content",
1355
+ "font-size": "base",
1356
+ "font-weight": 400,
1357
+ "white-space": "nowrap",
1358
+ color: "text-1",
1359
+ },
1360
+ "nav-item-dropdown-trigger": {
1361
+ display: "flex",
1362
+ "column-gap": "2xs",
1363
+ "align-items": "center",
1364
+ cursor: "pointer",
1365
+ },
1366
+ "nav-item-dropdown-trigger-title": {
1367
+ width: "fit-content",
1368
+ "font-size": "base",
1369
+ "line-height": 1.5,
1370
+ "font-weight": 400,
1371
+ "white-space": "nowrap",
1372
+ color: "var(--color-text-1)",
1373
+ },
1374
+ "sub-items_levoGroup": {
1375
+ display: "flex",
1376
+ padding: "4xs",
1377
+ "flex-direction": "column",
1378
+ "column-gap": "0",
1379
+ "row-gap": "0",
1380
+ "border-width": "1px",
1381
+ "outline-style": "none",
1382
+ width: "fit-content",
1383
+ "background-color": "#ffffff",
1384
+ "box-shadow":
1385
+ "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
1386
+ },
1387
+ "sub-items": Array(3)
1388
+ .fill(0)
1389
+ .map(() => ({
1390
+ "sub-item-link": {
1391
+ display: "flex",
1392
+ "padding-top": "sm",
1393
+ "padding-bottom": "sm",
1394
+ "padding-left": "sm",
1395
+ "padding-right": "sm",
1396
+ "column-gap": "sm",
1397
+ "align-items": "center",
1398
+ "border-radius": "base",
1399
+ width: "100%",
1400
+ _hover: {
1401
+ "background-color": "rgba(241 245 249 / 0.5)",
1402
+ },
1403
+ },
1404
+ "sub-item-icon-container": {
1405
+ "aspect-ratio": "1",
1406
+ display: "flex",
1407
+ "justify-content": "center",
1408
+ "align-items": "center",
1409
+ "border-radius": "base",
1410
+ height: "41.4px",
1411
+ width: "41.4px",
1412
+ "background-color": "rgb(241 245 249 / 1)",
1413
+ },
1414
+ "sub-item-icon": {
1415
+ "object-fit": "contain",
1416
+ width: "24px",
1417
+ height: "24px",
1418
+ },
1419
+ "sub-item-text-container": {
1420
+ display: "flex",
1421
+ "flex-direction": "column",
1422
+ flex: "1 1 0%",
1423
+ "row-gap": "5xs",
1424
+ },
1425
+ "sub-item-title": {
1426
+ "font-size": "sm",
1427
+ "line-height": 1.625,
1428
+ "font-weight": 600,
1429
+ color: "var(--color-text-1)",
1430
+ },
1431
+ "sub-item-description": {
1432
+ "font-size": "xs",
1433
+ "line-height": 1.375,
1434
+ "font-weight": 400,
1435
+ color: "var(--color-text-2)",
1436
+ },
1437
+ })),
1438
+ })),
1439
+ "desktop-cta-group_levoGroup": {
1440
+ display: "flex",
1441
+ "column-gap": "sm",
1442
+ tablet: {
1443
+ display: "none",
1444
+ },
1445
+ },
1446
+ "desktop-cta-group": [
1447
+ {
1448
+ cta: {},
1449
+ },
1450
+ {
1451
+ cta: {},
1452
+ },
1453
+ ],
1454
+ "mobile-background-overlay": {
1455
+ position: "fixed",
1456
+ top: "0",
1457
+ right: "0",
1458
+ bottom: "0",
1459
+ left: "0",
1460
+ "z-index": 20,
1461
+ },
1462
+ "mobile-nav-menu-button": {
1463
+ display: "none",
1464
+ tablet: {
1465
+ display: "flex",
1466
+ },
1467
+ _hover: {
1468
+ opacity: "0.9",
1469
+ },
1470
+ },
1471
+ "mobile-nav-menu-wrapper": {
1472
+ display: "flex",
1473
+ "justify-content": "center",
1474
+ "border-radius": "base",
1475
+ "background-color": "#ffffff",
1476
+ color: "brandForeground",
1477
+ "padding-top": "12px",
1478
+ "padding-bottom": "12px",
1479
+ "padding-left": "28px",
1480
+ "padding-right": "28px",
1481
+ "flex-direction": "column",
1482
+ position: "fixed",
1483
+ top: "85px",
1484
+ left: "50%",
1485
+ width: "98%",
1486
+ "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
1487
+ transform: "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
1488
+ },
1489
+ "mobile-nav-menu_levoGroup": {
1490
+ display: "flex",
1491
+ "flex-direction": "column",
1492
+ "row-gap": "2xs",
1493
+ },
1494
+ "mobile-nav-menu": Array(3)
1495
+ .fill(0)
1496
+ .map(() => ({
1497
+ "nav-item-title-container": {
1498
+ width: "100%",
1499
+ },
1500
+ "nav-item-title": {
1501
+ "padding-top": "2xs",
1502
+ "padding-bottom": "2xs",
1503
+ "column-gap": "2xs",
1504
+ "justify-content": "flex-start",
1505
+ width: "100%",
1506
+
1507
+ color: "text-1",
1508
+ },
1509
+ "nav-item-dropdown-container": {
1510
+ display: "flex",
1511
+ "flex-direction": "column",
1512
+ width: "100%",
1513
+ },
1514
+ "nav-item-dropdown-trigger": {
1515
+ display: "flex",
1516
+ "padding-top": "2xs",
1517
+ "padding-bottom": "2xs",
1518
+ "column-gap": "2xs",
1519
+ "justify-content": "space-between",
1520
+ "align-items": "center",
1521
+ width: "100%",
1522
+ "font-size": "lg",
1523
+ "line-height": 1.625,
1524
+ "font-weight": 600,
1525
+ cursor: "pointer",
1526
+ },
1527
+ "nav-item-dropdown-trigger-title": {
1528
+ "font-size": "lg",
1529
+ "line-height": "28px",
1530
+ "font-weight": 600,
1531
+ color: "var(--color-text-1)",
1532
+ },
1533
+ "sub-items_levoGroup": {
1534
+ display: "flex",
1535
+ "flex-direction": "column",
1536
+ "row-gap": "4xs",
1537
+ width: "100%",
1538
+ },
1539
+ "sub-items": Array(3)
1540
+ .fill(0)
1541
+ .map(() => ({
1542
+ "sub-item-link": {
1543
+ display: "flex",
1544
+ "padding-top": "2xs",
1545
+ "padding-bottom": "2xs",
1546
+ "padding-left": "2xs",
1547
+ "padding-right": "2xs",
1548
+ "column-gap": "sm",
1549
+ "align-items": "center",
1550
+ "border-radius": "base",
1551
+ width: "100%",
1552
+ },
1553
+ "sub-item-icon-container": {
1554
+ "aspect-ratio": "1 / 1",
1555
+ display: "flex",
1556
+ "justify-content": "center",
1557
+ "align-items": "center",
1558
+ "border-radius": "base",
1559
+ },
1560
+ "sub-item-icon": {
1561
+ "object-fit": "contain",
1562
+ width: "24px",
1563
+ height: "24px",
1564
+ },
1565
+ "sub-item-text-container": {
1566
+ display: "flex",
1567
+ "flex-direction": "column",
1568
+ flex: "1 1 0%",
1569
+ "row-gap": "4xs",
1570
+ },
1571
+ "sub-item-title-container": {},
1572
+ "sub-item-title": {
1573
+ "font-size": "base",
1574
+ "line-height": 1.2,
1575
+ "font-weight": 600,
1576
+ color: "var(--color-text-1)",
1577
+ },
1578
+ "sub-item-description": {
1579
+ "font-size": "sm",
1580
+ "line-height": 1.375,
1581
+ "font-weight": 400,
1582
+ color: "var(--color-text-2)",
1583
+ },
1584
+ })),
1585
+ })),
1586
+ "mobile-cta-group_levoGroup": {
1587
+ "margin-top": "2xs",
1588
+ width: "100%",
1589
+ display: "flex",
1590
+ "flex-direction": "column",
1591
+ "row-gap": "2xs",
1592
+ },
1593
+ "mobile-cta-group": [
1594
+ {
1595
+ cta: {
1596
+ width: "100%",
1597
+ },
1598
+ },
1599
+ {
1600
+ cta: {
1601
+ width: "100%",
1602
+ },
1603
+ },
1604
+ ],
1605
+ "mobile-nav-container": {
1606
+ display: "none",
1607
+ _hover: {
1608
+ opacity: "0.9",
1609
+ },
1610
+ tablet: {
1611
+ display: "flex",
1612
+ "column-gap": "base",
1613
+ },
1614
+ mobile: {
1615
+ "column-gap": "xs",
1616
+ },
1617
+ },
1618
+ "desktop-search-container": {},
1619
+ "mobile-search-container": {},
941
1620
  },
942
1621
  content: DEFAULT_CONTENT,
943
1622
  config: {},
package/src/blocks/navbar/navbar-1.tsx CHANGED
@@ -6,6 +6,7 @@ import {
6
6
  Box,
7
7
  Button,
8
8
  Container,
9
+ GlobalSearch,
9
10
  Icon,
10
11
  Image,
11
12
  PopoverContent,
@@ -241,13 +242,18 @@ const MobileNavigationSheet: React.FC<{
241
242
  }> = ({ navItems, content, isOpen, setIsOpen }) => {
242
243
  return (
243
244
  <React.Fragment>
244
- <Button
245
- elementKey="mobile-nav-menu-button"
246
- aria-label="Open navigation"
247
- onClick={() => setIsOpen(!isOpen)}
248
- >
249
- {isOpen ? <X size={24} /> : <Menu size={24} />}
250
- </Button>
245
+ <Box elementKey="mobile-nav-container">
246
+ <Box elementKey="mobile-search-container">
247
+ <GlobalSearch variant="icon" />
248
+ </Box>
249
+ <Button
250
+ elementKey="mobile-nav-menu-button"
251
+ aria-label="Open navigation"
252
+ onClick={() => setIsOpen(!isOpen)}
253
+ >
254
+ {isOpen ? <X size={24} /> : <Menu size={24} />}
255
+ </Button>
256
+ </Box>
251
257
  {isOpen && (
252
258
  <Box elementKey="mobile-nav-menu-wrapper">
253
259
  <Box elementKey="mobile-nav-menu_levoGroup" data-levo_group>
@@ -325,7 +331,11 @@ const Navbar1: React.FC<ILevoBlockBaseProps<INavbar1Content>> = ({ content }) =>
325
331
  isOpen={isOpen}
326
332
  setIsOpen={setIsOpen}
327
333
  />
334
+
328
335
  <Box elementKey="desktop-cta-group_levoGroup" data-levo_group>
336
+ <Box elementKey="desktop-search-container">
337
+ <GlobalSearch variant="icon" />
338
+ </Box>
329
339
  {content?.["desktop-cta-group"]?.length > 0 &&
330
340
  content?.["desktop-cta-group"]?.map((_: any, index: number) => (
331
341
  <Button
package/src/blocks/tabs/tab-3.schema.ts ADDED
@@ -0,0 +1,271 @@
1
+ import type { IBlock } from "@levo-so/studio";
2
+
3
+ const PRODUCT_DEFAULT = {
4
+ product_wrapper: null,
5
+ image: {
6
+ id: "7141014160938075687",
7
+ location: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
8
+ kind: "image",
9
+ mimetype: "image/png",
10
+ srcset: {
11
+ "1080w": "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
12
+ "1200w": "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
13
+ "1920w": "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
14
+ "320w": "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
15
+ "640w": "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
16
+ "750w": "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
17
+ "828w": "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
18
+ path: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
19
+ },
20
+ },
21
+ info_wrapper: null,
22
+ name: "Product Name",
23
+ title: "Product Title",
24
+ url: "https://example.com",
25
+ };
26
+
27
+ const DEFAULT_CONTENT = {
28
+ layout: null,
29
+ container: null,
30
+ header_wrapper: null,
31
+ title: "Our Products",
32
+ tabs_section_wrapper: null,
33
+ tabs_list: null,
34
+ categories: [
35
+ {
36
+ name: "Category 1",
37
+ tab_content: null,
38
+ products_grid: null,
39
+ products: [PRODUCT_DEFAULT, PRODUCT_DEFAULT, PRODUCT_DEFAULT],
40
+ },
41
+ {
42
+ name: "Category 2",
43
+ tab_content: null,
44
+ products_grid: null,
45
+ products: [PRODUCT_DEFAULT, PRODUCT_DEFAULT, PRODUCT_DEFAULT],
46
+ },
47
+ {
48
+ name: "Category 3",
49
+ tab_content: null,
50
+ products_grid: null,
51
+ products: [PRODUCT_DEFAULT, PRODUCT_DEFAULT, PRODUCT_DEFAULT],
52
+ },
53
+ ],
54
+ };
55
+
56
+ export type ITab3Content = typeof DEFAULT_CONTENT;
57
+
58
+ export const Tab3: IBlock = {
59
+ category_id: "tabs",
60
+ title: "Tab 3",
61
+ key: "tab-3",
62
+ version: "v1",
63
+ prompt_description: "Product categories organized in tabs with a grid of product cards",
64
+ content_schema: [
65
+ {
66
+ key: "layout",
67
+ label: "Layout",
68
+ field_interface: "LayoutWidget",
69
+ },
70
+ {
71
+ key: "container",
72
+ label: "Container",
73
+ field_interface: "ContainerWidget",
74
+ },
75
+ {
76
+ key: "header_wrapper",
77
+ label: "Header Wrapper",
78
+ field_interface: "BoxWidget",
79
+ },
80
+ {
81
+ key: "title",
82
+ label: "Title",
83
+ field_interface: "HeadingWidget",
84
+ },
85
+ {
86
+ key: "tabs_section_wrapper",
87
+ label: "Tabs Section Wrapper",
88
+ field_interface: "BoxWidget",
89
+ },
90
+ {
91
+ key: "tabs_list",
92
+ label: "Tabs List",
93
+ field_interface: "TabsListWidget",
94
+ },
95
+ {
96
+ key: "categories",
97
+ label: "Categories",
98
+ kind: "group",
99
+ field_interface: "BoxWidget",
100
+ fields: [
101
+ {
102
+ key: "name",
103
+ label: "Category Name",
104
+ field_interface: "TabsTriggerWidget",
105
+ },
106
+ {
107
+ key: "tab_content",
108
+ label: "Tab Content",
109
+ field_interface: "TabsContentWidget",
110
+ },
111
+ {
112
+ key: "products_grid",
113
+ label: "Products Grid",
114
+ field_interface: "BoxWidget",
115
+ },
116
+ {
117
+ key: "products",
118
+ label: "Products",
119
+ kind: "group",
120
+ field_interface: "BoxWidget",
121
+ fields: [
122
+ {
123
+ key: "product_wrapper",
124
+ label: "Product Wrapper",
125
+ field_interface: "BoxWidget",
126
+ },
127
+ {
128
+ key: "image",
129
+ label: "Image",
130
+ field_interface: "MediaWidget",
131
+ },
132
+ {
133
+ key: "info_wrapper",
134
+ label: "Info Wrapper",
135
+ field_interface: "BoxWidget",
136
+ },
137
+ {
138
+ key: "name",
139
+ label: "Category Tag",
140
+ field_interface: "HeadingWidget",
141
+ },
142
+ {
143
+ key: "title",
144
+ label: "Product Title",
145
+ field_interface: "HeadingWidget",
146
+ },
147
+ {
148
+ key: "url",
149
+ label: "URL",
150
+ field_interface: "URLWidget",
151
+ },
152
+ ],
153
+ },
154
+ ],
155
+ },
156
+ ],
157
+ layouts: [
158
+ {
159
+ key: "default",
160
+ title: "Default",
161
+ styles: {
162
+ layout: {},
163
+ container: {},
164
+ header_wrapper: {
165
+ "text-align": "center",
166
+ "margin-bottom": "40px",
167
+ },
168
+ title: {
169
+ "font-weight": 800,
170
+ "font-size": "3rem",
171
+ tablet: {
172
+ "font-size": "2rem",
173
+ },
174
+ },
175
+ tabs_section_wrapper: {
176
+ display: "flex",
177
+ "flex-direction": "column",
178
+ "align-items": "center",
179
+ gap: "40px",
180
+ },
181
+ tabs_list: {
182
+ display: "flex",
183
+ "flex-wrap": "wrap",
184
+ "justify-content": "center",
185
+ gap: "8px",
186
+ "background-color": "#f1f5f9",
187
+ padding: "4px",
188
+ "border-radius": "9999px",
189
+ },
190
+ categories: DEFAULT_CONTENT.categories.map(() => ({
191
+ name: {
192
+ padding: "8px 16px",
193
+ "border-radius": "9999px",
194
+ cursor: "pointer",
195
+ transition: "all 0.2s",
196
+ "&[data-state='active']": {
197
+ "background-color": "white",
198
+ "box-shadow": "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
199
+ },
200
+ },
201
+ tab_content: {
202
+ width: "100%",
203
+ },
204
+ products_grid: {
205
+ display: "grid",
206
+ "grid-template-columns": "repeat(3, minmax(0, 1fr))",
207
+ gap: "40px",
208
+ tablet: {
209
+ "grid-template-columns": "repeat(2, minmax(0, 1fr))",
210
+ },
211
+ mobile: {
212
+ "grid-template-columns": "repeat(1, minmax(0, 1fr))",
213
+ },
214
+ },
215
+ products: Array(3)
216
+ .fill(0)
217
+ .map(() => ({
218
+ product_wrapper: {
219
+ display: "flex",
220
+ "flex-direction": "column",
221
+ "align-items": "center",
222
+ "text-align": "center",
223
+ },
224
+ image: {
225
+ width: "100%",
226
+ "aspect-ratio": "1/1",
227
+ "object-fit": "cover",
228
+ "border-radius": "12px",
229
+ },
230
+ info_wrapper: {
231
+ "margin-top": "24px",
232
+ display: "flex",
233
+ "flex-direction": "column",
234
+ "align-items": "center",
235
+ gap: "8px",
236
+ },
237
+ name: {
238
+ "font-size": "0.875rem",
239
+ padding: "4px 12px",
240
+ "background-color": "#f1f5f9",
241
+ "border-radius": "9999px",
242
+ width: "fit-content",
243
+ },
244
+ title: {
245
+ "font-weight": 700,
246
+ "font-size": "1.25rem",
247
+ },
248
+ })),
249
+ })),
250
+ },
251
+ config: {},
252
+ content: DEFAULT_CONTENT,
253
+ },
254
+ ],
255
+ };
256
+
257
+ export interface ITab3Product {
258
+ product_wrapper: null;
259
+ image: Record<string, unknown>;
260
+ info_wrapper: null;
261
+ name: string;
262
+ title: string;
263
+ url: string;
264
+ }
265
+
266
+ export interface ITab3Category {
267
+ name: string;
268
+ tab_content: null;
269
+ products_grid: null;
270
+ products: ITab3Product[];
271
+ }
package/src/blocks/tabs/tab-3.tsx ADDED
@@ -0,0 +1,75 @@
1
+ import {
2
+ Box,
3
+ Container,
4
+ Heading,
5
+ type ILevoBlockBaseProps,
6
+ Media,
7
+ Section,
8
+ TabsContent,
9
+ TabsList,
10
+ TabsRoot,
11
+ TabsTrigger,
12
+ } from "@levo-so/studio";
13
+ import type React from "react";
14
+
15
+ import type { ITab3Category, ITab3Content, ITab3Product } from "./tab-3.schema";
16
+
17
+ const Tab3: React.FC<ILevoBlockBaseProps<ITab3Content>> = ({ content }) => {
18
+ return (
19
+ <Section elementKey="layout">
20
+ <Container elementKey="container">
21
+ <Box elementKey="header_wrapper">
22
+ <Heading elementKey="title" />
23
+ </Box>
24
+ <TabsRoot defaultValue="0">
25
+ <Box elementKey="tabs_section_wrapper">
26
+ <TabsList elementKey="tabs_list">
27
+ {(content.categories ?? []).map((_category: ITab3Category, index: number) => (
28
+ <TabsTrigger
29
+ value={index.toString()}
30
+ key={index}
31
+ elementKey={`categories.${index}.name`}
32
+ />
33
+ ))}
34
+ </TabsList>
35
+ {(content.categories ?? []).map((category: ITab3Category, index: number) => (
36
+ <TabsContent
37
+ value={index.toString()}
38
+ key={index}
39
+ elementKey={`categories.${index}.tab_content`}
40
+ >
41
+ <Box elementKey={`categories.${index}.products_grid`}>
42
+ {(category.products ?? [])?.map(
43
+ (_product: ITab3Product, productIndex: number) => (
44
+ <Box
45
+ key={productIndex}
46
+ elementKey={`categories.${index}.products.${productIndex}.product_wrapper`}
47
+ >
48
+ <Media
49
+ elementKey={`categories.${index}.products.${productIndex}.image`}
50
+ alt={`Product ${productIndex + 1}`}
51
+ />
52
+ <Box
53
+ elementKey={`categories.${index}.products.${productIndex}.info_wrapper`}
54
+ >
55
+ <Heading
56
+ elementKey={`categories.${index}.products.${productIndex}.title`}
57
+ />
58
+ <Heading
59
+ elementKey={`categories.${index}.products.${productIndex}.name`}
60
+ />
61
+ </Box>
62
+ </Box>
63
+ ),
64
+ )}
65
+ </Box>
66
+ </TabsContent>
67
+ ))}
68
+ </Box>
69
+ </TabsRoot>
70
+ </Container>
71
+ </Section>
72
+ );
73
+ };
74
+
75
+ export default Tab3;
package/src/schemas/blocks.ts CHANGED
@@ -99,6 +99,7 @@ import { Stats1 } from "../blocks/stats/stats-1.schema";
99
99
  import { Stats2 } from "../blocks/stats/stats-2.schema";
100
100
  import { Tab1 } from "../blocks/tabs/tab-1.schema";
101
101
  import { Tab2 } from "../blocks/tabs/tab-2.schema";
102
+ import { Tab3 } from "../blocks/tabs/tab-3.schema";
102
103
  import { Team1 } from "../blocks/team/team-1.schema";
103
104
  import { Team2 } from "../blocks/team/team-2.schema";
104
105
  import { Team3 } from "../blocks/team/team-3.schema";
@@ -216,6 +217,7 @@ export const BlockList: IBlock[] = [
216
217
  Stats2,
217
218
  Tab1,
218
219
  Tab2,
220
+ Tab3,
219
221
  Team1,
220
222
  Team2,
221
223
  Team3,