hds-web 1.13.2 → 1.13.4

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 (12) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +4 -4
  4. package/dist/index.js +4 -4
  5. package/package.json +1 -1
  6. package/src/HDS/components/Cards/Link/link.js +17 -17
  7. package/src/HDS/components/Hero/h3.js +170 -118
  8. package/src/HDS/modules/TextCard/textCard.js +6 -1
  9. package/src/HDS/modules/navCard/index.js +2 -1
  10. package/src/HDS/modules/navCard/navCard.js +90 -52
  11. package/src/HDS/modules/navCard/navTabCard.js +93 -0
  12. package/src/styles/tailwind.css +29 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.13.2",
3
+ "version": "1.13.4",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Cards/Link/link.js CHANGED
@@ -15,16 +15,16 @@ export default function LinkCard(props) {
15
15
  {props.brandImageUrl ?
16
16
  (
17
17
  <div className="flex flex-col">
18
- <div className="flex justify-end items-end">
19
- {props.iconArrowVariant &&
20
- (<Icon
18
+ {props.iconArrowVariant &&
19
+ <div className="flex justify-end items-end">
20
+ <Icon
21
21
  height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
22
22
  variant={props.iconArrowVariant}
23
23
  strokeColor={props.iconArrowStrokeColor}
24
24
  strokeClass={HDSColor(props.iconArrowStrokeClass)}
25
- />)
26
- }
27
- </div>
25
+ />
26
+ </div>
27
+ }
28
28
  <img src={props.brandImageUrl} alt={props.brandImageAlt} />
29
29
 
30
30
  </div>
@@ -60,14 +60,14 @@ export default function LinkCard(props) {
60
60
  {props.description &&
61
61
  (
62
62
  <div>
63
-
64
- <Typography
65
- textStyle="body3"
66
- className={`${HDSColor(props.descTextColor)} mt-2`}>
67
- {props.description}
68
- </Typography>
69
- </div>
70
-
63
+
64
+ <Typography
65
+ textStyle="body3"
66
+ className={`${HDSColor(props.descTextColor)} mt-2`}>
67
+ {props.description}
68
+ </Typography>
69
+ </div>
70
+
71
71
  )}
72
72
  </>
73
73
  )
@@ -78,10 +78,10 @@ export default function LinkCard(props) {
78
78
  }
79
79
 
80
80
  LinkCard.defaultProps = {
81
- descTextColor:'',
82
- titleTextColor:'',
81
+ descTextColor: '',
82
+ titleTextColor: '',
83
83
  brandImageUrl: '',
84
- brandImageAlt:'',
84
+ brandImageAlt: '',
85
85
  linkUrl: '#',
86
86
  iconVariant: 'videorecorder',
87
87
  iconStrokeColor: 'blue-500',
package/src/HDS/components/Hero/h3.js CHANGED
@@ -4,165 +4,217 @@ import { Typography } from '../../foundation/Typography';
4
4
  import { HDSButton } from '../../components/Buttons';
5
5
  import { HDSColor } from '../../foundation/ColorPalette';
6
6
  import { Tab } from '../../components/Tabs';
7
- import PropTypes from 'prop-types';
8
7
  import { LinkCard } from '../Cards/Link';
9
8
 
10
9
  const tabCard = (Content) => (
11
10
  <>
12
- <div className='tb:px-3'>
13
- {Content.title &&
14
- <Typography
15
- textStyle='h2'
16
- className={HDSColor(Content.titleTextColor)}>
17
- {Content.title}
18
- </Typography>}
11
+ <div className='tb:px-3'>
12
+ {Content.title &&
13
+ <Typography
14
+ textStyle='h2'
15
+ as="h2"
16
+ className={`${HDSColor(Content.titleTextColor)}`}>
17
+ {Content.title}
18
+ </Typography>}
19
19
 
20
- {Content.subTitle &&
21
- <Typography
22
- textStyle='sub2'
23
- className={`mt-2 ${HDSColor(Content.subTitleTextColor)}`}>
24
- {Content.subTitle}
25
- </Typography>}
26
- </div>
27
- {Content.btnLabel &&
28
- <div className='flex pl-3 pt-6'>
29
- <HDSButton
30
- label={Content.btnLabel}
31
- type='secondary'
20
+ {Content.subTitle &&
21
+ <Typography
22
+ textStyle='sub2'
23
+ className={`mt-2 ${HDSColor(Content.subTitleTextColor)}`}>
24
+ {Content.subTitle}
25
+ </Typography>}
26
+ </div>
27
+ <div className='flex items-center flex-wrap flex-row gap-[38px]'>
28
+ {Content.buttons &&
29
+
30
+ Content.buttons.map((btn, index) => (
31
+ <React.Fragment key={index}>
32
+ {btn.cta_link && btn.cta_text && btn.cta_type && (
33
+ <a href={btn.cta_link} key={index} className='flex pl-3 pt-6'>
34
+ <HDSButton
35
+ label={btn.cta_text}
36
+ type={btn.cta_type}
32
37
  leftIconVariant='none'
33
38
  rightIconVariant='none'
34
39
  state='default'
35
- size='sm'
40
+ size='md'
36
41
  rightAnimatedArrow={true}
37
- rightAnimatedArrowColor='#1E56E3'
38
- animatedHoverStroke='group-hover:stroke-blue-600'
42
+ rightAnimatedArrowColor='#FFFFFF'
43
+ animatedHoverStroke='group-hover:stroke-neutral-0'
39
44
  className='flex'
40
- btnTextColorClass='text-blue-600'
41
- />
42
- </div>
45
+ btnTextColorClass={HDSColor('text-neutral-0')}
46
+ />
47
+ </a>)}
48
+ </React.Fragment>
49
+ ))
50
+
43
51
  }
52
+ </div>
44
53
 
45
54
  </>
46
55
  )
47
56
 
48
57
  export default function HeroCapability(props) {
49
- const {
50
- heroData,
51
- activeTab,
52
- onTabChange
53
- } = props;
54
- let currentTab;
55
- if(activeTab.activeTab){
56
- currentTab = activeTab.activeTab;
57
- }
58
- if (!heroData) {
59
- return <div></div>; // Replace with your loading indicator or fallback UI
60
- }
61
-
58
+ const [showVideo, setShowVideo] = useState(false);
59
+ const {
60
+ heroData,
61
+ activeTab,
62
+ onTabChange,
63
+ firstTab
64
+ } = props;
65
+ let currentTab;
66
+ if (activeTab.activeTab) {
67
+ currentTab = activeTab.activeTab;
68
+ }
69
+ if (!heroData) {
70
+ return <div></div>; // Replace with your loading indicator or fallback UI
71
+ }
62
72
  const LinkCardsFn = (heroData) => {
63
- return (
64
- heroData.linkCards && (
65
- <div className="flex px-8 tb:px-0 tb:justify-center overflow-auto scrollbar-hide flex-row mt-16 gap-6 tb:flex-row ">
66
- {heroData.linkCards.map((card, index) => (
67
- <div key={index} className={`${HDSColor(card.cardBorderClass)} border rounded-2xl w-full pb-2 min-w-[11.5rem] max-w-[22.313rem]`}>
68
- <LinkCard
69
- titleTextColor= {card.titleTextColor}
70
- descTextColor={card.descTextColor}
71
- linkUrl={card.linkUrl}
72
- cardBgColor={card.cardBgColor}
73
- cardHoverBg={card.cardHoverBg}
74
- iconVariant={card.iconVariant}
75
- iconStrokeClass={card.iconStrokeColor}
76
- iconArrowVariant={card.iconArrowVariant}
77
- iconArrowStrokeClass={card.iconArrowStrokeColor}
78
- title={card.title}
79
- description={card.description}
80
- />
81
- </div>
82
- ))}
83
- </div>
84
- )
85
- );
86
- };
73
+ return (
74
+ heroData.linkCards && (
75
+ <div className="flex px-8 tb:px-0 tb:justify-center overflow-auto db:overflow-visible scrollbar-hide flex-row mt-16 gap-6 tb:flex-row ">
76
+ {heroData.linkCards.map((card, index) => (
77
+ <div key={index} className={`${HDSColor(card.cardBorderClass)} ${HDSColor(card.cardBgColor)} ${HDSColor(card.cardHoverBg)} transition-all ease-out duration-300 hover:shadow-2xl hover:border-opacity-0 border rounded-2xl w-full min-w-[11.5rem] max-w-[22.313rem]`}>
78
+ <LinkCard
79
+ titleTextColor={card.titleTextColor}
80
+ descTextColor={card.descTextColor}
81
+ linkUrl={card.linkUrl}
82
+ iconVariant={card.iconVariant}
83
+ iconStrokeClass={card.iconStrokeColor}
84
+ iconArrowVariant={card.iconArrowVariant}
85
+ iconArrowStrokeClass={card.iconArrowStrokeColor}
86
+ title={card.title}
87
+ description={card.description}
88
+ />
89
+ </div>
90
+ ))}
91
+ </div>
92
+ )
93
+ );
94
+ };
87
95
 
88
96
 
89
97
  const handleTabClick = (tab) => {
90
- if (tab.name) {
91
- const nameCheck = tab.name.replace(/\s/g, ''); // Remove spaces from tab name
92
- onTabChange(nameCheck);
93
- }
94
- else return;
95
- // Perform any other actions based on the clicked tab
98
+ if (tab.name) {
99
+ const nameCheck = tab.name.replace(/\s/g, ''); // Remove spaces from tab name
100
+ onTabChange(nameCheck);
101
+
102
+ }
103
+ else return;
104
+ // Perform any other actions based on the clicked tab
96
105
  }
97
106
  let heroBgColorClass = '';
98
107
  let bgTabClass = '';
99
108
  let videoUrl = '';
100
109
  let videoPoster = '';
101
110
  let img_url = '';
102
- let pillColorClass= '';
103
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['heroBgColor']){
104
- heroBgColorClass = HDSColor(props.heroData.tabContent[currentTab]['heroBgColor'])
111
+ let pillColorClass = '';
112
+ if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['heroBgColor']) {
113
+ heroBgColorClass = HDSColor(props.heroData.tabContent[currentTab]['heroBgColor'])
105
114
  }
106
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']){
107
- bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab'])
115
+ if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']) {
116
+ bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab'])
108
117
  }
109
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoUrl']){
110
- videoUrl = props.heroData.tabContent[currentTab]['videoUrl']
118
+ if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoUrl']) {
119
+ videoUrl = props.heroData.tabContent[currentTab]['videoUrl']
111
120
  }
112
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoPoster']){
113
- videoPoster = props.heroData.tabContent[currentTab]['videoPoster']
121
+ if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoPoster']) {
122
+ videoPoster = props.heroData.tabContent[currentTab]['videoPoster']
114
123
  }
115
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['img_url']){
116
- img_url = props.heroData.tabContent[currentTab]['img_url']
124
+ if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['img_url']) {
125
+ img_url = props.heroData.tabContent[currentTab]['img_url']
117
126
  }
