-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSignatureCard.js
183 lines (170 loc) · 9.11 KB
/
SignatureCard.js
1
2
3
4
5
6
7
8
9
10
11
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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
98
99
100
101
102
103
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
const SocialCardData = {
name: props.name || "John Doe",
role: props.role || "Software Engineer",
nftImage: {
contractId: props.nftImage?.contractId || "thebullishbulls.near",
tokenId: props.nftImage?.tokenId || "20",
},
email: props.email || "[email protected]",
social: {
linkedin: props.social?.linkedin,
twitter: props.social?.twitter || "https://twitter.com/nearprotocol",
instagram: props.social?.instagram || "https://www.instagram.com/near_protocol",
phone: props.social?.phone,
},
};
State.init({ theme: null });
const cssFont = fetch(
"https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800"
).body;
if (!cssFont) return "";
if (!state.theme) {
State.update({
theme: styled.div`
${cssFont}
font-family: Manrope, sans-serif;
color: white;
.social-card {
width: 350px;
height: 230px;
padding: 16px;
border-radius: 12px;
background: linear-gradient(270deg, #5a58e5 17.37%, #66acf7 100%);
display: flex;
flex-direction: column;
justify-content: space-between;
}
p {
margin: 0;
font-size: 14px;
}
a {
color: white;
margin: 0;
padding: 0;
text-decoration: none;
}
.name {
font-weight: 800;
font-size: 20px;
margin: 0;
}
.role {
font-size: 14px;
margin: 0;
}
.profile-picture {
width: 60px;
height: 60px;
border-radius: 30px;
border: 2px solid #fff;
overflow: hidden;
margin-right: 12px;
}
.social-icon {
margin-top: 16px;
}
`,
});
}
const Theme = state.theme;
return (
<Theme>
<div class="social-card" >
<div class="d-flex align-items-center">
<div class="profile-picture">
<Widget
src="mob.near/widget/NftImage"
props={{
nft: {
contractId: SocialCardData.nftImage.contractId,
tokenId: SocialCardData.nftImage.tokenId,
},
style: { width: "100%", height: "100%" },
}}
/>
</div>
<div>
<p class="name">{SocialCardData.name}</p>
<p class="role">{SocialCardData.role}</p>
</div>
</div>
<div class="mt-4">
{SocialCardData.email && (
<div>
<p>Email</p>
<a href={`mailto: ${SocialCardData.email}`} class="fw-bold">
{SocialCardData.email}
</a>
</div>
)}
<div class="grid gap-8 social-icon">
{SocialCardData.social.linkedin && (
<a href={SocialCardData.social.linkedin}>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19 3C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19ZM18.5 18.5V13.2C18.5 12.3354 18.1565 11.5062 17.5452 10.8948C16.9338 10.2835 16.1046 9.94 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17C14.6813 12.17 15.0374 12.3175 15.2999 12.5801C15.5625 12.8426 15.71 13.1987 15.71 13.57V18.5H18.5ZM6.88 8.56C7.32556 8.56 7.75288 8.383 8.06794 8.06794C8.383 7.75288 8.56 7.32556 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19C6.43178 5.19 6.00193 5.36805 5.68499 5.68499C5.36805 6.00193 5.19 6.43178 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56ZM8.27 18.5V10.13H5.5V18.5H8.27Z"
fill="white"
/>
</svg>
</a>
)}
{SocialCardData.social.twitter && (
<a href={SocialCardData.social.twitter}>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.46 6C21.69 6.35 20.86 6.58 20 6.69C20.88 6.16 21.56 5.32 21.88 4.31C21.05 4.81 20.13 5.16 19.16 5.36C18.37 4.5 17.26 4 16 4C13.65 4 11.73 5.92 11.73 8.29C11.73 8.63 11.77 8.96 11.84 9.27C8.28 9.09 5.11 7.38 3 4.79C2.63 5.42 2.42 6.16 2.42 6.94C2.42 8.43 3.17 9.75 4.33 10.5C3.62 10.5 2.96 10.3 2.38 10V10.03C2.38 12.11 3.86 13.85 5.82 14.24C5.19073 14.4122 4.5301 14.4362 3.89 14.31C4.16161 15.1625 4.69354 15.9084 5.41102 16.4429C6.1285 16.9775 6.99545 17.2737 7.89 17.29C6.37363 18.4904 4.494 19.1393 2.56 19.13C2.22 19.13 1.88 19.11 1.54 19.07C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79C20.33 8.6 20.33 8.42 20.32 8.23C21.16 7.63 21.88 6.87 22.46 6Z"
fill="white"
/>
</svg>
</a>
)}
{SocialCardData.social.instagram && (
<a href={SocialCardData.social.instagram}>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.028 2.001C13.7577 1.9982 14.4875 2.00554 15.217 2.023L15.411 2.03C15.635 2.038 15.856 2.048 16.123 2.06C17.187 2.11 17.913 2.278 18.55 2.525C19.21 2.779 19.766 3.123 20.322 3.679C20.8304 4.17861 21.2238 4.78295 21.475 5.45C21.722 6.087 21.89 6.814 21.94 7.878C21.952 8.144 21.962 8.366 21.97 8.59L21.976 8.784C21.9938 9.51319 22.0014 10.2426 21.999 10.972L22 11.718V13.028C22.0025 13.7577 21.9948 14.4875 21.977 15.217L21.971 15.411C21.963 15.635 21.953 15.856 21.941 16.123C21.891 17.187 21.721 17.913 21.475 18.55C21.2246 19.2178 20.8311 19.8226 20.322 20.322C19.822 20.8303 19.2173 21.2238 18.55 21.475C17.913 21.722 17.187 21.89 16.123 21.94C15.856 21.952 15.635 21.962 15.411 21.97L15.217 21.976C14.4875 21.9938 13.7577 22.0014 13.028 21.999L12.282 22H10.973C10.2433 22.0025 9.51353 21.9948 8.784 21.977L8.59 21.971C8.35261 21.9624 8.11527 21.9524 7.878 21.941C6.814 21.891 6.088 21.721 5.45 21.475C4.78268 21.2243 4.17824 20.8308 3.679 20.322C3.17005 19.8223 2.77623 19.2176 2.525 18.55C2.278 17.913 2.11 17.187 2.06 16.123C2.04886 15.8857 2.03886 15.6484 2.03 15.411L2.025 15.217C2.00656 14.4875 1.99823 13.7577 2 13.028V10.972C1.99721 10.2426 2.00454 9.5132 2.022 8.784L2.029 8.59C2.037 8.366 2.047 8.144 2.059 7.878C2.109 6.813 2.277 6.088 2.524 5.45C2.77537 4.78262 3.16996 4.17845 3.68 3.68C4.1789 3.17075 4.78296 2.77657 5.45 2.525C6.088 2.278 6.813 2.11 7.878 2.06L8.59 2.03L8.784 2.025C9.51318 2.00657 10.2426 1.99824 10.972 2L13.028 2.001ZM12 7.001C11.3375 6.99163 10.6798 7.11403 10.065 7.36107C9.4502 7.60811 8.89065 7.97488 8.41885 8.44006C7.94704 8.90523 7.5724 9.45954 7.31669 10.0708C7.06097 10.682 6.92929 11.3379 6.92929 12.0005C6.92929 12.6631 7.06097 13.319 7.31669 13.9302C7.5724 14.5415 7.94704 15.0958 8.41885 15.5609C8.89065 16.0261 9.4502 16.3929 10.065 16.6399C10.6798 16.887 11.3375 17.0094 12 17C13.3261 17 14.5979 16.4732 15.5355 15.5355C16.4732 14.5979 17 13.3261 17 12C17 10.6739 16.4732 9.40215 15.5355 8.46447C14.5979 7.52679 13.3261 7.001 12 7.001ZM12 9.001C12.3985 8.99366 12.7945 9.0658 13.1648 9.21321C13.5351 9.36062 13.8723 9.58034 14.1568 9.85955C14.4412 10.1387 14.6672 10.4718 14.8214 10.8393C14.9757 11.2069 15.0552 11.6014 15.0553 12C15.0553 12.3986 14.976 12.7932 14.8218 13.1607C14.6677 13.5283 14.4418 13.8614 14.1575 14.1407C13.8731 14.42 13.536 14.6399 13.1657 14.7874C12.7955 14.9349 12.3995 15.0072 12.001 15C11.2054 15 10.4423 14.6839 9.87968 14.1213C9.31707 13.5587 9.001 12.7957 9.001 12C9.001 11.2044 9.31707 10.4413 9.87968 9.87868C10.4423 9.31607 11.2054 9 12.001 9L12 9.001ZM17.25 5.501C16.9274 5.51391 16.6223 5.65115 16.3986 5.88397C16.1749 6.11679 16.05 6.42714 16.05 6.75C16.05 7.07287 16.1749 7.38321 16.3986 7.61603C16.6223 7.84885 16.9274 7.98609 17.25 7.999C17.5815 7.999 17.8995 7.86731 18.1339 7.63288C18.3683 7.39846 18.5 7.08052 18.5 6.749C18.5 6.41748 18.3683 6.09954 18.1339 5.86512C17.8995 5.6307 17.5815 5.499 17.25 5.499V5.501Z"
fill="white"
/>
</svg>
</a>
)}
{SocialCardData.social.phone && (
<a href={`tel:${SocialCardData.social.phone}`}>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.62 10.79C8.06 13.62 10.38 15.93 13.21 17.38L15.41 15.18C15.68 14.91 16.08 14.82 16.43 14.94C17.55 15.31 18.76 15.51 20 15.51C20.55 15.51 21 15.96 21 16.51V20C21 20.55 20.55 21 20 21C10.61 21 3 13.39 3 4C3 3.45 3.45 3 4 3H7.5C8.05 3 8.5 3.45 8.5 4C8.5 5.25 8.7 6.45 9.07 7.57C9.18 7.92 9.1 8.31 8.82 8.59L6.62 10.79Z"
fill="white"
/>
</svg>
</a>
)}
</div>
</div>
</div>
</Theme>
);