hds-web 1.34.7 → 1.34.9
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.es.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/HDS/components/Cards/EventCards/eventschedule.js +158 -109
- package/src/HDS/components/Cards/TalkDetailCard/talkDetailCard.js +112 -98
- package/src/HDS/modules/Events/eventsAgenda.js +69 -44
- package/src/HDS/modules/TextCard/textIconCard.js +82 -52
package/package.json
CHANGED
|
@@ -1,120 +1,169 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { HDSColor } from
|
|
3
|
-
import { ProfileAvatar } from
|
|
4
|
-
import { Typography } from
|
|
5
|
-
import { HDSButton } from "../../Buttons";
|
|
2
|
+
import { HDSColor } from "../../../foundation/ColorPalette";
|
|
3
|
+
import { ProfileAvatar } from "../../Avatars";
|
|
4
|
+
import { Typography } from "../../../foundation/Typography";
|
|
5
|
+
// import { HDSButton } from "../../Buttons";
|
|
6
6
|
import { Badges } from "../../BadgesCaption";
|
|
7
7
|
import { Icon } from "../../common-components";
|
|
8
8
|
import ReactMarkdown from "react-markdown";
|
|
9
9
|
|
|
10
|
-
|
|
11
10
|
export default function EventScheduleCard(props) {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<Typography textStyle='sub2' className='text-neutral-700'>
|
|
30
|
-
{props.eventTime}
|
|
31
|
-
</Typography>
|
|
32
|
-
</div>}
|
|
33
|
-
{props.eventLocation && <div className="flex flex-col tb:px-6 py-4 tb:py-0 gap-1 ">
|
|
34
|
-
<div className="flex gap-2 items-center">
|
|
35
|
-
<Icon height='h-[18px] w-[18px]' variant='markerpin03' strokeClass='stroke-neutral-600 stroke-2' />
|
|
36
|
-
<Typography textStyle='h6' className='capitalize text-neutral-600' >WHERE</Typography>
|
|
37
|
-
</div>
|
|
38
|
-
<Typography textStyle='sub2' className='text-neutral-700'>
|
|
39
|
-
{props.eventLocation}
|
|
40
|
-
</Typography>
|
|
41
|
-
</div>}
|
|
42
|
-
{props.social && <div className="px-6 flex flex-wrap gap-4 items-center">
|
|
43
|
-
{props.social && props.social.twitter && <a href={props.social.twitter}>
|
|
44
|
-
<Icon variant='twitter' className='brightness-0 hover:brightness-100 cursor-pointer transition-all duration-300' />
|
|
45
|
-
</a>}
|
|
46
|
-
{props.social && props.social.linkedin && <a href={props.social.linkedin}>
|
|
47
|
-
<Icon variant='linkedin' className='brightness-0 hover:brightness-100 cursor-pointer transition-all duration-300' />
|
|
48
|
-
</a>}
|
|
49
|
-
{props.social && props.social.facebook && <a href={props.social.facebook}>
|
|
50
|
-
<Icon variant='facebookBlue' className='brightness-0 hover:brightness-100 cursor-pointer transition-all duration-300' />
|
|
51
|
-
</a>}
|
|
52
|
-
</div>}
|
|
11
|
+
const scheduleSection = () => (
|
|
12
|
+
<div className="flex tb:divide-x divide-y tb:divide-y-0 divide-neutral-200 pb-6 tb:flex-row flex-col">
|
|
13
|
+
{props.eventDate && (
|
|
14
|
+
<div className="flex flex-col tb:pr-6 pb-4 tb:pb-0 gap-1">
|
|
15
|
+
<div className="flex gap-2 items-center">
|
|
16
|
+
<Icon
|
|
17
|
+
height="h-[18px] w-[18px]"
|
|
18
|
+
variant="calendar"
|
|
19
|
+
strokeClass="stroke-neutral-600 stroke-2"
|
|
20
|
+
/>
|
|
21
|
+
<Typography textStyle="h6" className="capitalize text-neutral-600">
|
|
22
|
+
WHEN
|
|
23
|
+
</Typography>
|
|
24
|
+
</div>
|
|
25
|
+
<Typography textStyle="sub2" className="text-neutral-700">
|
|
26
|
+
{props.eventDate}
|
|
27
|
+
</Typography>
|
|
53
28
|
</div>
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
<div className="">
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
avatarVariant="circle"
|
|
63
|
-
avatarType="primary"
|
|
29
|
+
)}
|
|
30
|
+
{props.eventTime && (
|
|
31
|
+
<div className="flex flex-col tb:px-6 py-4 tb:py-0 gap-1">
|
|
32
|
+
<div className="flex gap-2 items-center">
|
|
33
|
+
<Icon
|
|
34
|
+
height="h-[18px] w-[18px]"
|
|
35
|
+
variant="clock"
|
|
36
|
+
strokeClass="stroke-neutral-600 stroke-2"
|
|
64
37
|
/>
|
|
38
|
+
<Typography textStyle="h6" className="capitalize text-neutral-600">
|
|
39
|
+
TIME
|
|
40
|
+
</Typography>
|
|
41
|
+
</div>
|
|
42
|
+
<Typography textStyle="sub2" className="text-neutral-700">
|
|
43
|
+
{props.eventTime}
|
|
44
|
+
</Typography>
|
|
65
45
|
</div>
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
46
|
+
)}
|
|
47
|
+
{props.eventLocation && (
|
|
48
|
+
<div className="flex flex-col tb:px-6 py-4 tb:py-0 gap-1 ">
|
|
49
|
+
<div className="flex gap-2 items-center">
|
|
50
|
+
<Icon
|
|
51
|
+
height="h-[18px] w-[18px]"
|
|
52
|
+
variant="markerpin03"
|
|
53
|
+
strokeClass="stroke-neutral-600 stroke-2"
|
|
54
|
+
/>
|
|
55
|
+
<Typography textStyle="h6" className="capitalize text-neutral-600">
|
|
56
|
+
WHERE
|
|
57
|
+
</Typography>
|
|
58
|
+
</div>
|
|
59
|
+
<Typography textStyle="sub2" className="text-neutral-700">
|
|
60
|
+
{props.eventLocation}
|
|
61
|
+
</Typography>
|
|
62
|
+
</div>
|
|
63
|
+
)}
|
|
64
|
+
{props.social && (
|
|
65
|
+
<div className="px-6 flex flex-wrap gap-4 items-center">
|
|
66
|
+
{props.social && props.social.twitter && (
|
|
67
|
+
<a href={props.social.twitter}>
|
|
68
|
+
<Icon
|
|
69
|
+
variant="twitter"
|
|
70
|
+
className="brightness-0 hover:brightness-100 cursor-pointer transition-all duration-300"
|
|
71
|
+
/>
|
|
72
|
+
</a>
|
|
73
|
+
)}
|
|
74
|
+
{props.social && props.social.linkedin && (
|
|
75
|
+
<a href={props.social.linkedin}>
|
|
76
|
+
<Icon
|
|
77
|
+
variant="linkedin"
|
|
78
|
+
className="brightness-0 hover:brightness-100 cursor-pointer transition-all duration-300"
|
|
79
|
+
/>
|
|
80
|
+
</a>
|
|
81
|
+
)}
|
|
82
|
+
{props.social && props.social.facebook && (
|
|
83
|
+
<a href={props.social.facebook}>
|
|
84
|
+
<Icon
|
|
85
|
+
variant="facebookBlue"
|
|
86
|
+
className="brightness-0 hover:brightness-100 cursor-pointer transition-all duration-300"
|
|
87
|
+
/>
|
|
88
|
+
</a>
|
|
89
|
+
)}
|
|
90
|
+
</div>
|
|
91
|
+
)}
|
|
92
|
+
</div>
|
|
93
|
+
);
|
|
94
|
+
const speakerSection = (speakerName, speakerDesignation, speakerImgUrl) => (
|
|
95
|
+
<div className="">
|
|
96
|
+
<ProfileAvatar
|
|
97
|
+
name={speakerName}
|
|
98
|
+
size="md"
|
|
99
|
+
designation={speakerDesignation}
|
|
100
|
+
imageUrl={speakerImgUrl}
|
|
101
|
+
avatarVariant="circle"
|
|
102
|
+
avatarType="primary"
|
|
103
|
+
/>
|
|
104
|
+
</div>
|
|
105
|
+
);
|
|
106
|
+
return (
|
|
107
|
+
<>
|
|
108
|
+
<div>
|
|
109
|
+
{props.eventBadge && (
|
|
110
|
+
<div className="pb-2">
|
|
111
|
+
<Badges
|
|
112
|
+
color={props.badgeColor ?? "green"}
|
|
113
|
+
children={props.eventBadge}
|
|
114
|
+
/>
|
|
115
|
+
</div>
|
|
116
|
+
)}
|
|
117
|
+
{props.title && (
|
|
118
|
+
<Typography
|
|
119
|
+
textStyle="h3"
|
|
120
|
+
as="h1"
|
|
121
|
+
className={HDSColor(props.titleTextColor) + " pb-6"}
|
|
122
|
+
>
|
|
123
|
+
{props.title}
|
|
124
|
+
</Typography>
|
|
125
|
+
)}
|
|
126
|
+
{(props.eventDate ||
|
|
127
|
+
props.eventTime ||
|
|
128
|
+
props.eventLocation ||
|
|
129
|
+
props.social) &&
|
|
130
|
+
scheduleSection(props)}
|
|
131
|
+
{props.subtitle && (
|
|
132
|
+
<Typography textStyle="h5" className="text-neutral-700 pb-2">
|
|
133
|
+
{props.subtitle}
|
|
134
|
+
</Typography>
|
|
135
|
+
)}
|
|
136
|
+
{props.description && (
|
|
137
|
+
<Typography
|
|
138
|
+
textStyle="sub2"
|
|
139
|
+
className="text-neutral-700 pb-6 [&>p]:pb-2 [&>p>img]:mt-4 [&>p>img]:max-w-[420px] [&>p>img]:w-full [&>p>img:nth-child(2)]:max-w-[140px] last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-1 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600 [&>p>a:hover]:text-blue-800 "
|
|
140
|
+
>
|
|
141
|
+
<ReactMarkdown
|
|
142
|
+
components={{
|
|
143
|
+
a: ({ node, ...props }) => (
|
|
144
|
+
<a target="_blank" rel="noopener noreferrer" {...props} />
|
|
145
|
+
),
|
|
146
|
+
}}
|
|
147
|
+
>
|
|
148
|
+
{props.description}
|
|
149
|
+
</ReactMarkdown>
|
|
150
|
+
</Typography>
|
|
151
|
+
)}
|
|
152
|
+
{props.speakers && (
|
|
153
|
+
<div className="pt-6 border-t border-neutral-200 gap-8 flex flex-wrap">
|
|
154
|
+
{props.speakers &&
|
|
155
|
+
props.speakers.map((value, index) => (
|
|
156
|
+
<div key={index}>
|
|
157
|
+
{speakerSection(
|
|
158
|
+
value.speakerName,
|
|
159
|
+
value.speakerDesignation,
|
|
160
|
+
value.speakerImgUrl
|
|
161
|
+
)}
|
|
75
162
|
</div>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
{props.title}
|
|
83
|
-
</Typography>}
|
|
84
|
-
{
|
|
85
|
-
(props.eventDate || props.eventTime || props.eventLocation || props.social)
|
|
86
|
-
&&
|
|
87
|
-
scheduleSection(props)
|
|
88
|
-
}
|
|
89
|
-
{props.subtitle &&
|
|
90
|
-
<Typography
|
|
91
|
-
textStyle='h5'
|
|
92
|
-
className='text-neutral-700 pb-2'>
|
|
93
|
-
{props.subtitle}
|
|
94
|
-
</Typography>}
|
|
95
|
-
{props.description &&
|
|
96
|
-
<Typography
|
|
97
|
-
textStyle='sub2'
|
|
98
|
-
className='text-neutral-700 pb-6 [&>p]:pb-2 [&>p>img]:mt-4 [&>p>img]:max-w-[420px] [&>p>img]:w-full [&>p>img:nth-child(2)]:max-w-[140px] last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-1 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600 [&>p>a:hover]:text-blue-800 '>
|
|
99
|
-
<ReactMarkdown>
|
|
100
|
-
{props.description}
|
|
101
|
-
</ReactMarkdown>
|
|
102
|
-
</Typography>}
|
|
103
|
-
{props.speakers &&
|
|
104
|
-
<div className="pt-6 border-t border-neutral-200 gap-8 flex flex-wrap">
|
|
105
|
-
{props.speakers && props.speakers.map((value, index) => (
|
|
106
|
-
<div key={index}>
|
|
107
|
-
{speakerSection(
|
|
108
|
-
value.speakerName,
|
|
109
|
-
value.speakerDesignation,
|
|
110
|
-
value.speakerImgUrl
|
|
111
|
-
)}
|
|
112
|
-
</div>
|
|
113
|
-
))}
|
|
114
|
-
|
|
115
|
-
</div>
|
|
116
|
-
}
|
|
117
|
-
</div>
|
|
118
|
-
</>
|
|
119
|
-
)
|
|
163
|
+
))}
|
|
164
|
+
</div>
|
|
165
|
+
)}
|
|
166
|
+
</div>
|
|
167
|
+
</>
|
|
168
|
+
);
|
|
120
169
|
}
|
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
import React, { useState, useEffect} from "react";
|
|
2
|
-
import PropTypes from
|
|
3
|
-
import { HDSColor } from
|
|
4
|
-
import { Icon } from "../../common-components/Icon"
|
|
5
|
-
import { Badges } from
|
|
6
|
-
import { ProfileAvatar } from
|
|
1
|
+
import React, { useState, useEffect } from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
import { HDSColor } from "../../../foundation/ColorPalette";
|
|
4
|
+
import { Icon } from "../../common-components/Icon";
|
|
5
|
+
import { Badges } from "../../BadgesCaption";
|
|
6
|
+
import { ProfileAvatar } from "../../Avatars";
|
|
7
7
|
import { Typography } from "../../../foundation/Typography";
|
|
8
8
|
import ReactMarkdown from "react-markdown";
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
import { HDSPaperForm } from "../../../helpers/Paperform"
|
|
12
|
-
|
|
10
|
+
import { HDSPaperForm } from "../../../helpers/Paperform";
|
|
13
11
|
|
|
14
12
|
export default function TalkDetailCard(props) {
|
|
15
13
|
const isBrowser = typeof window !== "undefined";
|
|
@@ -42,7 +40,7 @@ export default function TalkDetailCard(props) {
|
|
|
42
40
|
<div className="flex flex-row flex-wrap tb:gap-3 gap-2">
|
|
43
41
|
{props.badges &&
|
|
44
42
|
props.badges.map((value, index) => (
|
|
45
|
-
<div key={index} className=
|
|
43
|
+
<div key={index} className="flex whitespace-nowrap">
|
|
46
44
|
<Badges
|
|
47
45
|
size={value.size}
|
|
48
46
|
color={value.color}
|
|
@@ -50,102 +48,118 @@ export default function TalkDetailCard(props) {
|
|
|
50
48
|
leftIconColor={value.leftIconColor}
|
|
51
49
|
leftIconColorClass={HDSColor(value.leftIconColorClass)}
|
|
52
50
|
children={value.label}
|
|
53
|
-
|
|
54
51
|
/>
|
|
55
|
-
|
|
56
52
|
</div>
|
|
57
|
-
))
|
|
58
|
-
}
|
|
53
|
+
))}
|
|
59
54
|
</div>
|
|
60
|
-
{
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
55
|
+
{props.tag_line && (
|
|
56
|
+
<Typography
|
|
57
|
+
textStyle="h6"
|
|
58
|
+
className="text-blue-600 uppercase pt-4 pb-2"
|
|
59
|
+
>
|
|
60
|
+
{props.tag_line}
|
|
61
|
+
</Typography>
|
|
62
|
+
)}
|
|
63
|
+
{props.title && (
|
|
64
|
+
<Typography
|
|
65
|
+
textStyle="h3"
|
|
66
|
+
as="h3"
|
|
67
|
+
className="text-blue-900 pb-6 db:pb-0"
|
|
68
|
+
>
|
|
69
|
+
{props.title}
|
|
70
|
+
</Typography>
|
|
71
|
+
)}
|
|
72
|
+
{props.social_share && (
|
|
73
|
+
<div className="flex pb-6 tb:pt-0 tb:pb-0 items-center ">
|
|
74
|
+
{props.social_share.map((socialShare, i) => (
|
|
75
|
+
<a
|
|
76
|
+
key={i}
|
|
77
|
+
href={socialShare.share_url}
|
|
78
|
+
className="mx-2 first:ml-0 last:mr-0"
|
|
79
|
+
>
|
|
80
|
+
<img src={socialShare.img_url} alt={socialShare.img_alt} />
|
|
81
|
+
</a>
|
|
82
|
+
))}
|
|
83
|
+
</div>
|
|
84
|
+
)}
|
|
85
|
+
{props.speaker_card && (
|
|
86
|
+
<div className="border-t border-neutral-200 border-b pb-6 tb:border-0 tb:pb-0">
|
|
87
|
+
<Typography
|
|
88
|
+
textStyle="h6"
|
|
89
|
+
as="h6"
|
|
90
|
+
className="uppercase text-neutral-500 pb-6 pt-6 tb:pt-14"
|
|
91
|
+
>
|
|
92
|
+
speakers
|
|
93
|
+
</Typography>
|
|
98
94
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
95
|
+
{props.speaker_card.map((speaker, i) => (
|
|
96
|
+
<div key={i} className="pb-4 last:pb-0">
|
|
97
|
+
<ProfileAvatar
|
|
98
|
+
name={speaker.name}
|
|
99
|
+
size="md"
|
|
100
|
+
designation={speaker.designation}
|
|
101
|
+
imageUrl={speaker.imageUrl}
|
|
102
|
+
avatarVariant="circle"
|
|
103
|
+
avatarBgColor={props.avatarBgColor}
|
|
104
|
+
/>
|
|
105
|
+
</div>
|
|
106
|
+
))}
|
|
107
|
+
</div>
|
|
108
|
+
)}
|
|
102
109
|
</div>
|
|
103
110
|
<div>
|
|
104
|
-
{
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
111
|
+
{props.videoUrl && (
|
|
112
|
+
<div className="pb-6">
|
|
113
|
+
{isConsentForm ? (
|
|
114
|
+
<>
|
|
115
|
+
<div className="relative pb-[56.2%]">
|
|
116
|
+
<iframe
|
|
117
|
+
loading="lazy"
|
|
118
|
+
title={props.title}
|
|
119
|
+
src={props.videoUrl}
|
|
120
|
+
frameBorder="0"
|
|
121
|
+
allowFullScreen
|
|
122
|
+
className="absolute w-full h-full"
|
|
123
|
+
/>
|
|
124
|
+
</div>
|
|
125
|
+
</>
|
|
126
|
+
) : (
|
|
127
|
+
<div className="p-5 md:pt-10 md:px-6 lg:px-9 rounded-3xl border border-neutral-200">
|
|
128
|
+
<Typography
|
|
129
|
+
textStyle="h6"
|
|
130
|
+
as="h6"
|
|
131
|
+
className="text-neutral-800 uppercase flex items-center"
|
|
132
|
+
>
|
|
133
|
+
<Icon
|
|
134
|
+
height="w-6 h-6 mr-3 stroke-neutral-800 stroke-[1.5px]"
|
|
135
|
+
variant="ticket01"
|
|
136
|
+
strokeColor="#1F2A37"
|
|
137
|
+
/>
|
|
138
|
+
{props.formTitle}
|
|
139
|
+
</Typography>
|
|
140
|
+
<HDSPaperForm
|
|
141
|
+
onSubmitCB={onSubmitCB}
|
|
142
|
+
formId={props.paperformId}
|
|
143
|
+
styleClass="paper-form-wrapper"
|
|
144
|
+
/>
|
|
145
|
+
</div>
|
|
146
|
+
)}
|
|
147
|
+
</div>
|
|
148
|
+
)}
|
|
149
|
+
<Typography textStyle="h4" as="h4" className="text-neutral-800 pb-4">
|
|
150
|
+
About the Talk
|
|
151
|
+
</Typography>
|
|
152
|
+
{props.description && (
|
|
153
|
+
<Typography
|
|
154
|
+
className="text-neutral-800 [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0"
|
|
155
|
+
textStyle="body1"
|
|
156
|
+
>
|
|
157
|
+
<ReactMarkdown>{props.description}</ReactMarkdown>
|
|
158
|
+
</Typography>
|
|
159
|
+
)}
|
|
146
160
|
</div>
|
|
147
161
|
</div>
|
|
148
|
-
)
|
|
162
|
+
);
|
|
149
163
|
}
|
|
150
164
|
|
|
151
165
|
TalkDetailCard.defaultProps = {
|
|
@@ -1,56 +1,81 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import ReactMarkdown from "react-markdown";
|
|
3
|
+
|
|
2
4
|
import { Typography } from "../../foundation/Typography";
|
|
3
5
|
// import { HDSColor } from "../../foundation/ColorPalette";
|
|
4
|
-
import { Icon } from
|
|
5
|
-
import ReactMarkdown from "react-markdown";
|
|
6
|
+
import { Icon } from "../../components/common-components/Icon";
|
|
6
7
|
|
|
7
8
|
export default function EventAgenda(props) {
|
|
8
9
|
// const titleColor = HDSColor(props.title_color);
|
|
9
10
|
|
|
10
11
|
return (
|
|
11
12
|
<>
|
|
12
|
-
{
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
{
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
13
|
+
{props.tagline && (
|
|
14
|
+
<Typography
|
|
15
|
+
textStyle="body1-medium"
|
|
16
|
+
className="flex items-center text-neutral-700 pb-4"
|
|
17
|
+
>
|
|
18
|
+
{props.tagIcon && (
|
|
19
|
+
<Icon
|
|
20
|
+
height={"h-6 w-6 stroke-[1.5px] mr-2"}
|
|
21
|
+
variant={props.tagIcon}
|
|
22
|
+
strokeClass="stroke-neutral-700"
|
|
23
|
+
/>
|
|
24
|
+
)}
|
|
25
|
+
{props.tagline}
|
|
26
|
+
</Typography>
|
|
27
|
+
)}
|
|
28
|
+
{props.agendaTitle && (
|
|
29
|
+
<Typography textStyle="h3" as="h3" className="text-neutral-1000 pb-4">
|
|
30
|
+
{props.agendaTitle}
|
|
31
|
+
</Typography>
|
|
32
|
+
)}
|
|
33
|
+
{props.agendaList &&
|
|
34
|
+
props.agendaList.map((list, index) => (
|
|
35
|
+
<div key={index} className={index === 0 ? "" : "pt-4"}>
|
|
36
|
+
{list.title && (
|
|
37
|
+
<Typography
|
|
38
|
+
textStyle="h5"
|
|
39
|
+
as="h5"
|
|
40
|
+
className="text-neutral-700 pb-1"
|
|
41
|
+
>
|
|
42
|
+
{list.title}
|
|
43
|
+
</Typography>
|
|
44
|
+
)}
|
|
45
|
+
{list.description && (
|
|
46
|
+
<Typography
|
|
47
|
+
textStyle="body1"
|
|
48
|
+
className="text-neutral-700 [&>p]:pb-1 [&>p>img]:mt-4 [&>p>img]:max-w-[420px] [&>p>img]:w-full [&>p>img:nth-child(2)]:max-w-[140px] last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-1 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600 [&>p>a:hover]:text-blue-800"
|
|
49
|
+
>
|
|
50
|
+
<ReactMarkdown
|
|
51
|
+
components={{
|
|
52
|
+
a: ({ node, ...props }) => (
|
|
53
|
+
<a target="_blank" rel="noopener noreferrer" {...props} />
|
|
54
|
+
),
|
|
55
|
+
}}
|
|
56
|
+
>
|
|
57
|
+
{list.description}
|
|
58
|
+
</ReactMarkdown>
|
|
59
|
+
</Typography>
|
|
60
|
+
)}
|
|
44
61
|
</div>
|
|
45
|
-
))
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
62
|
+
))}
|
|
63
|
+
{props.closingNotes && (
|
|
64
|
+
<Typography
|
|
65
|
+
textStyle="body1"
|
|
66
|
+
className="text-neutral-700 pt-4 [&>p]:pb-4 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-1 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600 [&>p>a:hover]:text-blue-800"
|
|
67
|
+
>
|
|
68
|
+
<ReactMarkdown
|
|
69
|
+
components={{
|
|
70
|
+
a: ({ node, ...props }) => (
|
|
71
|
+
<a target="_blank" rel="noopener noreferrer" {...props} />
|
|
72
|
+
),
|
|
73
|
+
}}
|
|
74
|
+
>
|
|
75
|
+
{props.closingNotes}
|
|
76
|
+
</ReactMarkdown>
|
|
77
|
+
</Typography>
|
|
78
|
+
)}
|
|
54
79
|
</>
|
|
55
|
-
)
|
|
80
|
+
);
|
|
56
81
|
}
|