118
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['pillColor']){
119
- pillColorClass = props.heroData.tabContent[currentTab]['pillColor']
127
+ if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['pillColor']) {
128
+ pillColorClass = props.heroData.tabContent[currentTab]['pillColor']
120
129
  }
121
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']){
122
- bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab']);
130
+ if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']) {
131
+ bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab']);
123
132
  }
124
133
 
125
134
  return (
126
- <div className={`${(heroBgColorClass)} -mt-[81px] pt-[81px] tb:mt-0 tb:pt-0 max-w-7xl rounded-b-3xl tb:rounded-3xl`} >
127
- {/* <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl bg-gradient-to-br from-green-500 to-green-900`} > */}
128
- {props.heroData.navTabs &&
135
+ <div className={`${(heroBgColorClass)} -mt-[81px] pt-[81px] transition ease-in-out duration-700 tb:mt-0 tb:pt-0 max-w-7xl rounded-b-3xl tb:rounded-3xl`} >
136
+ {/* <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl bg-gradient-to-br from-green-500 to-green-900`} > */}
137
+ {props.heroData.navTabs &&
129
138
 
130
- <div className='py-5 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
139
+ <div className='pt-5 pb-14 tb:px-10 db:p-20 tb:pt-[60px] tb:pb-20 tb-l:px-20 flex flex-col shadow rounded-2xl'>
131
140
 
132
- <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
133
- <div className={`${bgTabClass} bg-opacity-30 p-1 rounded-[32px]`}>
134
- <Tab
135
- onTabClick={handleTabClick}
136
- tabs={props.heroData.navTabs}
137
- bgColorTab={props.heroData.bgColorTab}
138
- pillColor={pillColorClass}
139
- />
140
- </div>
141
- </div>
142
- <div className='flex flex-col-reverse pt-6 px-8 tb:px-0 tb:flex tb:flex-row tb:items-center tb:pt-10 tb:justify-between'>
143
- <div className=' mt-3 db:max-w-[488px] tb:w-1/2'>
144
- {props.heroData.tabContent &&
145
- props.heroData.tabContent[currentTab] &&
146
- tabCard(props.heroData.tabContent[currentTab])}
147
- </div>
148
- <div className=' db:max-w-[540px] tb:w-1/2 '>
149
- <MediaBox
150
- video_url = {videoUrl}
151
- video_poster = {videoPoster}
152
-
153
- />
154
- </div>
141
+ <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
142
+ <div className={`${bgTabClass} bg-opacity-30 p-1 rounded-[32px]`}>
143
+ <Tab
144
+ onTabClick={handleTabClick}
145
+ tabs={props.heroData.navTabs}
146
+ bgColorTab={props.heroData.bgColorTab}
147
+ pillColor={pillColorClass}
148
+ initialTab={firstTab}
149
+ />
150
+ </div>
151
+ </div>
152
+ <div className='flex flex-col-reverse pt-6 px-8 tb:px-0 tb:flex tb:flex-row tb:pt-20 tb:justify-between min-h-[384px]'>
153
+ <div className=' mt-3 db:max-w-[535px] tb:w-1/2'>
154
+ {props.heroData.tabContent &&
155
+ props.heroData.tabContent[currentTab] &&
156
+ tabCard(props.heroData.tabContent[currentTab])}
157
+ </div>
158
+ <div className='grid items-center relative db:max-w-[500px] tb:w-1/2 transition-opacity duration-700 ease-linear '>
159
+ {
160
+ showVideo ? (
161
+ <video
162
+ id="hero_vid"
163
+ controls={false}
164
+ autoPlay
165
+ muted
166
+ playsInline
167
+ width="500"
168
+ height="500"
169
+ className="tb:w-full w-full rounded-3xl"
170
+ src={heroData.video_url}
171
+ >
172
+ </video>
173
+ ) : (
174
+ <div className="relative">
175
+ {
176
+ heroData.img_url && (
177
+ <img src={heroData.img_url} alt="Illustration" />
178
+ )
179
+ }
180
+ {
181
+ heroData.video_url && (
182
+ <div className="w-14 h-14 cursor-pointer video-play-btn before:bg-blue-700 after:bg-blue-700 rounded-full flex items-center justify-center bg-blue-700 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-neutral-1000 shadow-2xl"
183
+ onClick={() => setShowVideo(true)}
184
+ >
185
+ <Icon variant='play' height='h-6 w-6 ml-1' strokeClass='stroke-neutral-0' />
186
+ </div>
187
+ )
188
+ }
155
189
  </div>
190
+ )
191
+ }
156
192
 
157
- <div className=''>
158
- {props.heroData.tabContent[currentTab] &&
159
- LinkCardsFn(props.heroData.tabContent[currentTab])}
160
- </div>
161
- </div>
162
193
 
163
- }
164
194
 
165
- </div>
195
+
196
+ {/*
197
+ // (
198
+ // <div
199
+ // onClick={() => setShowVideo(true)}
200
+ // className='w-14 h-14 cursor-pointer video-play-btn before:bg-blue-700 after:bg-blue-700 rounded-full flex items-center absolute justify-center bg-blue-700 left-1/2 top-1/2 shadow-neutral-1000 shadow-2xl'>
201
+ // <Icon variant='play' height='h-6 w-6 ml-1' strokeClass='stroke-neutral-0' />
202
+ // </div>
203
+
204
+ // )} */}
205
+
206
+ </div>
207
+ </div>
208
+
209
+ <div className=''>
210
+ {props.heroData.tabContent[currentTab] &&
211
+ LinkCardsFn(props.heroData.tabContent[currentTab])}
212
+ </div>
213
+ </div>
214
+
215
+ }
216
+
217
+ </div>
166
218
  )
