const bellIcon = ( <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path opacity="0.2" d="M19.5 18H4.50001C4.36874 17.9992 4.23997 17.964 4.12659 17.8978C4.0132 17.8317 3.91916 17.7369 3.85387 17.6231C3.78858 17.5092 3.75432 17.3801 3.75452 17.2489C3.75472 17.1176 3.78937 16.9887 3.85501 16.875C4.47282 15.8062 5.25001 13.8572 5.25001 10.5C5.25001 8.70979 5.96116 6.9929 7.22703 5.72703C8.4929 4.46116 10.2098 3.75 12 3.75C13.7902 3.75 15.5071 4.46116 16.773 5.72703C18.0388 6.9929 18.75 8.70979 18.75 10.5C18.75 13.8581 19.5281 15.8062 20.1469 16.875C20.2126 16.9888 20.2472 17.1179 20.2474 17.2493C20.2475 17.3808 20.2131 17.5099 20.1475 17.6239C20.082 17.7378 19.9877 17.8325 19.8741 17.8985C19.7604 17.9645 19.6314 17.9995 19.5 18Z" fill="#F7F6FE" /> <path d="M21 6.66565C20.8235 6.75707 20.6178 6.77465 20.4283 6.71453C20.2388 6.65441 20.0809 6.5215 19.9894 6.34502C19.2735 4.93079 18.1899 3.73549 16.8525 2.88471C16.7692 2.83214 16.697 2.76367 16.6401 2.6832C16.5832 2.60274 16.5427 2.51186 16.521 2.41575C16.4992 2.31964 16.4966 2.22019 16.5133 2.12307C16.5299 2.02594 16.5656 1.93306 16.6181 1.84971C16.6707 1.76636 16.7392 1.69418 16.8196 1.6373C16.9001 1.58041 16.991 1.53993 17.0871 1.51817C17.1832 1.4964 17.2827 1.49378 17.3798 1.51045C17.4769 1.52713 17.5698 1.56276 17.6531 1.61533C19.2118 2.61334 20.4775 4.00742 21.3206 5.65502C21.4121 5.83157 21.4296 6.0372 21.3695 6.2267C21.3094 6.41621 21.1765 6.57409 21 6.66565ZM3.34783 6.75002C3.48523 6.74996 3.61998 6.71216 3.73736 6.64074C3.85474 6.56932 3.95025 6.46702 4.01346 6.34502C4.72933 4.93079 5.81291 3.73549 7.15033 2.88471C7.31866 2.77854 7.43792 2.60985 7.48187 2.41575C7.52583 2.22165 7.49087 2.01804 7.38471 1.84971C7.27854 1.68138 7.10985 1.56212 6.91575 1.51817C6.72165 1.47421 6.51804 1.50916 6.34971 1.61533C4.79102 2.61334 3.52537 4.00742 2.68221 5.65502C2.62299 5.76932 2.59419 5.89694 2.59858 6.02559C2.60297 6.15424 2.6404 6.2796 2.70726 6.3896C2.77413 6.4996 2.86818 6.59053 2.98037 6.65366C3.09256 6.71678 3.2191 6.74997 3.34783 6.75002ZM20.7947 16.4944C20.9276 16.7222 20.998 16.9811 20.9989 17.2449C20.9998 17.5086 20.9312 17.768 20.7999 17.9967C20.6686 18.2255 20.4793 18.4156 20.251 18.5478C20.0228 18.6801 19.7638 18.7498 19.5 18.75H15.675C15.5029 19.5977 15.043 20.3599 14.3732 20.9073C13.7035 21.4547 12.865 21.7538 12 21.7538C11.135 21.7538 10.2966 21.4547 9.62682 20.9073C8.95707 20.3599 8.49715 19.5977 8.32502 18.75H4.50002C4.23641 18.7495 3.9776 18.6795 3.74965 18.5471C3.5217 18.4147 3.33266 18.2246 3.20158 17.9959C3.0705 17.7672 3.002 17.508 3.00299 17.2444C3.00398 16.9808 3.07441 16.7221 3.20721 16.4944C4.05189 15.0366 4.50002 12.9638 4.50002 10.5C4.50002 8.5109 5.29019 6.60324 6.69672 5.19672C8.10324 3.7902 10.0109 3.00002 12 3.00002C13.9891 3.00002 15.8968 3.7902 17.3033 5.19672C18.7098 6.60324 19.5 8.5109 19.5 10.5C19.5 12.9628 19.9481 15.0356 20.7947 16.4944ZM14.1206 18.75H9.87939C10.0348 19.1882 10.3221 19.5675 10.7018 19.8358C11.0816 20.104 11.5351 20.2481 12 20.2481C12.465 20.2481 12.9185 20.104 13.2982 19.8358C13.6779 19.5675 13.9653 19.1882 14.1206 18.75ZM19.5 17.25C18.5025 15.5372 18 13.2666 18 10.5C18 8.90872 17.3679 7.3826 16.2427 6.25738C15.1174 5.13216 13.5913 4.50002 12 4.50002C10.4087 4.50002 8.8826 5.13216 7.75738 6.25738C6.63216 7.3826 6.00002 8.90872 6.00002 10.5C6.00002 13.2675 5.49564 15.5381 4.50002 17.25H19.5Z" fill="#F7F6FE" /> </svg> ); const closeIcon = ( <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M16.0672 15.1828C16.1253 15.2409 16.1713 15.3098 16.2028 15.3857C16.2342 15.4615 16.2504 15.5429 16.2504 15.625C16.2504 15.7071 16.2342 15.7884 16.2028 15.8643C16.1713 15.9402 16.1253 16.0091 16.0672 16.0672C16.0091 16.1252 15.9402 16.1713 15.8643 16.2027C15.7885 16.2342 15.7071 16.2503 15.625 16.2503C15.5429 16.2503 15.4616 16.2342 15.3857 16.2027C15.3098 16.1713 15.2409 16.1252 15.1828 16.0672L10 10.8836L4.8172 16.0672C4.69992 16.1844 4.54086 16.2503 4.37501 16.2503C4.20916 16.2503 4.0501 16.1844 3.93282 16.0672C3.81555 15.9499 3.74966 15.7908 3.74966 15.625C3.74966 15.4591 3.81555 15.3001 3.93282 15.1828L9.11642 9.99998L3.93282 4.81717C3.81555 4.69989 3.74966 4.54083 3.74966 4.37498C3.74966 4.20913 3.81555 4.05007 3.93282 3.93279C4.0501 3.81552 4.20916 3.74963 4.37501 3.74963C4.54086 3.74963 4.69992 3.81552 4.8172 3.93279L10 9.11639L15.1828 3.93279C15.3001 3.81552 15.4592 3.74963 15.625 3.74963C15.7909 3.74963 15.9499 3.81552 16.0672 3.93279C16.1845 4.05007 16.2504 4.20913 16.2504 4.37498C16.2504 4.54083 16.1845 4.69989 16.0672 4.81717L10.8836 9.99998L16.0672 15.1828Z" fill="#F7F6FE" /> </svg> ); const Card = styled.div` display: flex; padding: 24px 16px; align-items: flex-start; align-self: stretch; border-radius: 6px; background: var(--violet-light-9, #8279E2); `; const Component = styled.div` display: flex; flex-direction: column; align-items: flex-start; gap: 24px; flex: 1 0 0; `; const Icon = styled.div` width: 24px; height: 24px; `; const Close = styled.div` flex-shrink: 0; width: 20px; height: 20px; `; const Text = styled.div` color: var(--white, #FFF); font: var(--text-base); font-weight: 600; `; const Buttons = styled.div` display: flex; align-items: flex-start; gap: 8px; `; return ( <Card> <Component> <Icon>{bellIcon}</Icon> <Text>Don't miss out on updates, turn on desktop notifications.</Text> <Buttons> <Widget src="near/widget/DIG.Button" props={{ href: "", label: "Turn on", variant: "primary", size: "default", }} /> <Widget src="near/widget/DIG.Button" props={{ href: "", label: "No thanks", variant: "secondary", size: "default", }} /> </Buttons> </Component> <Close>{closeIcon}</Close> </Card> );