lukechilds
/
react.dev
mirror of https://github.com/lukechilds/react.dev.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add diagrams for passing props with context (#4394) 

* Add diagrams for passing props with context

* Update beta/src/pages/learn/passing-data-deeply-with-context.md

Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>

* Update beta/src/pages/learn/passing-data-deeply-with-context.md

Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>

* Update beta/src/pages/learn/passing-data-deeply-with-context.md

Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>

* Fixes for mobile

Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>
main
Ricky 3 years ago
committed by GitHub
parent
b13640a8fb
commit
0ff869ffde
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 859 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 48
      beta/public/images/docs/diagrams/passing_data_context_close.dark.svg
  2. 48
      beta/public/images/docs/diagrams/passing_data_context_close.svg
  3. 155
      beta/public/images/docs/diagrams/passing_data_context_far.dark.svg
  4. 149
      beta/public/images/docs/diagrams/passing_data_context_far.svg
  5. 49
      beta/public/images/docs/diagrams/passing_data_lifting_state.dark.svg
  6. 49
      beta/public/images/docs/diagrams/passing_data_lifting_state.svg
  7. 153
      beta/public/images/docs/diagrams/passing_data_prop_drilling.dark.svg
  8. 153
      beta/public/images/docs/diagrams/passing_data_prop_drilling.svg
  9. 27
      beta/src/components/MDX/Diagram.tsx
  10. 2
      beta/src/components/MDX/DiagramGroup.tsx
  11. 37
      beta/src/pages/learn/passing-data-deeply-with-context.md

48
beta/public/images/docs/diagrams/passing_data_context_close.dark.svg
View File

@ -0,0 +1,48 @@
<svg width="608" height="160" viewBox="0 0 608 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_439_4940)">
<rect x="266" y="1" width="80" height="56" rx="6" fill="#343A46"/>
<rect x="286" y="21" width="40" height="16" rx="8" fill="#FABD62"/>
<rect x="266" y="1" width="80" height="56" rx="6" stroke="white" stroke-linejoin="bevel"/>
</g>
<path d="M407 115V103.086H409V115H407ZM392 88.0862H306V86.0862H392V88.0862ZM407 103.086C407 94.8019 400.284 88.0862 392 88.0862V86.0862C401.389 86.0862 409 93.6973 409 103.086H407Z" fill="#4E5769"/>
<path d="M306 87.0862V88.0862H307V87.0862H306ZM205 115V103.086H203V115H205ZM220 88.0862H306V86.0862H220V88.0862ZM307 87.0862V58H305V87.0862H307ZM205 103.086C205 94.8019 211.716 88.0862 220 88.0862V86.0862C210.611 86.0862 203 93.6973 203 103.086H205Z" fill="#4E5769"/>
<path opacity="0.5" d="M306 32L442.5 115.5L365.5 153.5L306 32Z" fill="#FCDEB0"/>
<path opacity="0.5" d="M305.5 32L169 115.5L246 153.5L305.5 32Z" fill="#FCDEB0"/>
<g filter="url(#filter1_d_439_4940)">
<path d="M246 121C246 117.686 243.314 115 240 115H172C168.686 115 166 117.686 166 121V151C166 154.314 168.686 157 172 157H240C243.314 157 246 154.314 246 151V121Z" fill="#FABD62"/>
<path d="M240 115.5H172V114.5H240V115.5ZM166.5 121V151H165.5V121H166.5ZM172 156.5H240V157.5H172V156.5ZM245.5 151V121H246.5V151H245.5ZM240 156.5C243.038 156.5 245.5 154.038 245.5 151H246.5C246.5 154.59 243.59 157.5 240 157.5V156.5ZM166.5 151C166.5 154.038 168.962 156.5 172 156.5V157.5C168.41 157.5 165.5 154.59 165.5 151H166.5ZM172 115.5C168.962 115.5 166.5 117.962 166.5 121H165.5C165.5 117.41 168.41 114.5 172 114.5V115.5ZM240 114.5C243.59 114.5 246.5 117.41 246.5 121H245.5C245.5 117.962 243.038 115.5 240 115.5V114.5Z" fill="#DB7D27"/>
</g>
<g filter="url(#filter2_d_439_4940)">
<path d="M446 121C446 117.686 443.314 115 440 115H372C368.686 115 366 117.686 366 121V151C366 154.314 368.686 157 372 157H440C443.314 157 446 154.314 446 151V121Z" fill="#FABD62"/>
<path d="M440 115.5H372V114.5H440V115.5ZM366.5 121V151H365.5V121H366.5ZM372 156.5H440V157.5H372V156.5ZM445.5 151V121H446.5V151H445.5ZM440 156.5C443.038 156.5 445.5 154.038 445.5 151H446.5C446.5 154.59 443.59 157.5 440 157.5V156.5ZM366.5 151C366.5 154.038 368.962 156.5 372 156.5V157.5C368.41 157.5 365.5 154.59 365.5 151H366.5ZM372 115.5C368.962 115.5 366.5 117.962 366.5 121H365.5C365.5 117.41 368.41 114.5 372 114.5V115.5ZM440 114.5C443.59 114.5 446.5 117.41 446.5 121H445.5C445.5 117.962 443.038 115.5 440 115.5V114.5Z" fill="#DB7D27"/>
</g>
<defs>
<filter id="filter0_d_439_4940" x="265.5" y="0.5" width="81" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.263177 0 0 0 0 0.455172 0 0 0 0 0.679167 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_439_4940"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_439_4940" result="shape"/>
</filter>
<filter id="filter1_d_439_4940" x="165.5" y="114.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.858333 0 0 0 0 0.491968 0 0 0 0 0.153785 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_439_4940"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_439_4940" result="shape"/>
</filter>
<filter id="filter2_d_439_4940" x="365.5" y="114.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.858333 0 0 0 0 0.491968 0 0 0 0 0.153785 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_439_4940"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_439_4940" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

48
beta/public/images/docs/diagrams/passing_data_context_close.svg
View File

@ -0,0 +1,48 @@
<svg width="608" height="160" viewBox="0 0 608 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_438_4584)">
<rect x="266" y="1" width="80" height="56" rx="6" fill="white"/>
<rect x="286" y="21" width="40" height="16" rx="8" fill="#FABD62"/>
<rect x="266" y="1" width="80" height="56" rx="6" stroke="#2C749E" stroke-linejoin="bevel"/>
</g>
<path d="M408 115V103.086C408 94.2496 400.837 87.0862 392 87.0862H306" stroke="#CDDDF0" stroke-width="2"/>
<path d="M204 115V103.086C204 94.2496 211.163 87.0862 220 87.0862H306V58" stroke="#CDDDF0" stroke-width="2"/>
<path opacity="0.5" d="M306 32L442.5 115.5L365.5 153.5L306 32Z" fill="#FCDEB0"/>
<path opacity="0.5" d="M305.5 32L169 115.5L246 153.5L305.5 32Z" fill="#FCDEB0"/>
<g filter="url(#filter1_d_438_4584)">
<path d="M246 121C246 117.686 243.314 115 240 115H172C168.686 115 166 117.686 166 121V151C166 154.314 168.686 157 172 157H240C243.314 157 246 154.314 246 151V121Z" fill="#FABD62"/>
<path d="M240 115.5H172V114.5H240V115.5ZM166.5 121V151H165.5V121H166.5ZM172 156.5H240V157.5H172V156.5ZM245.5 151V121H246.5V151H245.5ZM240 156.5C243.038 156.5 245.5 154.038 245.5 151H246.5C246.5 154.59 243.59 157.5 240 157.5V156.5ZM166.5 151C166.5 154.038 168.962 156.5 172 156.5V157.5C168.41 157.5 165.5 154.59 165.5 151H166.5ZM172 115.5C168.962 115.5 166.5 117.962 166.5 121H165.5C165.5 117.41 168.41 114.5 172 114.5V115.5ZM240 114.5C243.59 114.5 246.5 117.41 246.5 121H245.5C245.5 117.962 243.038 115.5 240 115.5V114.5Z" fill="#DB7D27"/>
</g>
<g filter="url(#filter2_d_438_4584)">
<path d="M446 121C446 117.686 443.314 115 440 115H372C368.686 115 366 117.686 366 121V151C366 154.314 368.686 157 372 157H440C443.314 157 446 154.314 446 151V121Z" fill="#FABD62"/>
<path d="M440 115.5H372V114.5H440V115.5ZM366.5 121V151H365.5V121H366.5ZM372 156.5H440V157.5H372V156.5ZM445.5 151V121H446.5V151H445.5ZM440 156.5C443.038 156.5 445.5 154.038 445.5 151H446.5C446.5 154.59 443.59 157.5 440 157.5V156.5ZM366.5 151C366.5 154.038 368.962 156.5 372 156.5V157.5C368.41 157.5 365.5 154.59 365.5 151H366.5ZM372 115.5C368.962 115.5 366.5 117.962 366.5 121H365.5C365.5 117.41 368.41 114.5 372 114.5V115.5ZM440 114.5C443.59 114.5 446.5 117.41 446.5 121H445.5C445.5 117.962 443.038 115.5 440 115.5V114.5Z" fill="#DB7D27"/>
</g>
<defs>
<filter id="filter0_d_438_4584" x="265.5" y="0.5" width="81" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.263177 0 0 0 0 0.455172 0 0 0 0 0.679167 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_438_4584"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_438_4584" result="shape"/>
</filter>
<filter id="filter1_d_438_4584" x="165.5" y="114.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.858333 0 0 0 0 0.491968 0 0 0 0 0.153785 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_438_4584"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_438_4584" result="shape"/>
</filter>
<filter id="filter2_d_438_4584" x="365.5" y="114.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.858333 0 0 0 0 0.491968 0 0 0 0 0.153785 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_438_4584"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_438_4584" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

155
beta/public/images/docs/diagrams/passing_data_context_far.dark.svg
View File

@ -0,0 +1,155 @@
<svg width="608" height="435" viewBox="0 0 608 435" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M460 207V198.514H462V207H460ZM445 183.514H391V181.514H445V183.514ZM460 198.514C460 190.23 453.284 183.514 445 183.514V181.514C454.389 181.514 462 189.125 462 198.514H460Z" fill="#4E5769"/>
<path d="M391 182.514V183.514H392V182.514H391ZM322 207V198.514H320V207H322ZM337 183.514H391V181.514H337V183.514ZM392 182.514V157H390V182.514H392ZM322 198.514C322 190.23 328.716 183.514 337 183.514V181.514C327.611 181.514 320 189.125 320 198.514H322Z" fill="#4E5769"/>
<path d="M530 381V372.024H532V381H530ZM515 357.024H461V355.024H515V357.024ZM530 372.024C530 363.74 523.284 357.024 515 357.024V355.024C524.389 355.024 532 362.636 532 372.024H530Z" fill="#4E5769"/>
<path d="M461 356.024V357.024H462V356.024H461ZM392 381V372.024H390V381H392ZM407 357.024H461V355.024H407V357.024ZM462 356.024V330H460V356.024H462ZM392 372.024C392 363.74 398.716 357.024 407 357.024V355.024C397.611 355.024 390 362.636 390 372.024H392Z" fill="#4E5769"/>
<path d="M215 206V197.514H217V206H215ZM200 182.514H146V180.514H200V182.514ZM215 197.514C215 189.23 208.284 182.514 200 182.514V180.514C209.389 180.514 217 188.125 217 197.514H215Z" fill="#4E5769"/>
<path d="M146 181.514V182.514H147V181.514H146ZM77 206V197.514H75V206H77ZM92 182.514H146V180.514H92V182.514ZM147 181.514V156H145V181.514H147ZM77 197.514C77 189.23 83.7157 182.514 92 182.514V180.514C82.6112 180.514 75 188.125 75 197.514H77Z" fill="#4E5769"/>
<path d="M390 114V102.086H392V114H390ZM375 87.0862H269V85.0862H375V87.0862ZM390 102.086C390 93.8019 383.284 87.0862 375 87.0862V85.0862C384.389 85.0862 392 92.6973 392 102.086H390Z" fill="#4E5769"/>
<path d="M269 86.0862V87.0862H270V86.0862H269ZM148 114V102.086H146V114H148ZM163 87.0862H269V85.0862H163V87.0862ZM270 86.0862V57H268V86.0862H270ZM148 102.086C148 93.8019 154.716 87.0862 163 87.0862V85.0862C153.611 85.0862 146 92.6973 146 102.086H148Z" fill="#4E5769"/>
<g filter="url(#filter0_d_439_4864)">
<rect x="229" y="1" width="80" height="56" rx="6" fill="#343A46"/>
<rect x="249" y="21" width="40" height="16" rx="8" fill="#FABD62"/>
<rect x="229" y="1" width="80" height="56" rx="6" stroke="white" stroke-linejoin="bevel"/>
</g>
<g filter="url(#filter1_d_439_4864)">
<rect x="351" y="114" width="80" height="42" rx="6" fill="#343A46"/>
<rect x="351" y="114" width="80" height="42" rx="6" stroke="#4E5769" stroke-linejoin="bevel"/>
</g>
<g filter="url(#filter2_d_439_4864)">
<rect x="281" y="208" width="80" height="42" rx="6" fill="#343A46"/>
<rect x="281" y="208" width="80" height="42" rx="6" stroke="#4E5769" stroke-linejoin="bevel"/>
</g>
<g filter="url(#filter3_d_439_4864)">
<rect x="421" y="288" width="80" height="42" rx="6" fill="#343A46"/>
<rect x="421" y="288" width="80" height="42" rx="6" stroke="#4E5769" stroke-linejoin="bevel"/>
</g>
<g filter="url(#filter4_d_439_4864)">
<rect x="106" y="114" width="80" height="42" rx="6" fill="#343A46"/>
<rect x="106" y="114" width="80" height="42" rx="6" stroke="#4E5769" stroke-linejoin="bevel"/>
</g>
<path opacity="0.5" d="M269 32L429.5 384L354 419.5L269 32Z" fill="#FCDEB0"/>
<path opacity="0.5" d="M269 32L496.5 209L423.5 246.5L269 32Z" fill="#FCDEB0"/>
<path opacity="0.5" d="M269 32L569.5 382.5L494 421.5L269 32Z" fill="#FCDEB0"/>
<mask id="mask0_439_4864" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="269" y="32" width="228" height="215">
<path opacity="0.5" d="M269 32L496.5 209L423.5 246.5L269 32Z" fill="black" fill-opacity="0.8"/>
</mask>
<g mask="url(#mask0_439_4864)">
<path opacity="0.5" d="M269 32L569.5 382.5L494 421.5L269 32Z" fill="black" fill-opacity="0.8"/>
</g>
<path opacity="0.5" d="M268.5 32L177.5 210L254.5 245L268.5 32Z" fill="#FCDEB0"/>
<path opacity="0.5" d="M268.5 32L37 210.5L112.5 245.5L268.5 32Z" fill="#FCDEB0"/>
<g filter="url(#filter5_d_439_4864)">
<path d="M256 213C256 209.686 253.314 207 250 207H182C178.686 207 176 209.686 176 213V243C176 246.314 178.686 249 182 249H250C253.314 249 256 246.314 256 243V213Z" fill="#FABD62"/>
<path d="M250 207.5H182V206.5H250V207.5ZM176.5 213V243H175.5V213H176.5ZM182 248.5H250V249.5H182V248.5ZM255.5 243V213H256.5V243H255.5ZM250 248.5C253.038 248.5 255.5 246.038 255.5 243H256.5C256.5 246.59 253.59 249.5 250 249.5V248.5ZM176.5 243C176.5 246.038 178.962 248.5 182 248.5V249.5C178.41 249.5 175.5 246.59 175.5 243H176.5ZM182 207.5C178.962 207.5 176.5 209.962 176.5 213H175.5C175.5 209.41 178.41 206.5 182 206.5V207.5ZM250 206.5C253.59 206.5 256.5 209.41 256.5 213H255.5C255.5 209.962 253.038 207.5 250 207.5V206.5Z" fill="#DB7D27"/>
</g>
<g filter="url(#filter6_d_439_4864)">
<path d="M501 214C501 210.686 498.314 208 495 208H427C423.686 208 421 210.686 421 214V244C421 247.314 423.686 250 427 250H495C498.314 250 501 247.314 501 244V214Z" fill="#FABD62"/>
<path d="M495 208.5H427V207.5H495V208.5ZM421.5 214V244H420.5V214H421.5ZM427 249.5H495V250.5H427V249.5ZM500.5 244V214H501.5V244H500.5ZM495 249.5C498.038 249.5 500.5 247.038 500.5 244H501.5C501.5 247.59 498.59 250.5 495 250.5V249.5ZM421.5 244C421.5 247.038 423.962 249.5 427 249.5V250.5C423.41 250.5 420.5 247.59 420.5 244H421.5ZM427 208.5C423.962 208.5 421.5 210.962 421.5 214H420.5C420.5 210.41 423.41 207.5 427 207.5V208.5ZM495 207.5C498.59 207.5 501.5 210.41 501.5 214H500.5C500.5 210.962 498.038 208.5 495 208.5V207.5Z" fill="#DB7D27"/>
</g>
<g filter="url(#filter7_d_439_4864)">
<path d="M572 387C572 383.686 569.314 381 566 381H498C494.686 381 492 383.686 492 387V417C492 420.314 494.686 423 498 423H566C569.314 423 572 420.314 572 417V387Z" fill="#FABD62"/>
<path d="M566 381.5H498V380.5H566V381.5ZM492.5 387V417H491.5V387H492.5ZM498 422.5H566V423.5H498V422.5ZM571.5 417V387H572.5V417H571.5ZM566 422.5C569.038 422.5 571.5 420.038 571.5 417H572.5C572.5 420.59 569.59 423.5 566 423.5V422.5ZM492.5 417C492.5 420.038 494.962 422.5 498 422.5V423.5C494.41 423.5 491.5 420.59 491.5 417H492.5ZM498 381.5C494.962 381.5 492.5 383.962 492.5 387H491.5C491.5 383.41 494.41 380.5 498 380.5V381.5ZM566 380.5C569.59 380.5 572.5 383.41 572.5 387H571.5C571.5 383.962 569.038 381.5 566 381.5V380.5Z" fill="#DB7D27"/>
</g>
<g filter="url(#filter8_d_439_4864)">
<path d="M116 213C116 209.686 113.314 207 110 207H42C38.6863 207 36 209.686 36 213V243C36 246.314 38.6863 249 42 249H110C113.314 249 116 246.314 116 243V213Z" fill="#FABD62"/>
<path d="M110 207.5H42V206.5H110V207.5ZM36.5 213V243H35.5V213H36.5ZM42 248.5H110V249.5H42V248.5ZM115.5 243V213H116.5V243H115.5ZM110 248.5C113.038 248.5 115.5 246.038 115.5 243H116.5C116.5 246.59 113.59 249.5 110 249.5V248.5ZM36.5 243C36.5 246.038 38.9624 248.5 42 248.5V249.5C38.4101 249.5 35.5 246.59 35.5 243H36.5ZM42 207.5C38.9624 207.5 36.5 209.962 36.5 213H35.5C35.5 209.41 38.4101 206.5 42 206.5V207.5ZM110 206.5C113.59 206.5 116.5 209.41 116.5 213H115.5C115.5 209.962 113.038 207.5 110 207.5V206.5Z" fill="#DB7D27"/>
</g>
<g filter="url(#filter9_d_439_4864)">
<path d="M432 387C432 383.686 429.314 381 426 381H358C354.686 381 352 383.686 352 387V417C352 420.314 354.686 423 358 423H426C429.314 423 432 420.314 432 417V387Z" fill="#FABD62"/>
<path d="M426 381.5H358V380.5H426V381.5ZM352.5 387V417H351.5V387H352.5ZM358 422.5H426V423.5H358V422.5ZM431.5 417V387H432.5V417H431.5ZM426 422.5C429.038 422.5 431.5 420.038 431.5 417H432.5C432.5 420.59 429.59 423.5 426 423.5V422.5ZM352.5 417C352.5 420.038 354.962 422.5 358 422.5V423.5C354.41 423.5 351.5 420.59 351.5 417H352.5ZM358 381.5C354.962 381.5 352.5 383.962 352.5 387H351.5C351.5 383.41 354.41 380.5 358 380.5V381.5ZM426 380.5C429.59 380.5 432.5 383.41 432.5 387H431.5C431.5 383.962 429.038 381.5 426 381.5V380.5Z" fill="#DB7D27"/>
</g>
<path opacity="0.4" d="M461 252L461 288" stroke="#4E5769" stroke-width="2"/>
<defs>
<filter id="filter0_d_439_4864" x="228.5" y="0.5" width="81" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_439_4864"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_439_4864" result="shape"/>
</filter>
<filter id="filter1_d_439_4864" x="350.5" y="113.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.305882 0 0 0 0 0.341176 0 0 0 0 0.411765 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_439_4864"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_439_4864" result="shape"/>
</filter>
<filter id="filter2_d_439_4864" x="280.5" y="207.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.305882 0 0 0 0 0.341176 0 0 0 0 0.411765 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_439_4864"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_439_4864" result="shape"/>
</filter>
<filter id="filter3_d_439_4864" x="420.5" y="287.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.305882 0 0 0 0 0.341176 0 0 0 0 0.411765 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_439_4864"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_439_4864" result="shape"/>
</filter>
<filter id="filter4_d_439_4864" x="105.5" y="113.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.305882 0 0 0 0 0.341176 0 0 0 0 0.411765 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_439_4864"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_439_4864" result="shape"/>
</filter>
<filter id="filter5_d_439_4864" x="175.5" y="206.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.858333 0 0 0 0 0.491968 0 0 0 0 0.153785 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_439_4864"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_439_4864" result="shape"/>
</filter>
<filter id="filter6_d_439_4864" x="420.5" y="207.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.858333 0 0 0 0 0.491968 0 0 0 0 0.153785 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_439_4864"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_439_4864" result="shape"/>
</filter>
<filter id="filter7_d_439_4864" x="491.5" y="380.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.858333 0 0 0 0 0.491968 0 0 0 0 0.153785 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_439_4864"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_439_4864" result="shape"/>
</filter>
<filter id="filter8_d_439_4864" x="35.5" y="206.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.858333 0 0 0 0 0.491968 0 0 0 0 0.153785 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_439_4864"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_439_4864" result="shape"/>
</filter>
<filter id="filter9_d_439_4864" x="351.5" y="380.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.858333 0 0 0 0 0.491968 0 0 0 0 0.153785 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_439_4864"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_439_4864" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

149
beta/public/images/docs/diagrams/passing_data_context_far.svg
View File

@ -0,0 +1,149 @@
<svg width="608" height="435" viewBox="0 0 608 435" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M461 207V198.514C461 189.678 453.837 182.514 445 182.514H391" stroke="#CDDDF0" stroke-width="2"/>
<path d="M321 207V198.514C321 189.678 328.163 182.514 337 182.514H391V157" stroke="#CDDDF0" stroke-width="2"/>
<path d="M531 381V372.024C531 363.188 523.837 356.024 515 356.024H461" stroke="#CDDDF0" stroke-width="2"/>
<path d="M391 381V372.024C391 363.188 398.163 356.024 407 356.024H461V330" stroke="#CDDDF0" stroke-width="2"/>
<path d="M216 206V197.514C216 188.678 208.837 181.514 200 181.514H146" stroke="#CDDDF0" stroke-width="2"/>
<path d="M76 206V197.514C76 188.678 83.1634 181.514 92 181.514H146V156" stroke="#CDDDF0" stroke-width="2"/>
<path d="M391 114V102.086C391 93.2496 383.837 86.0862 375 86.0862H269" stroke="#CDDDF0" stroke-width="2"/>
<path d="M147 114V102.086C147 93.2496 154.163 86.0862 163 86.0862H269V57" stroke="#CDDDF0" stroke-width="2"/>
<g filter="url(#filter0_d_438_4601)">
<rect x="229" y="1" width="80" height="56" rx="6" fill="white"/>
<rect x="249" y="21" width="40" height="16" rx="8" fill="#FABD62"/>
<rect x="229" y="1" width="80" height="56" rx="6" stroke="#2C749E" stroke-linejoin="bevel"/>
</g>
<g filter="url(#filter1_d_438_4601)">
<rect x="351" y="114" width="80" height="42" rx="6" fill="white"/>
<rect x="351" y="114" width="80" height="42" rx="6" stroke="#CDDDF0" stroke-linejoin="bevel"/>
</g>
<g filter="url(#filter2_d_438_4601)">
<rect x="281" y="208" width="80" height="42" rx="6" fill="white"/>
<rect x="281" y="208" width="80" height="42" rx="6" stroke="#CDDDF0" stroke-linejoin="bevel"/>
</g>
<g filter="url(#filter3_d_438_4601)">
<rect x="421" y="288" width="80" height="42" rx="6" fill="white"/>
<rect x="421" y="288" width="80" height="42" rx="6" stroke="#CDDDF0" stroke-linejoin="bevel"/>
</g>
<g filter="url(#filter4_d_438_4601)">
<rect x="106" y="114" width="80" height="42" rx="6" fill="white"/>
<rect x="106" y="114" width="80" height="42" rx="6" stroke="#CDDDF0" stroke-linejoin="bevel"/>
</g>
<path opacity="0.5" d="M269 32L496.5 209L423.5 246.5L269 32Z" fill="#FCDEB0"/>
<path opacity="0.5" d="M269 32L429.5 384L354 419.5L269 32Z" fill="#FCDEB0"/>
<path opacity="0.5" d="M269 32L569.5 382.5L494 421.5L269 32Z" fill="#FCDEB0"/>
<path opacity="0.5" d="M268.5 32L177.5 210L254.5 245L268.5 32Z" fill="#FCDEB0"/>
<path opacity="0.5" d="M268.5 32L37 210.5L112.5 245.5L268.5 32Z" fill="#FCDEB0"/>
<g filter="url(#filter5_d_438_4601)">
<path d="M256 213C256 209.686 253.314 207 250 207H182C178.686 207 176 209.686 176 213V243C176 246.314 178.686 249 182 249H250C253.314 249 256 246.314 256 243V213Z" fill="#FABD62"/>
<path d="M250 207.5H182V206.5H250V207.5ZM176.5 213V243H175.5V213H176.5ZM182 248.5H250V249.5H182V248.5ZM255.5 243V213H256.5V243H255.5ZM250 248.5C253.038 248.5 255.5 246.038 255.5 243H256.5C256.5 246.59 253.59 249.5 250 249.5V248.5ZM176.5 243C176.5 246.038 178.962 248.5 182 248.5V249.5C178.41 249.5 175.5 246.59 175.5 243H176.5ZM182 207.5C178.962 207.5 176.5 209.962 176.5 213H175.5C175.5 209.41 178.41 206.5 182 206.5V207.5ZM250 206.5C253.59 206.5 256.5 209.41 256.5 213H255.5C255.5 209.962 253.038 207.5 250 207.5V206.5Z" fill="#DB7D27"/>
</g>
<g filter="url(#filter6_d_438_4601)">
<path d="M501 214C501 210.686 498.314 208 495 208H427C423.686 208 421 210.686 421 214V244C421 247.314 423.686 250 427 250H495C498.314 250 501 247.314 501 244V214Z" fill="#FABD62"/>
<path d="M495 208.5H427V207.5H495V208.5ZM421.5 214V244H420.5V214H421.5ZM427 249.5H495V250.5H427V249.5ZM500.5 244V214H501.5V244H500.5ZM495 249.5C498.038 249.5 500.5 247.038 500.5 244H501.5C501.5 247.59 498.59 250.5 495 250.5V249.5ZM421.5 244C421.5 247.038 423.962 249.5 427 249.5V250.5C423.41 250.5 420.5 247.59 420.5 244H421.5ZM427 208.5C423.962 208.5 421.5 210.962 421.5 214H420.5C420.5 210.41 423.41 207.5 427 207.5V208.5ZM495 207.5C498.59 207.5 501.5 210.41 501.5 214H500.5C500.5 210.962 498.038 208.5 495 208.5V207.5Z" fill="#DB7D27"/>
</g>
<g filter="url(#filter7_d_438_4601)">
<path d="M572 387C572 383.686 569.314 381 566 381H498C494.686 381 492 383.686 492 387V417C492 420.314 494.686 423 498 423H566C569.314 423 572 420.314 572 417V387Z" fill="#FABD62"/>
<path d="M566 381.5H498V380.5H566V381.5ZM492.5 387V417H491.5V387H492.5ZM498 422.5H566V423.5H498V422.5ZM571.5 417V387H572.5V417H571.5ZM566 422.5C569.038 422.5 571.5 420.038 571.5 417H572.5C572.5 420.59 569.59 423.5 566 423.5V422.5ZM492.5 417C492.5 420.038 494.962 422.5 498 422.5V423.5C494.41 423.5 491.5 420.59 491.5 417H492.5ZM498 381.5C494.962 381.5 492.5 383.962 492.5 387H491.5C491.5 383.41 494.41 380.5 498 380.5V381.5ZM566 380.5C569.59 380.5 572.5 383.41 572.5 387H571.5C571.5 383.962 569.038 381.5 566 381.5V380.5Z" fill="#DB7D27"/>
</g>
<g filter="url(#filter8_d_438_4601)">
<path d="M116 213C116 209.686 113.314 207 110 207H42C38.6863 207 36 209.686 36 213V243C36 246.314 38.6863 249 42 249H110C113.314 249 116 246.314 116 243V213Z" fill="#FABD62"/>
<path d="M110 207.5H42V206.5H110V207.5ZM36.5 213V243H35.5V213H36.5ZM42 248.5H110V249.5H42V248.5ZM115.5 243V213H116.5V243H115.5ZM110 248.5C113.038 248.5 115.5 246.038 115.5 243H116.5C116.5 246.59 113.59 249.5 110 249.5V248.5ZM36.5 243C36.5 246.038 38.9624 248.5 42 248.5V249.5C38.4101 249.5 35.5 246.59 35.5 243H36.5ZM42 207.5C38.9624 207.5 36.5 209.962 36.5 213H35.5C35.5 209.41 38.4101 206.5 42 206.5V207.5ZM110 206.5C113.59 206.5 116.5 209.41 116.5 213H115.5C115.5 209.962 113.038 207.5 110 207.5V206.5Z" fill="#DB7D27"/>
</g>
<g filter="url(#filter9_d_438_4601)">
<path d="M432 387C432 383.686 429.314 381 426 381H358C354.686 381 352 383.686 352 387V417C352 420.314 354.686 423 358 423H426C429.314 423 432 420.314 432 417V387Z" fill="#FABD62"/>
<path d="M426 381.5H358V380.5H426V381.5ZM352.5 387V417H351.5V387H352.5ZM358 422.5H426V423.5H358V422.5ZM431.5 417V387H432.5V417H431.5ZM426 422.5C429.038 422.5 431.5 420.038 431.5 417H432.5C432.5 420.59 429.59 423.5 426 423.5V422.5ZM352.5 417C352.5 420.038 354.962 422.5 358 422.5V423.5C354.41 423.5 351.5 420.59 351.5 417H352.5ZM358 381.5C354.962 381.5 352.5 383.962 352.5 387H351.5C351.5 383.41 354.41 380.5 358 380.5V381.5ZM426 380.5C429.59 380.5 432.5 383.41 432.5 387H431.5C431.5 383.962 429.038 381.5 426 381.5V380.5Z" fill="#DB7D27"/>
</g>
<path opacity="0.4" d="M461 252L461 288" stroke="#CDDDF0" stroke-width="2"/>
<defs>
<filter id="filter0_d_438_4601" x="228.5" y="0.5" width="81" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.263177 0 0 0 0 0.455172 0 0 0 0 0.679167 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_438_4601"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_438_4601" result="shape"/>
</filter>
<filter id="filter1_d_438_4601" x="350.5" y="113.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.803922 0 0 0 0 0.866667 0 0 0 0 0.941176 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_438_4601"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_438_4601" result="shape"/>
</filter>
<filter id="filter2_d_438_4601" x="280.5" y="207.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.803922 0 0 0 0 0.866667 0 0 0 0 0.941176 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_438_4601"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_438_4601" result="shape"/>
</filter>
<filter id="filter3_d_438_4601" x="420.5" y="287.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.803922 0 0 0 0 0.866667 0 0 0 0 0.941176 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_438_4601"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_438_4601" result="shape"/>
</filter>
<filter id="filter4_d_438_4601" x="105.5" y="113.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.803922 0 0 0 0 0.866667 0 0 0 0 0.941176 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_438_4601"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_438_4601" result="shape"/>
</filter>
<filter id="filter5_d_438_4601" x="175.5" y="206.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.858333 0 0 0 0 0.491968 0 0 0 0 0.153785 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_438_4601"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_438_4601" result="shape"/>
</filter>
<filter id="filter6_d_438_4601" x="420.5" y="207.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.858333 0 0 0 0 0.491968 0 0 0 0 0.153785 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_438_4601"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_438_4601" result="shape"/>
</filter>
<filter id="filter7_d_438_4601" x="491.5" y="380.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.858333 0 0 0 0 0.491968 0 0 0 0 0.153785 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_438_4601"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_438_4601" result="shape"/>
</filter>
<filter id="filter8_d_438_4601" x="35.5" y="206.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.858333 0 0 0 0 0.491968 0 0 0 0 0.153785 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_438_4601"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_438_4601" result="shape"/>
</filter>
<filter id="filter9_d_438_4601" x="351.5" y="380.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.858333 0 0 0 0 0.491968 0 0 0 0 0.153785 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_438_4601"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_438_4601" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

49
beta/public/images/docs/diagrams/passing_data_lifting_state.dark.svg
View File

@ -0,0 +1,49 @@
<svg width="608" height="170" viewBox="0 0 608 170" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_437_4924)">
<rect x="264" y="1" width="80" height="56" rx="6" fill="#343A46"/>
<rect x="284" y="21" width="40" height="16" rx="8" fill="#8891EC"/>
<rect x="264" y="1" width="80" height="56" rx="6" stroke="white" stroke-linejoin="bevel"/>
</g>
<path d="M304 35L304 53" stroke="#8891EC" stroke-width="3"/>
<g filter="url(#filter1_d_437_4924)">
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 242 124)" fill="#8891EC"/>
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 242 124)" stroke="#575FB7" stroke-linejoin="bevel"/>
</g>
<path d="M199.368 132.121L186.791 119.394C186.745 119.346 186.701 119.296 186.662 119.242C185.974 118.315 186.637 117 187.791 117H210.424C213.976 117 215.766 121.285 213.269 123.812L205.058 132.121C203.492 133.705 200.934 133.705 199.368 132.121Z" fill="#23252F"/>
<g filter="url(#filter2_d_437_4924)">
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 446 124)" fill="#8891EC"/>
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 446 124)" stroke="#575FB7" stroke-linejoin="bevel"/>
</g>
<path d="M403.368 132.121L390.791 119.394C390.745 119.346 390.701 119.296 390.662 119.242C389.974 118.315 390.637 117 391.791 117H414.424C417.976 117 419.766 121.285 417.269 123.812L409.058 132.121C407.492 133.705 404.934 133.705 403.368 132.121Z" fill="#23252F"/>
<path d="M407.061 127.237C406.475 127.823 405.525 127.823 404.939 127.237L395.393 117.691C394.808 117.105 394.808 116.156 395.393 115.57C395.979 114.984 396.929 114.984 397.515 115.57L406 124.055L414.485 115.57C415.071 114.984 416.021 114.984 416.607 115.57C417.192 116.156 417.192 117.105 416.607 117.691L407.061 127.237ZM304 88.222V89.722H302.5V88.222H304ZM404.5 126.176V106.222H407.5V126.176H404.5ZM388 89.722H304V86.722H388V89.722ZM302.5 88.222V58H305.5V88.222H302.5ZM404.5 106.222C404.5 97.1093 397.113 89.722 388 89.722V86.722C398.77 86.722 407.5 95.4524 407.5 106.222H404.5Z" fill="#8891EC"/>
<path d="M200.939 127.237C201.525 127.823 202.475 127.823 203.061 127.237L212.607 117.691C213.192 117.105 213.192 116.156 212.607 115.57C212.021 114.984 211.071 114.984 210.485 115.57L202 124.055L193.515 115.57C192.929 114.984 191.979 114.984 191.393 115.57C190.808 116.156 190.808 117.105 191.393 117.691L200.939 127.237ZM304 88.222V89.722H305.5V88.222H304ZM203.5 126.176V106.222H200.5V126.176H203.5ZM220 89.722H304V86.722H220V89.722ZM305.5 88.222V58H302.5V88.222H305.5ZM203.5 106.222C203.5 97.1093 210.887 89.722 220 89.722V86.722C209.23 86.722 200.5 95.4524 200.5 106.222H203.5Z" fill="#8891EC"/>
<defs>
<filter id="filter0_d_437_4924" x="263.5" y="0.5" width="81" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.263177 0 0 0 0 0.455172 0 0 0 0 0.679167 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_437_4924"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_437_4924" result="shape"/>
</filter>
<filter id="filter1_d_437_4924" x="161.5" y="123.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.341176 0 0 0 0 0.372549 0 0 0 0 0.717647 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_437_4924"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_437_4924" result="shape"/>
</filter>
<filter id="filter2_d_437_4924" x="365.5" y="123.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.341176 0 0 0 0 0.372549 0 0 0 0 0.717647 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_437_4924"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_437_4924" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

49
beta/public/images/docs/diagrams/passing_data_lifting_state.svg
View File

@ -0,0 +1,49 @@
<svg width="608" height="170" viewBox="0 0 608 170" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_433_4835)">
<rect x="264" y="1" width="80" height="56" rx="6" fill="white"/>
<rect x="284" y="21" width="40" height="16" rx="8" fill="#6B76DB"/>
<rect x="264" y="1" width="80" height="56" rx="6" stroke="#2C749E" stroke-linejoin="bevel"/>
</g>
<path d="M304 35L304 53" stroke="#6B76DB" stroke-width="3"/>
<g filter="url(#filter1_d_433_4835)">
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 242 124)" fill="#6B76DB"/>
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 242 124)" stroke="#575FB7" stroke-linejoin="bevel"/>
</g>
<path d="M199.368 132.121L186.791 119.394C186.745 119.346 186.701 119.296 186.662 119.242C185.974 118.315 186.637 117 187.791 117H210.424C213.976 117 215.766 121.285 213.269 123.812L205.058 132.121C203.492 133.705 200.934 133.705 199.368 132.121Z" fill="white"/>
<g filter="url(#filter2_d_433_4835)">
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 446 124)" fill="#6B76DB"/>
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 446 124)" stroke="#575FB7" stroke-linejoin="bevel"/>
</g>
<path d="M403.368 132.121L390.791 119.394C390.745 119.346 390.701 119.296 390.662 119.242C389.974 118.315 390.637 117 391.791 117H414.424C417.976 117 419.766 121.285 417.269 123.812L409.058 132.121C407.492 133.705 404.934 133.705 403.368 132.121Z" fill="white"/>
<path d="M407.061 127.237C406.475 127.823 405.525 127.823 404.939 127.237L395.393 117.691C394.808 117.105 394.808 116.156 395.393 115.57C395.979 114.984 396.929 114.984 397.515 115.57L406 124.055L414.485 115.57C415.071 114.984 416.021 114.984 416.607 115.57C417.192 116.156 417.192 117.105 416.607 117.691L407.061 127.237ZM304 88.222V89.722H302.5V88.222H304ZM404.5 126.176V106.222H407.5V126.176H404.5ZM388 89.722H304V86.722H388V89.722ZM302.5 88.222V58H305.5V88.222H302.5ZM404.5 106.222C404.5 97.1093 397.113 89.722 388 89.722V86.722C398.77 86.722 407.5 95.4524 407.5 106.222H404.5Z" fill="#6B76DB"/>
<path d="M200.939 127.237C201.525 127.823 202.475 127.823 203.061 127.237L212.607 117.691C213.192 117.105 213.192 116.156 212.607 115.57C212.021 114.984 211.071 114.984 210.485 115.57L202 124.055L193.515 115.57C192.929 114.984 191.979 114.984 191.393 115.57C190.808 116.156 190.808 117.105 191.393 117.691L200.939 127.237ZM304 88.222V89.722H305.5V88.222H304ZM203.5 126.176V106.222H200.5V126.176H203.5ZM220 89.722H304V86.722H220V89.722ZM305.5 88.222V58H302.5V88.222H305.5ZM203.5 106.222C203.5 97.1093 210.887 89.722 220 89.722V86.722C209.23 86.722 200.5 95.4524 200.5 106.222H203.5Z" fill="#6B76DB"/>
<defs>
<filter id="filter0_d_433_4835" x="263.5" y="0.5" width="81" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.263177 0 0 0 0 0.455172 0 0 0 0 0.679167 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_433_4835"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_433_4835" result="shape"/>
</filter>
<filter id="filter1_d_433_4835" x="161.5" y="123.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.341176 0 0 0 0 0.372549 0 0 0 0 0.717647 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_433_4835"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_433_4835" result="shape"/>
</filter>
<filter id="filter2_d_433_4835" x="365.5" y="123.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.341176 0 0 0 0 0.372549 0 0 0 0 0.717647 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_433_4835"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_433_4835" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

153
beta/public/images/docs/diagrams/passing_data_prop_drilling.dark.svg
View File

@ -0,0 +1,153 @@
<svg width="608" height="435" viewBox="0 0 608 435" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_437_4941)">
<rect x="264" y="1" width="80" height="56" rx="6" fill="#343A46"/>
<rect x="284" y="21" width="40" height="16" rx="8" fill="#8891EC"/>
<rect x="264" y="1" width="80" height="56" rx="6" stroke="white" stroke-linejoin="bevel"/>
</g>
<g filter="url(#filter1_d_437_4941)">
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 466 389)" fill="#8891EC"/>
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 466 389)" stroke="#575FB7" stroke-linejoin="bevel"/>
</g>
<path d="M423.368 397.121L410.791 384.394C410.745 384.346 410.701 384.296 410.662 384.242C409.974 383.315 410.637 382 411.791 382H434.424C437.976 382 439.766 386.285 437.269 388.812L429.058 397.121C427.492 398.705 424.934 398.705 423.368 397.121Z" fill="#23252F"/>
<g filter="url(#filter2_d_437_4941)">
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 606 389)" fill="#8891EC"/>
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 606 389)" stroke="#575FB7" stroke-linejoin="bevel"/>
</g>
<path d="M563.368 397.121L550.791 384.394C550.745 384.346 550.701 384.296 550.662 384.242C549.974 383.315 550.637 382 551.791 382H574.424C577.976 382 579.766 386.285 577.269 388.812L569.058 397.121C567.492 398.705 564.934 398.705 563.368 397.121Z" fill="#23252F"/>
<path d="M566.061 392.061C565.475 392.646 564.525 392.646 563.939 392.061L554.393 382.515C553.808 381.929 553.808 380.979 554.393 380.393C554.979 379.808 555.929 379.808 556.515 380.393L565 388.879L573.485 380.393C574.071 379.808 575.021 379.808 575.607 380.393C576.192 380.979 576.192 381.929 575.607 382.515L566.061 392.061ZM495.5 357.041V358.541H494V357.041H495.5ZM563.5 391V375.041H566.5V391H563.5ZM547 358.541H495.5V355.541H547V358.541ZM494 357.041V330H497V357.041H494ZM563.5 375.041C563.5 365.928 556.113 358.541 547 358.541V355.541C557.77 355.541 566.5 364.271 566.5 375.041H563.5Z" fill="#8891EC"/>
<path d="M424.939 392.061C425.525 392.646 426.475 392.646 427.061 392.061L436.607 382.515C437.192 381.929 437.192 380.979 436.607 380.393C436.021 379.808 435.071 379.808 434.485 380.393L426 388.879L417.515 380.393C416.929 379.808 415.979 379.808 415.393 380.393C414.808 380.979 414.808 381.929 415.393 382.515L424.939 392.061ZM495.5 357.041V358.541H497V357.041H495.5ZM427.5 391V375.041H424.5V391H427.5ZM444 358.541H495.5V355.541H444V358.541ZM497 357.041V330H494V357.041H497ZM427.5 375.041C427.5 365.928 434.887 358.541 444 358.541V355.541C433.23 355.541 424.5 364.271 424.5 375.041H427.5Z" fill="#8891EC"/>
<g filter="url(#filter3_d_437_4941)">
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 536 215)" fill="#8891EC"/>
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 536 215)" stroke="#575FB7" stroke-linejoin="bevel"/>
</g>
<path d="M493.368 223.121L480.791 210.394C480.745 210.346 480.701 210.296 480.662 210.242C479.974 209.315 480.637 208 481.791 208H504.424C507.976 208 509.766 212.285 507.269 214.812L499.058 223.121C497.492 224.705 494.934 224.705 493.368 223.121Z" fill="#23252F"/>
<path d="M496 258L496 288" stroke="#8891EC" stroke-width="4"/>
<path d="M497.061 219.061C496.475 219.646 495.525 219.646 494.939 219.061L485.393 209.515C484.808 208.929 484.808 207.979 485.393 207.393C485.979 206.808 486.929 206.808 487.515 207.393L496 215.879L504.485 207.393C505.071 206.808 506.021 206.808 506.607 207.393C507.192 207.979 507.192 208.929 506.607 209.515L497.061 219.061ZM426 184.041V185.541H424.5V184.041H426ZM494.5 218V202.041H497.5V218H494.5ZM478 185.541H426V182.541H478V185.541ZM424.5 184.041V157H427.5V184.041H424.5ZM494.5 202.041C494.5 192.928 487.113 185.541 478 185.541V182.541C488.77 182.541 497.5 191.271 497.5 202.041H494.5Z" fill="#8891EC"/>
<path opacity="0.4" d="M356 208V202.041C356 192.1 364.059 184.041 374 184.041H426V157" stroke="#8891EC" stroke-width="3"/>
<g filter="url(#filter4_d_437_4941)">
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 151 215)" fill="#8891EC"/>
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 151 215)" stroke="#575FB7" stroke-linejoin="bevel"/>
</g>
<path d="M108.368 223.121L95.7914 210.394C95.7447 210.346 95.7015 210.296 95.6619 210.242C94.9745 209.315 95.6366 208 96.7912 208H119.424C122.976 208 124.766 212.285 122.269 214.812L114.058 223.121C112.492 224.705 109.934 224.705 108.368 223.121Z" fill="#23252F"/>
<g filter="url(#filter5_d_437_4941)">
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 291 215)" fill="#8891EC"/>
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 291 215)" stroke="#575FB7" stroke-linejoin="bevel"/>
</g>
<path d="M248.368 223.121L235.791 210.394C235.745 210.346 235.701 210.296 235.662 210.242C234.974 209.315 235.637 208 236.791 208H259.424C262.976 208 264.766 212.285 262.269 214.812L254.058 223.121C252.492 224.705 249.934 224.705 248.368 223.121Z" fill="#23252F"/>
<path d="M252.061 218.061C251.475 218.646 250.525 218.646 249.939 218.061L240.393 208.515C239.808 207.929 239.808 206.979 240.393 206.393C240.979 205.808 241.929 205.808 242.515 206.393L251 214.879L259.485 206.393C260.071 205.808 261.021 205.808 261.607 206.393C262.192 206.979 262.192 207.929 261.607 208.515L252.061 218.061ZM181 183.041V184.541H179.5V183.041H181ZM249.5 217V201.041H252.5V217H249.5ZM233 184.541H181V181.541H233V184.541ZM179.5 183.041V156H182.5V183.041H179.5ZM249.5 201.041C249.5 191.928 242.113 184.541 233 184.541V181.541C243.77 181.541 252.5 190.271 252.5 201.041H249.5Z" fill="#8891EC"/>
<path d="M109.939 218.061C110.525 218.646 111.475 218.646 112.061 218.061L121.607 208.515C122.192 207.929 122.192 206.979 121.607 206.393C121.021 205.808 120.071 205.808 119.485 206.393L111 214.879L102.515 206.393C101.929 205.808 100.979 205.808 100.393 206.393C99.8076 206.979 99.8076 207.929 100.393 208.515L109.939 218.061ZM181 183.041V184.541H182.5V183.041H181ZM112.5 217V201.041H109.5V217H112.5ZM129 184.541H181V181.541H129V184.541ZM182.5 183.041V156H179.5V183.041H182.5ZM112.5 201.041C112.5 191.928 119.887 184.541 129 184.541V181.541C118.23 181.541 109.5 190.271 109.5 201.041H112.5Z" fill="#8891EC"/>
<path d="M304 35L304 53" stroke="#8891EC" stroke-width="3"/>
<path d="M426 114V105.222C426 95.2809 417.941 87.222 408 87.222H303.5V57" stroke="#8891EC" stroke-width="3"/>
<path d="M181 114V105.222C181 95.2809 189.059 87.222 199 87.222H303.5V57" stroke="#8891EC" stroke-width="3"/>
<g filter="url(#filter6_d_437_4941)">
<rect x="316" y="208" width="80" height="42" rx="6" fill="#343A46"/>
<rect x="316" y="208" width="80" height="42" rx="6" stroke="white" stroke-linejoin="bevel"/>
</g>
<g filter="url(#filter7_d_437_4941)">
<rect x="141" y="114" width="80" height="42" rx="6" fill="#343A46"/>
<path d="M181 120L181 150" stroke="#8891EC" stroke-width="3"/>
<rect x="141" y="114" width="80" height="42" rx="6" stroke="white" stroke-linejoin="bevel"/>
</g>
<g filter="url(#filter8_d_437_4941)">
<rect x="456" y="287" width="80" height="42" rx="6" fill="#343A46"/>
<path d="M496 293L496 323" stroke="#8891EC" stroke-width="3"/>
<rect x="456" y="287" width="80" height="42" rx="6" stroke="white" stroke-linejoin="bevel"/>
</g>
<g filter="url(#filter9_d_437_4941)">
<rect x="386" y="114" width="80" height="42" rx="6" fill="#343A46"/>
<path d="M426 120L426 150" stroke="#8891EC" stroke-width="3"/>
<rect x="386" y="114" width="80" height="42" rx="6" stroke="white" stroke-linejoin="bevel"/>
</g>
<defs>
<filter id="filter0_d_437_4941" x="263.5" y="0.5" width="81" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_437_4941"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_437_4941" result="shape"/>
</filter>
<filter id="filter1_d_437_4941" x="385.5" y="388.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.341176 0 0 0 0 0.372549 0 0 0 0 0.717647 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_437_4941"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_437_4941" result="shape"/>
</filter>
<filter id="filter2_d_437_4941" x="525.5" y="388.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.341176 0 0 0 0 0.372549 0 0 0 0 0.717647 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_437_4941"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_437_4941" result="shape"/>
</filter>
<filter id="filter3_d_437_4941" x="455.5" y="214.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.341176 0 0 0 0 0.372549 0 0 0 0 0.717647 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_437_4941"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_437_4941" result="shape"/>
</filter>
<filter id="filter4_d_437_4941" x="70.5" y="214.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.341176 0 0 0 0 0.372549 0 0 0 0 0.717647 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_437_4941"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_437_4941" result="shape"/>
</filter>
<filter id="filter5_d_437_4941" x="210.5" y="214.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.341176 0 0 0 0 0.372549 0 0 0 0 0.717647 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_437_4941"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_437_4941" result="shape"/>
</filter>
<filter id="filter6_d_437_4941" x="315.5" y="207.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_437_4941"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_437_4941" result="shape"/>
</filter>
<filter id="filter7_d_437_4941" x="140.5" y="113.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_437_4941"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_437_4941" result="shape"/>
</filter>
<filter id="filter8_d_437_4941" x="455.5" y="286.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_437_4941"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_437_4941" result="shape"/>
</filter>
<filter id="filter9_d_437_4941" x="385.5" y="113.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_437_4941"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_437_4941" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

153
beta/public/images/docs/diagrams/passing_data_prop_drilling.svg
View File

@ -0,0 +1,153 @@
<svg width="608" height="435" viewBox="0 0 608 435" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_433_4852)">
<rect x="264" y="1" width="80" height="56" rx="6" fill="white"/>
<rect x="284" y="21" width="40" height="16" rx="8" fill="#6B76DB"/>
<rect x="264" y="1" width="80" height="56" rx="6" stroke="#2C749E" stroke-linejoin="bevel"/>
</g>
<g filter="url(#filter1_d_433_4852)">
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 466 389)" fill="#6B76DB"/>
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 466 389)" stroke="#575FB7" stroke-linejoin="bevel"/>
</g>
<path d="M423.368 397.121L410.791 384.394C410.745 384.346 410.701 384.296 410.662 384.242C409.974 383.315 410.637 382 411.791 382H434.424C437.976 382 439.766 386.285 437.269 388.812L429.058 397.121C427.492 398.705 424.934 398.705 423.368 397.121Z" fill="white"/>
<g filter="url(#filter2_d_433_4852)">
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 606 389)" fill="#6B76DB"/>
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 606 389)" stroke="#575FB7" stroke-linejoin="bevel"/>
</g>
<path d="M563.368 397.121L550.791 384.394C550.745 384.346 550.701 384.296 550.662 384.242C549.974 383.315 550.637 382 551.791 382H574.424C577.976 382 579.766 386.285 577.269 388.812L569.058 397.121C567.492 398.705 564.934 398.705 563.368 397.121Z" fill="white"/>
<path d="M566.061 392.061C565.475 392.646 564.525 392.646 563.939 392.061L554.393 382.515C553.808 381.929 553.808 380.979 554.393 380.393C554.979 379.808 555.929 379.808 556.515 380.393L565 388.879L573.485 380.393C574.071 379.808 575.021 379.808 575.607 380.393C576.192 380.979 576.192 381.929 575.607 382.515L566.061 392.061ZM495.5 357.041V358.541H494V357.041H495.5ZM563.5 391V375.041H566.5V391H563.5ZM547 358.541H495.5V355.541H547V358.541ZM494 357.041V330H497V357.041H494ZM563.5 375.041C563.5 365.928 556.113 358.541 547 358.541V355.541C557.77 355.541 566.5 364.271 566.5 375.041H563.5Z" fill="#6B76DB"/>
<path d="M424.939 392.061C425.525 392.646 426.475 392.646 427.061 392.061L436.607 382.515C437.192 381.929 437.192 380.979 436.607 380.393C436.021 379.808 435.071 379.808 434.485 380.393L426 388.879L417.515 380.393C416.929 379.808 415.979 379.808 415.393 380.393C414.808 380.979 414.808 381.929 415.393 382.515L424.939 392.061ZM495.5 357.041V358.541H497V357.041H495.5ZM427.5 391V375.041H424.5V391H427.5ZM444 358.541H495.5V355.541H444V358.541ZM497 357.041V330H494V357.041H497ZM427.5 375.041C427.5 365.928 434.887 358.541 444 358.541V355.541C433.23 355.541 424.5 364.271 424.5 375.041H427.5Z" fill="#6B76DB"/>
<g filter="url(#filter3_d_433_4852)">
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 536 215)" fill="#6B76DB"/>
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 536 215)" stroke="#575FB7" stroke-linejoin="bevel"/>
</g>
<path d="M493.368 223.121L480.791 210.394C480.745 210.346 480.701 210.296 480.662 210.242C479.974 209.315 480.637 208 481.791 208H504.424C507.976 208 509.766 212.285 507.269 214.812L499.058 223.121C497.492 224.705 494.934 224.705 493.368 223.121Z" fill="white"/>
<path d="M496 258L496 288" stroke="#6B76DB" stroke-width="4"/>
<path d="M497.061 219.061C496.475 219.646 495.525 219.646 494.939 219.061L485.393 209.515C484.808 208.929 484.808 207.979 485.393 207.393C485.979 206.808 486.929 206.808 487.515 207.393L496 215.879L504.485 207.393C505.071 206.808 506.021 206.808 506.607 207.393C507.192 207.979 507.192 208.929 506.607 209.515L497.061 219.061ZM426 184.041V185.541H424.5V184.041H426ZM494.5 218V202.041H497.5V218H494.5ZM478 185.541H426V182.541H478V185.541ZM424.5 184.041V157H427.5V184.041H424.5ZM494.5 202.041C494.5 192.928 487.113 185.541 478 185.541V182.541C488.77 182.541 497.5 191.271 497.5 202.041H494.5Z" fill="#6B76DB"/>
<path opacity="0.4" d="M356 208V202.041C356 192.1 364.059 184.041 374 184.041H426V157" stroke="#6B76DB" stroke-width="3"/>
<g filter="url(#filter4_d_433_4852)">
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 151 215)" fill="#6B76DB"/>
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 151 215)" stroke="#575FB7" stroke-linejoin="bevel"/>
</g>
<path d="M108.368 223.121L95.7914 210.394C95.7447 210.346 95.7015 210.296 95.6619 210.242C94.9745 209.315 95.6366 208 96.7912 208H119.424C122.976 208 124.766 212.285 122.269 214.812L114.058 223.121C112.492 224.705 109.934 224.705 108.368 223.121Z" fill="white"/>
<g filter="url(#filter5_d_433_4852)">
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 291 215)" fill="#6B76DB"/>
<rect width="80" height="42" rx="6" transform="matrix(-1 0 0 1 291 215)" stroke="#575FB7" stroke-linejoin="bevel"/>
</g>
<path d="M248.368 223.121L235.791 210.394C235.745 210.346 235.701 210.296 235.662 210.242C234.974 209.315 235.637 208 236.791 208H259.424C262.976 208 264.766 212.285 262.269 214.812L254.058 223.121C252.492 224.705 249.934 224.705 248.368 223.121Z" fill="white"/>
<path d="M252.061 218.061C251.475 218.646 250.525 218.646 249.939 218.061L240.393 208.515C239.808 207.929 239.808 206.979 240.393 206.393C240.979 205.808 241.929 205.808 242.515 206.393L251 214.879L259.485 206.393C260.071 205.808 261.021 205.808 261.607 206.393C262.192 206.979 262.192 207.929 261.607 208.515L252.061 218.061ZM181 183.041V184.541H179.5V183.041H181ZM249.5 217V201.041H252.5V217H249.5ZM233 184.541H181V181.541H233V184.541ZM179.5 183.041V156H182.5V183.041H179.5ZM249.5 201.041C249.5 191.928 242.113 184.541 233 184.541V181.541C243.77 181.541 252.5 190.271 252.5 201.041H249.5Z" fill="#6B76DB"/>
<path d="M109.939 218.061C110.525 218.646 111.475 218.646 112.061 218.061L121.607 208.515C122.192 207.929 122.192 206.979 121.607 206.393C121.021 205.808 120.071 205.808 119.485 206.393L111 214.879L102.515 206.393C101.929 205.808 100.979 205.808 100.393 206.393C99.8076 206.979 99.8076 207.929 100.393 208.515L109.939 218.061ZM181 183.041V184.541H182.5V183.041H181ZM112.5 217V201.041H109.5V217H112.5ZM129 184.541H181V181.541H129V184.541ZM182.5 183.041V156H179.5V183.041H182.5ZM112.5 201.041C112.5 191.928 119.887 184.541 129 184.541V181.541C118.23 181.541 109.5 190.271 109.5 201.041H112.5Z" fill="#6B76DB"/>
<path d="M304 35L304 53" stroke="#6B76DB" stroke-width="3"/>
<path d="M426 114V105.222C426 95.2809 417.941 87.222 408 87.222H303.5V57" stroke="#6B76DB" stroke-width="3"/>
<path d="M181 114V105.222C181 95.2809 189.059 87.222 199 87.222H303.5V57" stroke="#6B76DB" stroke-width="3"/>
<g filter="url(#filter6_d_433_4852)">
<rect x="316" y="208" width="80" height="42" rx="6" fill="white"/>
<rect x="316" y="208" width="80" height="42" rx="6" stroke="#2C749E" stroke-linejoin="bevel"/>
</g>
<g filter="url(#filter7_d_433_4852)">
<rect x="141" y="114" width="80" height="42" rx="6" fill="white"/>
<path d="M181 120L181 150" stroke="#6B76DB" stroke-width="3"/>
<rect x="141" y="114" width="80" height="42" rx="6" stroke="#2C749E" stroke-linejoin="bevel"/>
</g>
<g filter="url(#filter8_d_433_4852)">
<rect x="456" y="287" width="80" height="42" rx="6" fill="white"/>
<path d="M496 293L496 323" stroke="#6B76DB" stroke-width="3"/>
<rect x="456" y="287" width="80" height="42" rx="6" stroke="#2C749E" stroke-linejoin="bevel"/>
</g>
<g filter="url(#filter9_d_433_4852)">
<rect x="386" y="114" width="80" height="42" rx="6" fill="white"/>
<path d="M426 120L426 150" stroke="#6B76DB" stroke-width="3"/>
<rect x="386" y="114" width="80" height="42" rx="6" stroke="#2C749E" stroke-linejoin="bevel"/>
</g>
<defs>
<filter id="filter0_d_433_4852" x="263.5" y="0.5" width="81" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.263177 0 0 0 0 0.455172 0 0 0 0 0.679167 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_433_4852"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_433_4852" result="shape"/>
</filter>
<filter id="filter1_d_433_4852" x="385.5" y="388.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.341176 0 0 0 0 0.372549 0 0 0 0 0.717647 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_433_4852"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_433_4852" result="shape"/>
</filter>
<filter id="filter2_d_433_4852" x="525.5" y="388.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.341176 0 0 0 0 0.372549 0 0 0 0 0.717647 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_433_4852"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_433_4852" result="shape"/>
</filter>
<filter id="filter3_d_433_4852" x="455.5" y="214.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.341176 0 0 0 0 0.372549 0 0 0 0 0.717647 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_433_4852"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_433_4852" result="shape"/>
</filter>
<filter id="filter4_d_433_4852" x="70.5" y="214.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.341176 0 0 0 0 0.372549 0 0 0 0 0.717647 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_433_4852"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_433_4852" result="shape"/>
</filter>
<filter id="filter5_d_433_4852" x="210.5" y="214.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.341176 0 0 0 0 0.372549 0 0 0 0 0.717647 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_433_4852"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_433_4852" result="shape"/>
</filter>
<filter id="filter6_d_433_4852" x="315.5" y="207.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.263177 0 0 0 0 0.455172 0 0 0 0 0.679167 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_433_4852"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_433_4852" result="shape"/>
</filter>
<filter id="filter7_d_433_4852" x="140.5" y="113.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.263177 0 0 0 0 0.455172 0 0 0 0 0.679167 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_433_4852"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_433_4852" result="shape"/>
</filter>
<filter id="filter8_d_433_4852" x="455.5" y="286.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.263177 0 0 0 0 0.455172 0 0 0 0 0.679167 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_433_4852"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_433_4852" result="shape"/>
</filter>
<filter id="filter9_d_433_4852" x="385.5" y="113.5" width="81" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.263177 0 0 0 0 0.455172 0 0 0 0 0.679167 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_433_4852"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_433_4852" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

27
beta/src/components/MDX/Diagram.tsx
View File

@ -11,11 +11,28 @@ interface DiagramProps {
height: number;
width: number;
children: string;
captionPosition: 'top' | 'bottom' | null;
}
export function Diagram({name, alt, height, width, children}: DiagramProps) {
function Caption({text}: {text: string}) {
return (
<figure className="flex flex-col px-0 p-0 sm:p-10">
<figcaption className="p-1 sm:p-2 mt-0 sm:mt-0 text-gray-40 text-base lg:text-lg text-center leading-tight">
{text}
</figcaption>
);
}
export function Diagram({
name,
alt,
height,
width,
children,
captionPosition,
}: DiagramProps) {
return (
<figure className="flex flex-col px-0 p-0 sm:p-10 first:mt-0 mt-10 sm:mt-0">
{captionPosition === 'top' && <Caption text={children} />}
<div className="dark-image">
<Image
src={`/images/docs/diagrams/${name}.dark.svg`}
@ -32,9 +49,9 @@ export function Diagram({name, alt, height, width, children}: DiagramProps) {
width={width}
/>
</div>
<figcaption className="p-1 sm:p-2 mt-0 sm:mt-0 text-gray-40 text-base lg:text-lg text-center leading-none sm:leading-3">
{children}
</figcaption>
{(!captionPosition || captionPosition === 'bottom') && (
<Caption text={children} />
)}
</figure>
);
}

2
beta/src/components/MDX/DiagramGroup.tsx
View File

@ -11,7 +11,7 @@ interface DiagramGroupProps {
export function DiagramGroup({children}: DiagramGroupProps) {
return (
<div className="flex flex-col sm:flex-row px-6 py-2 sm:p-0 sm:space-y-0 justify-center items-center">
<div className="flex flex-col sm:flex-row px-6 py-2 sm:p-0 sm:space-y-0 justify-center items-start">
{children}
</div>
);

37
beta/src/pages/learn/passing-data-deeply-with-context.md
View File

@ -19,9 +19,24 @@ Usually, you will pass information from a parent component to a child component
## The problem with passing props {/*the-problem-with-passing-props*/}
[Passing props](/learn/passing-props-to-a-component) is a great way to explicitly pipe data through your UI tree to the components that use it. But it can become verbose and inconvenient when you need to pass some prop deeply through the tree, or if many components need the same prop. The nearest common ancestor could be far removed from the components that need data, and [lifting state up](/learn/sharing-state-between-components) that high can lead to a situation sometimes called "prop drilling."
[Passing props](/learn/passing-props-to-a-component) is a great way to explicitly pipe data through your UI tree to the components that use it.
<img alt="Lifting state up vs prop drilling" src="/images/docs/sketches/s_prop-drilling.png" />
But passing props can become verbose and inconvenient when you need to pass some prop deeply through the tree, or if many components need the same prop. The nearest common ancestor could be far removed from the components that need data, and [lifting state up](/learn/sharing-state-between-components) that high can lead to a situation sometimes called "prop drilling."
<DiagramGroup>
<Diagram name="passing_data_lifting_state" height={160} width={608} captionPosition="top" alt="Diagram with a tree of three components. The parent contains a bubble representing a value highlighted in purple. The value flows down to each of the two children, both highlighted in purple." >
Lifting state up
</Diagram>
<Diagram name="passing_data_prop_drilling" height={430} width={608} captionPosition="top" alt="Diagram with a tree of ten nodes, each node with two children or less. The root node contains a bubble representing a value highlighted in purple. The value flows down through the two children, each of which pass the value but do not contain it. The left child passes the value down to two children which are both highlighted purple. The right child of the root passes the value through to one of its two children - the right one, which is highlighted purple. That child passed the value through its single child, which passes it down to both of its two children, which are highlighted purple.">
Prop drilling
</Diagram>
</DiagramGroup>
Wouldn't it be great if there were a way to "teleport" data to the components in the tree that need it without passing props? With React's context feature, there is!
@ -195,7 +210,21 @@ You can't do it with props alone. This is where context comes into play. You wil
Context lets a parent--even a distant one!--provide some data to the entire tree inside of it.
<img alt="Context provides data to the entire tree" src="/images/docs/sketches/s_providing-context.png" />
<DiagramGroup>
<Diagram name="passing_data_context_close" height={160} width={608} captionPosition="top" alt="Diagram with a tree of three components. The parent contains a bubble representing a value highlighted in orange which projects down to the two children, each highlighted in orange." >
Using context in close children
</Diagram>
<Diagram name="passing_data_context_far" height={430} width={608} captionPosition="top" alt="Diagram with a tree of ten nodes, each node with two children or less. The root parent node contains a bubble representing a value highlighted in orange. The value projects down directly to four leaves and one intermediate component in the tree, which are all highlighted in orange. None of the other intermediate components are highlighted.">
Using context in distant children
</Diagram>
</DiagramGroup>
### Step 1: Create the context {/*step-1-create-the-context*/}
@ -829,8 +858,6 @@ Context is not limited to static values. If you pass a different value on the ne
In general, if some information is needed by distant components in different parts of the tree, it's a good indication that context will help you.
<img alt="Context provides data to the entire tree" src="/images/docs/sketches/s_lifting-v-providing.png" />
<Recap>
* Context lets a component provide some information to the entire tree below it.

Write Preview
Loading…
Cancel
Save