167
219
  }
168
220
 
package/src/HDS/modules/TextCard/textCard.js CHANGED
@@ -59,6 +59,11 @@ export default function TextCard(props) {
59
59
  }
60
60
  </div>
61
61
  )
62
+ }
63
+ {props.addiDescription && (
64
+ <Typography textStyle='body1' className='text-neutral-700'>{props.addiDescription}</Typography>
65
+ )
66
+
62
67
  }
63
68
  {
64
69
  props.feature_cards_links && (
@@ -131,7 +136,7 @@ export default function TextCard(props) {
131
136
  </div>
132
137
  )
133
138
  }
134
-
139
+
135
140
  {props.button &&
136
141
  <div className="flex gap-6 items-center">
137
142
  {props.button.map((btn, index) => (
package/src/HDS/modules/navCard/index.js CHANGED
@@ -1 +1,2 @@
1
- export {default as NavCard} from './navCard'
1
+ export {default as NavCard} from './navCard'
2
+ export { default as NavTabCard } from './navTabCard'
package/src/HDS/modules/navCard/navCard.js CHANGED
@@ -4,62 +4,100 @@ import { Typography } from '../../foundation/Typography';
4
4
  import { HDSButton } from '../../components/Buttons';
5
5
  import { HDSColor } from '../../foundation/ColorPalette';
6
6
  import { Tab } from '../../components/Tabs';
7
+ import { Icon } from '../../components/common-components/Icon'
7
8
  import PropTypes from 'prop-types';
8
9
 
9
- const tabCard = (tabContent) => (
10
- <>
11
- <div className=''>
12
- {tabContent.title && <Typography textStyle='h4' className={HDSColor(tabContent.title_color)}>{tabContent.title}</Typography>}
13
-
14
- {tabContent.subTitle && <Typography textStyle='body1c' className={HDSColor(tabContent.sub_title_color)}>{tabContent.subTitle}</Typography>}
15
- {tabContent.readMore_cta && <div className="flex">
16
- <HDSButton
17
- label={tabContent.readMore_cta}
18
- type='secondaryLink'
19
- leftIconVariant='none'
20
- rightIconVariant='none'
21
- state='default'
22
- size='sm'
23
- rightAnimatedArrow={true}
24
- rightAnimatedArrowColor='#3970FD'
25
- animatedHoverStroke='#3970FD'
26
- btnTextColorClass='text-blue-500'
27
- btnTextHoverClass=''
28
- className=' mt-4'
29
- />
30
- </div>}
31
-
32
- </div>
33
- {tabContent.btnLabel &&
34
- <div className='flex pl-3 pt-6 pb-8'>
35
- <HDSButton
36
- label={tabContent.btnLabel}
37
- type='secondaryLink'
38
- leftIconVariant='none'
39
- rightIconVariant='none'
40
- state='default'
41
- size='sm'
42
- rightAnimatedArrow={true}
43
- rightAnimatedArrowColor='#1E56E3'
44
- animatedHoverStroke='group-hover:stroke-blue-600'
45
- className='flex'
46
- btnTextColorClass='text-blue-600'
47
- />
48
- </div>
49
- }
50
- <div className='mt-8'>
51
- <MediaBox
52
- img_url={tabContent.img_url}
53
- video_url={tabContent.video_url}
54
- video_poster={tabContent.video_poster}
55
- />
56
- </div>
57
- </>
58
- )
59
10
 
60
11
  export default function NavCard(props) {
12
+ const [showVideo, setShowVideo] = useState(false);
13
+ const TabCard = (tabContent) => {
14
+
15
+ return (
16
+ <>
17
+ <div className=''>
18
+ {tabContent.title && <Typography textStyle='h4' className={HDSColor(tabContent.title_color)}>{tabContent.title}</Typography>}
19
+
20
+ {tabContent.subTitle && <Typography textStyle='body1c' className={HDSColor(tabContent.sub_title_color)}>{tabContent.subTitle}</Typography>}
21
+ {tabContent.readMore_cta && <div className="flex">
22
+ <a href={tabContent.readMore_cta_link ?? ''} >
23
+ <HDSButton
24
+ label={tabContent.readMore_cta}
25
+ type='secondaryLink'
26
+ leftIconVariant='none'
27
+ rightIconVariant='none'
28
+ state='default'
29
+ size='sm'
30
+ rightAnimatedArrow={true}
31
+ rightAnimatedArrowColor='#3970FD'
32
+ animatedHoverStroke='#3970FD'
33
+ btnTextColorClass='text-blue-500'
34
+ btnTextHoverClass=''
35
+ className=' mt-4'
36
+ />
37
+ </a>
38
+ </div>}
39
+
40
+ </div>
41
+ {tabContent.btnLabel &&
42
+ <div className='flex pl-3 pt-6 pb-8'>
43
+ <HDSButton
44
+ label={tabContent.btnLabel}
45
+ type='secondaryLink'
46
+ leftIconVariant='none'
47
+ rightIconVariant='none'
48
+ state='default'
49
+ size='sm'
50
+ rightAnimatedArrow={true}
51
+ rightAnimatedArrowColor='#1E56E3'
52
+ animatedHoverStroke='group-hover:stroke-blue-600'
53
+ className='flex'
54
+ btnTextColorClass='text-blue-600'
55
+ />
56
+ </div>
57
+ }
58
+ <div className='mt-8'>
59
+ {
60
+ showVideo ? (
61
+ <video
62
+ id="hero_vid"
63
+ controls={false}
64
+ autoPlay
65
+ muted
66
+ playsInline
67
+ width="500"
68
+ height="500"
69
+ className="tb:w-full w-full rounded-3xl"
70
+ src={tabContent.video_url}
71
+ >
72
+ </video>
73
+ ) : (
74
+ <div className="relative">
75
+ {
76
+ tabContent.img_url && (
77
+ <img src={tabContent.img_url} alt="Illustration" className=' rounded-2xl'/>
78
+ )
79
+ }
80
+ {
81
+ tabContent.video_url && (
82
+ <div className="w-14 h-14 cursor-pointer video-play-btn before:bg-blue-700 after:bg-blue-700 rounded-full flex items-center justify-center bg-blue-700 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-neutral-1000 shadow-2xl"
83
+ onClick={() => setShowVideo(true)}
84
+ >
85
+ <Icon variant='play' height='h-6 w-6 ml-1' strokeClass='stroke-neutral-0' />
86
+ </div>
87
+ )
88
+ }
89
+ </div>
90
+ )
91
+ }
92
+
93
+ </div>
94
+ </>
95
+ )
96
+ }
97
+
61
98
  const [activeTab, setActiveTab] = useState('');
62
99
 
100
+
63
101
  useEffect(() => {
64
102
  if (props.tabContent) {
65
103
  const tabNames = Object.keys(props.tabContent);
@@ -81,7 +119,7 @@ export default function NavCard(props) {
81
119
 
82
120
  <div className='max-w-[44.44rem] rounded-2xl'>
83
121
 
84
- <div className='flex pb-8'>
122
+ <div className='flex pb-8 overflow-scroll scrollbar-hide'>
85
123
  <Tab
86
124
  onTabClick={handleTabClick}
87
125
  tabs={props.navTabs}
@@ -92,7 +130,7 @@ export default function NavCard(props) {
92
130
  <div className=''>
93
131
  {props.tabContent &&
94
132
  props.tabContent[activeTab] &&
95
- tabCard(props.tabContent[activeTab])}
133
+ TabCard(props.tabContent[activeTab])}
96
134
  </div>
97
135
 
98
136
  </div>}