Update recent items UI and add to new home page (#1275)
* Update recent items UI and add to new home page * Update text and links for different APIs * Update home page text and carousel images
This commit is contained in:
victor-meng
GitHub
parent
c2f3471afe
commit
dc83bf6fa0
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
|
|
@ -1,16 +0,0 @@
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M13.3328 13.6532C13.3454 13.8483 13.3149 14.0438 13.2435 14.2259C13.172 14.4079 13.0614 14.572 12.9195 14.7065C12.5895 14.9979 12.1721 15.1714 11.7328 15.1998V15.9998H11.1462V15.1732C10.6342 15.1699 10.1307 15.0418 9.67951 14.7998V13.7198C9.88302 13.865 10.108 13.9775 10.3462 14.0532C10.6041 14.1483 10.8728 14.211 11.1462 14.2398V12.8532C10.6948 12.7095 10.2805 12.4683 9.93285 12.1465C9.68588 11.8542 9.55715 11.4801 9.57195 11.0977C9.58675 10.7153 9.74402 10.3522 10.0128 10.0798C10.3224 9.7875 10.7219 9.60886 11.1462 9.57318V8.83984H11.7195V9.55984C12.1428 9.55959 12.5612 9.65055 12.9462 9.82651V10.8932C12.5717 10.6689 12.1533 10.528 11.7195 10.4798V11.9998C12.1784 12.1422 12.5982 12.3886 12.9462 12.7198C13.1925 12.9682 13.3314 13.3034 13.3328 13.6532ZM11.1462 11.7465V10.5065C11.0094 10.52 10.8832 10.5858 10.7938 10.6902C10.7043 10.7945 10.6586 10.9293 10.6662 11.0665C10.6662 11.3465 10.8395 11.5732 11.1995 11.7465H11.1462ZM12.2795 13.7065C12.2795 13.4532 12.0928 13.2532 11.7195 13.0798V14.2798C12.0928 14.2132 12.2795 14.0265 12.2795 13.7065Z" fill="#258277"/>
|
|
||||||
<path d="M22.0531 12.6532H17.2531C17.2522 13.4842 17.076 14.3056 16.7359 15.0638C16.3959 15.822 15.8997 16.4999 15.2798 17.0532L18.4665 20.6399C19.597 19.6367 20.5014 18.4046 21.1197 17.0254C21.738 15.6462 22.0562 14.1514 22.0531 12.6399" fill="#FFCA00"/>
|
|
||||||
<path d="M11.3595 18.573C9.79299 18.573 8.29061 17.9507 7.18289 16.843C6.07518 15.7353 5.45287 14.2329 5.45287 12.6663C5.45287 11.0998 6.07518 9.5974 7.18289 8.48968C8.29061 7.38197 9.79299 6.75966 11.3595 6.75966V1.98633C8.53056 1.98633 5.81745 3.11013 3.81707 5.11052C1.81668 7.11091 0.692871 9.82402 0.692871 12.653C0.692871 15.482 1.81668 18.1951 3.81707 20.1955C5.81745 22.1959 8.53056 23.3197 11.3595 23.3197C13.9799 23.3355 16.5143 22.3863 18.4795 20.653L15.2795 17.0663C14.2049 18.0372 12.8078 18.5742 11.3595 18.573Z" fill="url(#paint0_radial_669_8617)"/>
|
|
||||||
<path d="M10.8662 0.6399V6.18657C11.7766 6.17211 12.6805 6.34098 13.5243 6.68313C14.368 7.02527 15.1343 7.53369 15.7775 8.17812C16.4207 8.82254 16.9276 9.5898 17.2681 10.4342C17.6086 11.2786 17.7758 12.1829 17.7595 13.0932H23.3329C23.3329 11.4567 23.0103 9.83624 22.3836 8.32447C21.757 6.81269 20.8385 5.43925 19.6807 4.28268C18.5229 3.12611 17.1484 2.20908 15.636 1.58402C14.1235 0.95897 12.5027 0.638148 10.8662 0.6399Z" fill="#CCCCCC"/>
|
|
||||||
<path d="M17.7862 13.0934C17.804 11.2839 17.104 9.54104 15.8395 8.24653C14.575 6.95203 12.849 6.21137 11.0395 6.18677H10.8662L11.3062 7.01343C12.7784 7.09978 14.1672 7.72528 15.2075 8.77052C16.2479 9.81576 16.8668 11.2075 16.9462 12.6801L17.7862 13.0934Z" fill="#999999"/>
|
|
||||||
<defs>
|
|
||||||
<radialGradient id="paint0_radial_669_8617" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.57287 12.6663) scale(9.84)">
|
|
||||||
<stop stop-color="#76BC2D"/>
|
|
||||||
<stop offset="0.41" stop-color="#74B92C"/>
|
|
||||||
<stop offset="0.66" stop-color="#6FB12A"/>
|
|
||||||
<stop offset="0.88" stop-color="#66A227"/>
|
|
||||||
<stop offset="1" stop-color="#5E9624"/>
|
|
||||||
</radialGradient>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 3.0 KiB |
|
|
@ -1,4 +0,0 @@
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#57A300"/>
|
|
||||||
<path d="M5.32942 12.4366C5.21842 12.3181 5.16142 12.1621 5.16742 12.0001C5.17342 11.8366 5.24242 11.6866 5.36242 11.5741L6.61492 10.4161C6.72892 10.3126 6.87442 10.2556 7.02592 10.2556C7.19392 10.2556 7.35592 10.3261 7.46992 10.4491L10.6739 13.8871L16.3844 6.57461C16.4999 6.42611 16.6739 6.33911 16.8629 6.33911C16.9979 6.33911 17.1254 6.38261 17.2334 6.46511L18.5924 7.51361C18.8519 7.70561 18.9074 8.07911 18.7124 8.34461L11.4104 17.6941C11.1269 18.0571 10.5854 18.0811 10.2704 17.7436L5.32942 12.4366Z" fill="white"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 767 B |
|
|
@ -1,28 +1,23 @@
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="32" height="36" viewBox="0 0 32 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<g clip-path="url(#clip0_669_8707)">
|
<path d="M30.1809 0H5.6045C5.45725 -2.06304e-07 5.31144 0.0290347 5.17541 0.0854435C5.03939 0.141852 4.91583 0.224528 4.81179 0.32874C4.70775 0.432952 4.62528 0.556655 4.5691 0.692771C4.51292 0.828887 4.48413 0.974745 4.48438 1.122V31.7149C4.48438 32.0121 4.60234 32.2972 4.81236 32.5075C5.02238 32.7178 5.30729 32.8361 5.6045 32.8365H30.1809C30.4781 32.8362 30.7631 32.7179 30.9731 32.5076C31.1832 32.2972 31.3011 32.0121 31.301 31.7149V1.122C31.301 0.824752 31.1831 0.53965 30.973 0.329288C30.763 0.118926 30.4781 0.000496739 30.1809 0V0Z" fill="url(#paint0_linear_1311_8669)"/>
|
||||||
<path d="M20.7873 0H4.403C4.30483 -1.37536e-07 4.20762 0.0193565 4.11694 0.0569623C4.02626 0.0945681 3.94389 0.149685 3.87453 0.21916C3.80517 0.288634 3.75019 0.371103 3.71273 0.461847C3.67528 0.552592 3.65609 0.64983 3.65625 0.748V21.1432C3.65625 21.3414 3.73489 21.5314 3.87491 21.6716C4.01492 21.8118 4.20486 21.8907 4.403 21.891H20.7873C20.9854 21.8908 21.1754 21.8119 21.3154 21.6717C21.4554 21.5315 21.5341 21.3414 21.534 21.1432V0.748C21.534 0.549834 21.4554 0.359767 21.3154 0.219526C21.1754 0.0792842 20.9854 0.000331159 20.7873 0V0Z" fill="url(#paint0_linear_669_8707)"/>
|
<path d="M16.1495 3.22485H2.17401C1.8837 3.22485 1.60528 3.34018 1.39999 3.54546C1.19471 3.75074 1.07939 4.02917 1.07939 4.31948V34.465C1.07815 34.6087 1.10524 34.7513 1.15912 34.8845C1.21299 35.0178 1.2926 35.1391 1.39338 35.2416C1.49416 35.3441 1.61414 35.4257 1.74648 35.4818C1.87881 35.5379 2.0209 35.5674 2.16464 35.5686H26.3926C26.6829 35.5686 26.9614 35.4533 27.1667 35.248C27.3719 35.0427 27.4873 34.7643 27.4873 34.474V14.5202C27.4874 14.3764 27.4591 14.234 27.4042 14.1011C27.3492 13.9682 27.2686 13.8475 27.1669 13.7457C27.0653 13.644 26.9446 13.5633 26.8117 13.5082C26.6788 13.4532 26.5364 13.4249 26.3926 13.4249H18.3549C18.0642 13.422 17.7865 13.3045 17.5819 13.098C17.3774 12.8915 17.2626 12.6126 17.2625 12.322V4.33185C17.2628 4.03998 17.1477 3.75982 16.9423 3.55245C16.7369 3.34508 16.4579 3.22733 16.166 3.22485H16.1495Z" fill="white"/>
|
||||||
<path d="M11.433 2.1499H2.11601C1.92247 2.1499 1.73685 2.22679 1.6 2.36364C1.46314 2.5005 1.38626 2.68611 1.38626 2.87965V22.9767C1.38543 23.0725 1.4035 23.1675 1.43941 23.2564C1.47533 23.3452 1.5284 23.4261 1.59558 23.4944C1.66277 23.5627 1.74276 23.6172 1.83098 23.6546C1.91921 23.692 2.01394 23.7116 2.10976 23.7124H18.2618C18.4553 23.7124 18.6409 23.6355 18.7778 23.4987C18.9146 23.3618 18.9915 23.1762 18.9915 22.9827V9.68015C18.9916 9.58428 18.9727 9.48933 18.9361 9.40074C18.8995 9.31214 18.8457 9.23163 18.7779 9.16382C18.7102 9.096 18.6297 9.0422 18.5411 9.0055C18.4526 8.96879 18.3576 8.9499 18.2618 8.9499H12.9033C12.7095 8.94799 12.5243 8.86969 12.3879 8.73202C12.2516 8.59435 12.1751 8.40843 12.175 8.21465V2.8879C12.1752 2.69332 12.0985 2.50655 11.9616 2.3683C11.8246 2.23006 11.6386 2.15155 11.444 2.1499H11.433Z" fill="white"/>
|
<path d="M16.175 3.16357H1.99513C1.69791 3.16397 1.41301 3.28232 1.20299 3.49262C0.992965 3.70292 0.875 3.98799 0.875 4.2852V34.8781C0.875 35.1753 0.992953 35.4604 1.20296 35.6708C1.41297 35.8812 1.69788 35.9996 1.99513 36.0001H26.5715C26.8687 35.9996 27.1537 35.8812 27.3637 35.6708C27.5737 35.4604 27.6916 35.1753 27.6916 34.8781V14.6307C27.6916 14.3336 27.5736 14.0487 27.3635 13.8387C27.1535 13.6286 26.8686 13.5106 26.5715 13.5106H18.4134C18.1163 13.5106 17.8314 13.3926 17.6213 13.1825C17.4113 12.9724 17.2933 12.6875 17.2933 12.3905V4.2852C17.2924 3.98858 17.1744 3.70432 16.9649 3.49426C16.7555 3.2842 16.4716 3.16535 16.175 3.16357Z" fill="url(#paint1_linear_1311_8669)"/>
|
||||||
<path d="M11.45 2.10889H1.99675C1.79861 2.10915 1.60867 2.18805 1.46866 2.32825C1.32864 2.46845 1.25 2.65849 1.25 2.85664V23.2519C1.25 23.4501 1.32864 23.6401 1.46864 23.7804C1.60865 23.9206 1.79858 23.9996 1.99675 23.9999H18.381C18.5792 23.9996 18.7691 23.9206 18.9091 23.7804C19.0491 23.6401 19.1278 23.4501 19.1278 23.2519V9.75364C19.1278 9.55559 19.0491 9.36565 18.909 9.22561C18.769 9.08556 18.5791 9.00689 18.381 9.00689H12.9423C12.7442 9.00689 12.5543 8.92821 12.4142 8.78817C12.2742 8.64813 12.1955 8.45819 12.1955 8.26014V8.26014V2.85664C12.1949 2.65889 12.1162 2.46938 11.9766 2.32934C11.837 2.1893 11.6477 2.11007 11.45 2.10889Z" fill="url(#paint1_linear_669_8707)"/>
|
<path d="M27.2629 13.7335L16.9065 3.4082V11.8213C16.9035 12.3253 17.1007 12.8097 17.4548 13.1684C17.8088 13.527 18.2907 13.7304 18.7947 13.7338L27.2629 13.7335Z" fill="#83B9F9"/>
|
||||||
<path d="M18.8418 9.15547L11.9375 2.27197V7.88072C11.9355 8.21667 12.067 8.53967 12.303 8.77874C12.539 9.01782 12.8603 9.15341 13.1963 9.15572L18.8418 9.15547Z" fill="#83B9F9"/>
|
<path d="M17.744 16.4092H4.76108C4.47196 16.4092 4.23608 16.5543 4.23608 16.7332V17.5323C4.23608 17.7112 4.47046 17.8559 4.76108 17.8559H17.744C18.0331 17.8559 18.269 17.7112 18.269 17.5323V16.7332C18.2675 16.5543 18.0331 16.4092 17.744 16.4092Z" fill="#83B9F9"/>
|
||||||
<path d="M12.496 10.9395H3.84072C3.64797 10.9395 3.49072 11.0362 3.49072 11.1555V11.6882C3.49072 11.8075 3.64697 11.904 3.84072 11.904H12.496C12.6887 11.904 12.846 11.8075 12.846 11.6882V11.1555C12.845 11.0362 12.6887 10.9395 12.496 10.9395Z" fill="#83B9F9"/>
|
<path d="M17.744 20.7498H4.76108C4.47196 20.7498 4.23608 20.8945 4.23608 21.0734V21.8725C4.23608 22.0514 4.47046 22.1965 4.76108 22.1965H17.744C18.0331 22.1965 18.269 22.0514 18.269 21.8725V21.0749C18.2675 20.8945 18.0331 20.7498 17.744 20.7498Z" fill="#83B9F9"/>
|
||||||
<path d="M12.496 13.8333H3.84072C3.64797 13.8333 3.49072 13.9298 3.49072 14.049V14.5818C3.49072 14.701 3.64697 14.7978 3.84072 14.7978H12.496C12.6887 14.7978 12.846 14.701 12.846 14.5818V14.05C12.845 13.9298 12.6887 13.8333 12.496 13.8333Z" fill="#83B9F9"/>
|
<path d="M17.744 25.0906H4.76108C4.47196 25.0906 4.23608 25.2353 4.23608 25.4142V26.2126C4.23608 26.3915 4.47046 26.5366 4.76108 26.5366H17.744C18.0331 26.5366 18.269 26.3915 18.269 26.2126V25.4142C18.2675 25.2353 18.0331 25.0906 17.744 25.0906Z" fill="#83B9F9"/>
|
||||||
<path d="M12.496 16.7271H3.84072C3.64797 16.7271 3.49072 16.8236 3.49072 16.9428V17.4751C3.49072 17.5943 3.64697 17.6911 3.84072 17.6911H12.496C12.6887 17.6911 12.846 17.5943 12.846 17.4751V16.9428C12.845 16.8236 12.6887 16.7271 12.496 16.7271Z" fill="#83B9F9"/>
|
<path d="M12.4729 29.4312H4.90167C4.53492 29.4312 4.23755 29.5759 4.23755 29.7548V30.5539C4.23755 30.7328 4.53492 30.8779 4.90167 30.8779H12.4729C12.8397 30.8779 13.137 30.7328 13.137 30.5539V29.7548C13.1374 29.5759 12.8397 29.4312 12.4729 29.4312Z" fill="#83B9F9"/>
|
||||||
<path d="M8.98195 19.6208H3.93445C3.68995 19.6208 3.4917 19.7173 3.4917 19.8366V20.3693C3.4917 20.4886 3.68995 20.5854 3.93445 20.5854H8.98195C9.22645 20.5854 9.4247 20.4886 9.4247 20.3693V19.8366C9.42495 19.7173 9.22645 19.6208 8.98195 19.6208Z" fill="#83B9F9"/>
|
|
||||||
</g>
|
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="paint0_linear_669_8707" x1="12.595" y1="1.4615" x2="12.595" y2="23.415" gradientUnits="userSpaceOnUse">
|
<linearGradient id="paint0_linear_1311_8669" x1="17.8925" y1="2.19225" x2="17.8925" y2="35.1225" gradientUnits="userSpaceOnUse">
|
||||||
<stop stop-color="#DCDCDC"/>
|
<stop stop-color="#DCDCDC"/>
|
||||||
<stop offset="1" stop-color="#AAAAAA"/>
|
<stop offset="1" stop-color="#AAAAAA"/>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient id="paint1_linear_669_8707" x1="10.1888" y1="3.57039" x2="10.1888" y2="25.5236" gradientUnits="userSpaceOnUse">
|
<linearGradient id="paint1_linear_1311_8669" x1="14.2831" y1="5.35582" x2="14.2831" y2="38.2857" gradientUnits="userSpaceOnUse">
|
||||||
<stop stop-color="#0078D7"/>
|
<stop stop-color="#0078D7"/>
|
||||||
<stop offset="0.327" stop-color="#0076D4"/>
|
<stop offset="0.327" stop-color="#0076D4"/>
|
||||||
<stop offset="0.576" stop-color="#0071CA"/>
|
<stop offset="0.576" stop-color="#0071CA"/>
|
||||||
<stop offset="0.799" stop-color="#0068BA"/>
|
<stop offset="0.799" stop-color="#0068BA"/>
|
||||||
<stop offset="1" stop-color="#005BA4"/>
|
<stop offset="1" stop-color="#005BA4"/>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<clipPath id="clip0_669_8707">
|
|
||||||
<rect width="24" height="24" fill="white"/>
|
|
||||||
</clipPath>
|
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 3.9 KiB |
|
|
@ -1,8 +0,0 @@
|
||||||
<svg width="480" height="181" viewBox="0 0 480 181" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<rect width="480" height="180" fill="#EFF6FC"/>
|
|
||||||
<path d="M225.592 95H224.607V86.5977H225.592V95ZM236.197 95H235.236V91.5547C235.236 90.8906 235.133 90.4102 234.926 90.1133C234.723 89.8164 234.379 89.668 233.895 89.668C233.484 89.668 233.135 89.8555 232.846 90.2305C232.561 90.6055 232.418 91.0547 232.418 91.5781V95H231.457V91.4375C231.457 90.2578 231.002 89.668 230.092 89.668C229.67 89.668 229.322 89.8457 229.049 90.2012C228.775 90.5527 228.639 91.0117 228.639 91.5781V95H227.678V89H228.639V89.9492H228.662C229.088 89.2227 229.709 88.8594 230.525 88.8594C230.936 88.8594 231.293 88.9746 231.598 89.2051C231.902 89.4316 232.111 89.7305 232.225 90.1016C232.67 89.2734 233.334 88.8594 234.217 88.8594C235.537 88.8594 236.197 89.6738 236.197 91.3027V95ZM242.309 95H241.348V94.0625H241.324C240.906 94.7812 240.291 95.1406 239.479 95.1406C238.881 95.1406 238.412 94.9824 238.072 94.666C237.736 94.3496 237.568 93.9297 237.568 93.4062C237.568 92.2852 238.229 91.6328 239.549 91.4492L241.348 91.1973C241.348 90.1777 240.936 89.668 240.111 89.668C239.389 89.668 238.736 89.9141 238.154 90.4062V89.4219C238.744 89.0469 239.424 88.8594 240.193 88.8594C241.604 88.8594 242.309 89.6055 242.309 91.0977V95ZM241.348 91.9648L239.9 92.1641C239.455 92.2266 239.119 92.3379 238.893 92.498C238.666 92.6543 238.553 92.9336 238.553 93.3359C238.553 93.6289 238.656 93.8691 238.863 94.0566C239.074 94.2402 239.354 94.332 239.701 94.332C240.178 94.332 240.57 94.166 240.879 93.834C241.191 93.498 241.348 93.0742 241.348 92.5625V91.9648ZM249.24 94.5195C249.24 96.7227 248.186 97.8242 246.076 97.8242C245.334 97.8242 244.686 97.6836 244.131 97.4023V96.4414C244.807 96.8164 245.451 97.0039 246.064 97.0039C247.541 97.0039 248.279 96.2188 248.279 94.6484V93.9922H248.256C247.799 94.7578 247.111 95.1406 246.193 95.1406C245.447 95.1406 244.846 94.875 244.389 94.3438C243.936 93.8086 243.709 93.0918 243.709 92.1934C243.709 91.1738 243.953 90.3633 244.441 89.7617C244.934 89.1602 245.605 88.8594 246.457 88.8594C247.266 88.8594 247.865 89.1836 248.256 89.832H248.279V89H249.24V94.5195ZM248.279 92.2871V91.4023C248.279 90.9258 248.117 90.5176 247.793 90.1777C247.473 89.8379 247.072 89.668 246.592 89.668C245.998 89.668 245.533 89.8848 245.197 90.3184C244.861 90.748 244.693 91.3516 244.693 92.1289C244.693 92.7969 244.854 93.332 245.174 93.7344C245.498 94.1328 245.926 94.332 246.457 94.332C246.996 94.332 247.434 94.1406 247.77 93.7578C248.109 93.375 248.279 92.8848 248.279 92.2871ZM256.008 92.2402H251.771C251.787 92.9082 251.967 93.4238 252.311 93.7871C252.654 94.1504 253.127 94.332 253.729 94.332C254.404 94.332 255.025 94.1094 255.592 93.6641V94.5664C255.064 94.9492 254.367 95.1406 253.5 95.1406C252.652 95.1406 251.986 94.8691 251.502 94.3262C251.018 93.7793 250.775 93.0117 250.775 92.0234C250.775 91.0898 251.039 90.3301 251.566 89.7441C252.098 89.1543 252.756 88.8594 253.541 88.8594C254.326 88.8594 254.934 89.1133 255.363 89.6211C255.793 90.1289 256.008 90.834 256.008 91.7363V92.2402ZM255.023 91.4258C255.02 90.8711 254.885 90.4395 254.619 90.1309C254.357 89.8223 253.992 89.668 253.523 89.668C253.07 89.668 252.686 89.8301 252.369 90.1543C252.053 90.4785 251.857 90.9023 251.783 91.4258H255.023Z" fill="#0078D4"/>
|
|
||||||
<circle cx="187" cy="163" r="4" fill="#B8B9BA"/>
|
|
||||||
<circle cx="223" cy="163" r="4" fill="#0078D4"/>
|
|
||||||
<circle cx="259" cy="163" r="4" fill="#B8B9BA"/>
|
|
||||||
<circle cx="295" cy="163" r="4" fill="#B8B9BA"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 3.4 KiB |
|
|
@ -57,7 +57,6 @@
|
||||||
|
|
||||||
.legend {
|
.legend {
|
||||||
font-family: @SemiboldFont;
|
font-family: @SemiboldFont;
|
||||||
margin-bottom: @DefaultSpace;
|
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -114,14 +113,6 @@
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.twoLineContent {
|
|
||||||
margin-top: -5px;
|
|
||||||
|
|
||||||
:nth-child(2) {
|
|
||||||
font-size: 9px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: @BaseMediumHigh;
|
color: @BaseMediumHigh;
|
||||||
|
|
|
||||||
|
|
@ -9,14 +9,12 @@ import NewStoredProcedureIcon from "../../../images/AddStoredProcedure.svg";
|
||||||
import OpenQueryIcon from "../../../images/BrowseQuery.svg";
|
import OpenQueryIcon from "../../../images/BrowseQuery.svg";
|
||||||
import ConnectIcon from "../../../images/Connect_color.svg";
|
import ConnectIcon from "../../../images/Connect_color.svg";
|
||||||
import ContainersIcon from "../../../images/Containers.svg";
|
import ContainersIcon from "../../../images/Containers.svg";
|
||||||
import CostIcon from "../../../images/Cost.svg";
|
|
||||||
import GreenCheckIcon from "../../../images/Green_check.svg";
|
|
||||||
import NewContainerIcon from "../../../images/Hero-new-container.svg";
|
import NewContainerIcon from "../../../images/Hero-new-container.svg";
|
||||||
import NewNotebookIcon from "../../../images/Hero-new-notebook.svg";
|
import NewNotebookIcon from "../../../images/Hero-new-notebook.svg";
|
||||||
import SampleIcon from "../../../images/Hero-sample.svg";
|
import SampleIcon from "../../../images/Hero-sample.svg";
|
||||||
import LinkIcon from "../../../images/Link_blue.svg";
|
import LinkIcon from "../../../images/Link_blue.svg";
|
||||||
import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
|
import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
|
||||||
import NotebooksIcon from "../../../images/Notebooks.svg";
|
import NotebookColorIcon from "../../../images/Notebooks.svg";
|
||||||
import QuickStartIcon from "../../../images/Quickstart_Lightning.svg";
|
import QuickStartIcon from "../../../images/Quickstart_Lightning.svg";
|
||||||
import ScaleAndSettingsIcon from "../../../images/Scale_15x15.svg";
|
import ScaleAndSettingsIcon from "../../../images/Scale_15x15.svg";
|
||||||
import CollectionIcon from "../../../images/tree-collection.svg";
|
import CollectionIcon from "../../../images/tree-collection.svg";
|
||||||
|
|
@ -42,6 +40,7 @@ export interface SplashScreenItem {
|
||||||
id?: string;
|
id?: string;
|
||||||
info?: string;
|
info?: string;
|
||||||
description: string;
|
description: string;
|
||||||
|
showLinkIcon?: boolean;
|
||||||
onClick: () => void;
|
onClick: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -124,7 +123,11 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
|
||||||
<img src={item.iconSrc} alt="" />
|
<img src={item.iconSrc} alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div className="legendContainer">
|
<div className="legendContainer">
|
||||||
|
<Stack horizontal verticalAlign="center" style={{ marginBottom: 8 }}>
|
||||||
<div className="legend">{item.title}</div>
|
<div className="legend">{item.title}</div>
|
||||||
|
{item.showLinkIcon && <Image style={{ marginLeft: 8, width: 16 }} src={LinkIcon} />}
|
||||||
|
</Stack>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
id={item.id}
|
id={item.id}
|
||||||
className={userContext.features.enableNewQuickstart ? "newDescription" : "description"}
|
className={userContext.features.enableNewQuickstart ? "newDescription" : "description"}
|
||||||
|
|
@ -162,10 +165,8 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
|
||||||
)}
|
)}
|
||||||
<div className="moreStuffContainer">
|
<div className="moreStuffContainer">
|
||||||
<div className="moreStuffColumn commonTasks">
|
<div className="moreStuffColumn commonTasks">
|
||||||
<div className="title">
|
<div className="title">{userContext.features.enableNewQuickstart ? "Recents" : "Common Tasks"}</div>
|
||||||
{userContext.features.enableNewQuickstart ? "Why Cosmos DB" : "Common Tasks"}
|
{userContext.features.enableNewQuickstart ? this.getRecentItems() : this.getCommonTasksItems()}
|
||||||
</div>
|
|
||||||
{userContext.features.enableNewQuickstart ? this.getNotebookItems() : this.getCommonTasksItems()}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="moreStuffColumn">
|
<div className="moreStuffColumn">
|
||||||
<div className="title">
|
<div className="title">
|
||||||
|
|
@ -198,16 +199,31 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
|
||||||
* public for testing purposes
|
* public for testing purposes
|
||||||
*/
|
*/
|
||||||
public createMainItems(): SplashScreenItem[] {
|
public createMainItems(): SplashScreenItem[] {
|
||||||
const dataSampleUtil = this.createDataSampleUtil();
|
const heroes: SplashScreenItem[] = [];
|
||||||
|
|
||||||
if (userContext.features.enableNewQuickstart) {
|
if (userContext.features.enableNewQuickstart) {
|
||||||
|
if (userContext.apiType === "SQL" || userContext.apiType === "Mongo") {
|
||||||
const launchQuickstartBtn = {
|
const launchQuickstartBtn = {
|
||||||
id: "quickstartDescription",
|
id: "quickstartDescription",
|
||||||
iconSrc: QuickStartIcon,
|
iconSrc: QuickStartIcon,
|
||||||
title: "Launch quick start",
|
title: "Launch quick start",
|
||||||
description: "Launch a quick start tutorial to get started with sample data",
|
description: "Launch a quick start tutorial to get started with sample data",
|
||||||
onClick: () => this.container.onNewCollectionClicked({ isQuickstart: true }),
|
showLinkIcon: userContext.apiType === "Mongo",
|
||||||
|
onClick: () =>
|
||||||
|
userContext.apiType === "Mongo"
|
||||||
|
? window.open("http://aka.ms/mongodbquickstart", "_blank")
|
||||||
|
: this.container.onNewCollectionClicked({ isQuickstart: true }),
|
||||||
};
|
};
|
||||||
|
heroes.push(launchQuickstartBtn);
|
||||||
|
} else if (useNotebook.getState().isPhoenixNotebooks) {
|
||||||
|
const newNotebookBtn = {
|
||||||
|
iconSrc: NotebookColorIcon,
|
||||||
|
title: "New notebook",
|
||||||
|
description: "Visualize your data stored in Azure Cosmos DB",
|
||||||
|
onClick: () => this.container.onNewNotebookClicked(),
|
||||||
|
};
|
||||||
|
heroes.push(newNotebookBtn);
|
||||||
|
}
|
||||||
|
|
||||||
const newContainerBtn = {
|
const newContainerBtn = {
|
||||||
iconSrc: ContainersIcon,
|
iconSrc: ContainersIcon,
|
||||||
|
|
@ -215,6 +231,7 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
|
||||||
description: "Create a new container for storage and throughput",
|
description: "Create a new container for storage and throughput",
|
||||||
onClick: () => this.container.onNewCollectionClicked(),
|
onClick: () => this.container.onNewCollectionClicked(),
|
||||||
};
|
};
|
||||||
|
heroes.push(newContainerBtn);
|
||||||
|
|
||||||
const connectBtn = {
|
const connectBtn = {
|
||||||
iconSrc: ConnectIcon,
|
iconSrc: ConnectIcon,
|
||||||
|
|
@ -223,11 +240,9 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
|
||||||
// TODO: replace onClick function
|
// TODO: replace onClick function
|
||||||
onClick: () => 2,
|
onClick: () => 2,
|
||||||
};
|
};
|
||||||
|
heroes.push(connectBtn);
|
||||||
return [launchQuickstartBtn, newContainerBtn, connectBtn];
|
|
||||||
} else {
|
} else {
|
||||||
const heroes: SplashScreenItem[] = [];
|
const dataSampleUtil = this.createDataSampleUtil();
|
||||||
|
|
||||||
if (dataSampleUtil.isSampleContainerCreationSupported()) {
|
if (dataSampleUtil.isSampleContainerCreationSupported()) {
|
||||||
heroes.push({
|
heroes.push({
|
||||||
iconSrc: SampleIcon,
|
iconSrc: SampleIcon,
|
||||||
|
|
@ -252,10 +267,10 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
|
||||||
onClick: () => this.container.onNewNotebookClicked(),
|
onClick: () => this.container.onNewNotebookClicked(),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return heroes;
|
return heroes;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
private createCommonTaskItems(): SplashScreenItem[] {
|
private createCommonTaskItems(): SplashScreenItem[] {
|
||||||
const items: SplashScreenItem[] = [];
|
const items: SplashScreenItem[] = [];
|
||||||
|
|
@ -349,9 +364,9 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
|
||||||
|
|
||||||
private decorateOpenCollectionActivity({ databaseId, collectionId }: MostRecentActivity.OpenCollectionItem) {
|
private decorateOpenCollectionActivity({ databaseId, collectionId }: MostRecentActivity.OpenCollectionItem) {
|
||||||
return {
|
return {
|
||||||
iconSrc: NotebookIcon,
|
iconSrc: CollectionIcon,
|
||||||
title: collectionId,
|
title: collectionId,
|
||||||
description: "Data",
|
description: getCollectionName(),
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
const collection = useDatabases.getState().findCollection(databaseId, collectionId);
|
const collection = useDatabases.getState().findCollection(databaseId, collectionId);
|
||||||
collection?.openTab();
|
collection?.openTab();
|
||||||
|
|
@ -362,7 +377,7 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
|
||||||
private decorateOpenNotebookActivity({ name, path }: MostRecentActivity.OpenNotebookItem) {
|
private decorateOpenNotebookActivity({ name, path }: MostRecentActivity.OpenNotebookItem) {
|
||||||
return {
|
return {
|
||||||
info: path,
|
info: path,
|
||||||
iconSrc: CollectionIcon,
|
iconSrc: NotebookIcon,
|
||||||
title: name,
|
title: name,
|
||||||
description: "Notebook",
|
description: "Notebook",
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
|
|
@ -418,25 +433,6 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private getNotebookItems(): JSX.Element {
|
|
||||||
return (
|
|
||||||
<Stack>
|
|
||||||
<Stack className="notebookSplashScreenItem" horizontal style={{ marginBottom: 14 }}>
|
|
||||||
<Image src={NotebooksIcon} />
|
|
||||||
<Text className="itemText">Notebook - Easy to develop</Text>
|
|
||||||
</Stack>
|
|
||||||
<Stack className="notebookSplashScreenItem" horizontal style={{ marginBottom: 14 }}>
|
|
||||||
<Image src={GreenCheckIcon} />
|
|
||||||
<Text className="itemText">Notebook - Enterprise ready</Text>
|
|
||||||
</Stack>
|
|
||||||
<Stack className="notebookSplashScreenItem" horizontal style={{ marginBottom: 14 }}>
|
|
||||||
<Image src={CostIcon} />
|
|
||||||
<Text className="itemText">Notebook - Cost effective</Text>
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private getCommonTasksItems(): JSX.Element {
|
private getCommonTasksItems(): JSX.Element {
|
||||||
const commonTaskItems = this.createCommonTaskItems();
|
const commonTaskItems = this.createCommonTaskItems();
|
||||||
return (
|
return (
|
||||||
|
|
@ -461,41 +457,117 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
|
||||||
}
|
}
|
||||||
|
|
||||||
private top3Items(): JSX.Element {
|
private top3Items(): JSX.Element {
|
||||||
|
let items: { link: string; title: string; description: string }[];
|
||||||
|
switch (userContext.apiType) {
|
||||||
|
case "SQL":
|
||||||
|
items = [
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/msl-modeling-partitioning-2",
|
||||||
|
title: "Advanced Modeling Patterns",
|
||||||
|
description: "Learn advanced strategies to optimize your database.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/msl-modeling-partitioning-1",
|
||||||
|
title: "Partitioning Best Practices",
|
||||||
|
description: "Learn to apply data model and partitioning strategies.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/msl-resource-planning",
|
||||||
|
title: "Plan Your Resource Requirements",
|
||||||
|
description: "Get to know the different configuration choices.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
case "Mongo":
|
||||||
|
items = [
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/mongodbintro",
|
||||||
|
title: "What is the MongoDB API?",
|
||||||
|
description: "Understand the Cosmos DB API for MongoDB and its features.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/mongodbfeaturesupport",
|
||||||
|
title: "Features and Syntax",
|
||||||
|
description: "Discover the advantages and features",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/mongodbpremigration",
|
||||||
|
title: "Migrate Your Data",
|
||||||
|
description: "Pre-migration steps for moving data",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
case "Cassandra":
|
||||||
|
items = [
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/cassandrajava",
|
||||||
|
title: "Build a Java App",
|
||||||
|
description: "Create a Java app using an SDK.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/cassandrapartitioning",
|
||||||
|
title: "Partitioning Best Practices",
|
||||||
|
description: "Learn how partitioning works.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/cassandraRu",
|
||||||
|
title: "Request Units (RUs)",
|
||||||
|
description: "Understand RU charges.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
case "Gremlin":
|
||||||
|
items = [
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/Graphdatamodeling",
|
||||||
|
title: "Data Modeling",
|
||||||
|
description: "Graph data modeling recommendations",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/graphpartitioning",
|
||||||
|
title: "Partitioning Best Practices",
|
||||||
|
description: "Learn how partitioning works",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/graphapiquery",
|
||||||
|
title: "Query Data",
|
||||||
|
description: "Querying data with Gremlin",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
case "Tables":
|
||||||
|
items = [
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/tableintro",
|
||||||
|
title: "What is the Table API?",
|
||||||
|
description: "Understand the Table API in Cosmos DB and its features",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/tableimport",
|
||||||
|
title: "Migrate your data",
|
||||||
|
description: "Learn how to migrate your data",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/tablefaq",
|
||||||
|
title: "Table API FAQs",
|
||||||
|
description: "Common questions about the Table API",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<Stack>
|
<Stack>
|
||||||
<Stack style={{ marginBottom: 26 }}>
|
{items.map((item, i) => (
|
||||||
|
<Stack key={`top${i}`} style={{ marginBottom: 26 }}>
|
||||||
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
|
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
|
||||||
<Link href="https://aka.ms/msl-modeling-partitioning-2" target="_blank" style={{ marginRight: 5 }}>
|
<Link href={item.link} target="_blank" style={{ marginRight: 5 }}>
|
||||||
Advanced Modeling Patterns
|
{item.title}
|
||||||
</Link>
|
</Link>
|
||||||
<Image src={LinkIcon} />
|
<Image src={LinkIcon} />
|
||||||
</Stack>
|
</Stack>
|
||||||
<Text>
|
<Text>{item.description}</Text>
|
||||||
Learn advanced strategies for managing relationships between data entities to optimize your database.
|
|
||||||
</Text>
|
|
||||||
</Stack>
|
|
||||||
<Stack style={{ marginBottom: 26 }}>
|
|
||||||
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
|
|
||||||
<Link href="https://aka.ms/msl-modeling-partitioning-1" target="_blank" style={{ marginRight: 5 }}>
|
|
||||||
Partitioning Best Practices
|
|
||||||
</Link>
|
|
||||||
<Image src={LinkIcon} />
|
|
||||||
</Stack>
|
|
||||||
<Text>
|
|
||||||
Learn to apply data model and partitioning strategies to support an efficient and scalable NoSQL database.
|
|
||||||
</Text>
|
|
||||||
</Stack>
|
|
||||||
<Stack>
|
|
||||||
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
|
|
||||||
<Link href="https://aka.ms/msl-resource-planning" target="_blank" style={{ marginRight: 5 }}>
|
|
||||||
Plan Your Resource Requirements
|
|
||||||
</Link>
|
|
||||||
<Image src={LinkIcon} />
|
|
||||||
</Stack>
|
|
||||||
<Text>
|
|
||||||
Familiarize yourself with the various configuration options for a new Azure Cosmos DB SQL API account.
|
|
||||||
</Text>
|
|
||||||
</Stack>
|
</Stack>
|
||||||
|
))}
|
||||||
</Stack>
|
</Stack>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -508,13 +580,15 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
|
||||||
<ul>
|
<ul>
|
||||||
{recentItems.map((item, index) => (
|
{recentItems.map((item, index) => (
|
||||||
<li key={`${item.title}${item.description}${index}`}>
|
<li key={`${item.title}${item.description}${index}`}>
|
||||||
<img src={item.iconSrc} alt="" />
|
<Stack style={{ marginBottom: 26 }}>
|
||||||
<span className="twoLineContent">
|
<Stack horizontal>
|
||||||
<Link onClick={item.onClick} title={item.info}>
|
<Image style={{ marginRight: 8 }} src={item.iconSrc} />
|
||||||
|
<Link style={{ fontSize: 14 }} onClick={item.onClick} title={item.info}>
|
||||||
{item.title}
|
{item.title}
|
||||||
</Link>
|
</Link>
|
||||||
<div className="description">{item.description}</div>
|
</Stack>
|
||||||
</span>
|
<Text style={{ color: "#605E5C" }}>{item.description}</Text>
|
||||||
|
</Stack>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -524,37 +598,117 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
|
||||||
}
|
}
|
||||||
|
|
||||||
private getLearningResourceItems(): JSX.Element {
|
private getLearningResourceItems(): JSX.Element {
|
||||||
|
let items: { link: string; title: string; description: string }[];
|
||||||
|
switch (userContext.apiType) {
|
||||||
|
case "SQL":
|
||||||
|
items = [
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/msl-sdk-connect",
|
||||||
|
title: "Get Started using an SDK",
|
||||||
|
description: "Learn about the Azure Cosmos DB SDK.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/msl-complex-queries",
|
||||||
|
title: "Master Complex Queries",
|
||||||
|
description: "Learn how to author complex queries.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/msl-move-data",
|
||||||
|
title: "Migrate Your Data",
|
||||||
|
description: "Migrate data using Azure services and open-source solutions.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
case "Mongo":
|
||||||
|
items = [
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/mongonodejs",
|
||||||
|
title: "Build an app with Node.js",
|
||||||
|
description: "Create a Node.js app.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/mongopython",
|
||||||
|
title: "Getting Started Guide",
|
||||||
|
description: "Learn the basics to get started.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "http://aka.ms/mongodotnet",
|
||||||
|
title: "Build a web API",
|
||||||
|
description: "Create a web API with the.NET SDK.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
case "Cassandra":
|
||||||
|
items = [
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/cassandracontainer",
|
||||||
|
title: "Create a Container",
|
||||||
|
description: "Get to know the create a container options.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/cassandraserverdiagnostics",
|
||||||
|
title: "Run Server Diagnostics",
|
||||||
|
description: "Learn how to run server diagnostics.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/Cassandrathroughput",
|
||||||
|
title: "Provision Throughput",
|
||||||
|
description: "Learn how to configure throughput.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
case "Gremlin":
|
||||||
|
items = [
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/graphquickstart",
|
||||||
|
title: "Get Started ",
|
||||||
|
description: "Create, query, and traverse using the Gremlin console",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/graphimport",
|
||||||
|
title: "Import Graph Data",
|
||||||
|
description: "Learn Bulk ingestion data using BulkExecutor",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/graphoptimize",
|
||||||
|
title: "Optimize your Queries",
|
||||||
|
description: "Learn how to evaluate your Gremlin queries",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
case "Tables":
|
||||||
|
items = [
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/tabledotnet",
|
||||||
|
title: "Build a .NET App",
|
||||||
|
description: "How to access Table API from a .NET app.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/Tablejava",
|
||||||
|
title: "Build a Java App",
|
||||||
|
description: "Create a Table API app with Java SDK ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://aka.ms/tablenodejs",
|
||||||
|
title: "Build a Node.js App",
|
||||||
|
description: "Create a Table API app with Node.js SDK",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<Stack>
|
<Stack>
|
||||||
<Stack style={{ marginBottom: 26 }}>
|
{items.map((item, i) => (
|
||||||
|
<Stack key={`learningResource${i}`} style={{ marginBottom: 26 }}>
|
||||||
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
|
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
|
||||||
<Link href="https://aka.ms/msl-sdk-connect" target="_blank" style={{ marginRight: 5 }}>
|
<Link href={item.link} target="_blank" style={{ marginRight: 5 }}>
|
||||||
Get Started using th SQL API with the SDK
|
{item.title}
|
||||||
</Link>
|
</Link>
|
||||||
<Image src={LinkIcon} />
|
<Image src={LinkIcon} />
|
||||||
</Stack>
|
</Stack>
|
||||||
<Text>Learn about the Azure Cosmos DB SDK, then download and use in a .NET application.</Text>
|
<Text>{item.description}</Text>
|
||||||
</Stack>
|
|
||||||
<Stack style={{ marginBottom: 26 }}>
|
|
||||||
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
|
|
||||||
<Link href="https://aka.ms/msl-complex-queries" target="_blank" style={{ marginRight: 5 }}>
|
|
||||||
Master Complex Queries
|
|
||||||
</Link>
|
|
||||||
<Image src={LinkIcon} />
|
|
||||||
</Stack>
|
|
||||||
<Text>Learn how to author complex queries using cross-products and correlated subqueries.</Text>
|
|
||||||
</Stack>
|
|
||||||
<Stack>
|
|
||||||
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
|
|
||||||
<Link href="https://aka.ms/msl-move-data" target="_blank" style={{ marginRight: 5 }}>
|
|
||||||
Migrate Your Data
|
|
||||||
</Link>
|
|
||||||
<Image src={LinkIcon} />
|
|
||||||
</Stack>
|
|
||||||
<Text>
|
|
||||||
Migrate data into and out of Azure Cosmos DB SQL API using Azure services and open-source solutions.
|
|
||||||
</Text>
|
|
||||||
</Stack>
|
</Stack>
|
||||||
|
))}
|
||||||
</Stack>
|
</Stack>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
import { DefaultButton, IconButton, Image, Modal, PrimaryButton, Stack, Text } from "@fluentui/react";
|
import { DefaultButton, IconButton, Image, Modal, PrimaryButton, Stack, Text } from "@fluentui/react";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import Youtube from "react-youtube";
|
import Youtube from "react-youtube";
|
||||||
import Placeholder from "../../../images/Placeholder.svg";
|
import Image1 from "../../../images/CarouselImage1.svg";
|
||||||
|
import Image2 from "../../../images/CarouselImage2.svg";
|
||||||
|
|
||||||
interface QuickstartCarouselProps {
|
interface QuickstartCarouselProps {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
|
|
@ -55,9 +56,9 @@ const getContent = (page: number): JSX.Element => {
|
||||||
case 1:
|
case 1:
|
||||||
return <Youtube videoId="Jvgh64rvdXU" />;
|
return <Youtube videoId="Jvgh64rvdXU" />;
|
||||||
case 2:
|
case 2:
|
||||||
return <Image style={{ width: 640 }} src={Placeholder} />;
|
return <Image style={{ width: 640 }} src={Image1} />;
|
||||||
case 3:
|
case 3:
|
||||||
return <Image style={{ width: 640 }} src={Placeholder} />;
|
return <Image style={{ width: 640 }} src={Image2} />;
|
||||||
default:
|
default:
|
||||||
return <></>;
|
return <></>;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue