login, signup, logout redesign

This commit is contained in:
Anton 2023-08-19 00:01:46 +02:00
parent caea879aab
commit 53bcd553ed
5 changed files with 912 additions and 0 deletions

707
dependency-graph.svg Normal file
View File

@ -0,0 +1,707 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.43.0 (0)
-->
<!-- Title: dependency&#45;cruiser output Pages: 1 -->
<svg width="572pt" height="988pt"
viewBox="0.00 0.00 572.00 988.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 984)">
<title>dependency&#45;cruiser output</title>
<polygon fill="white" stroke="transparent" points="-4,4 -4,-984 568,-984 568,4 -4,4"/>
<g id="clust1" class="cluster">
<title>cluster_src</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M16,-8C16,-8 544,-8 544,-8 550,-8 556,-14 556,-20 556,-20 556,-960 556,-960 556,-966 550,-972 544,-972 544,-972 16,-972 16,-972 10,-972 4,-966 4,-960 4,-960 4,-20 4,-20 4,-14 10,-8 16,-8"/>
<text text-anchor="middle" x="280" y="-960.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">src</text>
</g>
<g id="clust2" class="cluster">
<title>cluster_src/Components</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M119,-16C119,-16 534.5,-16 534.5,-16 540.5,-16 546.5,-22 546.5,-28 546.5,-28 546.5,-758 546.5,-758 546.5,-764 540.5,-770 534.5,-770 534.5,-770 119,-770 119,-770 113,-770 107,-764 107,-758 107,-758 107,-28 107,-28 107,-22 113,-16 119,-16"/>
<text text-anchor="middle" x="326.75" y="-758.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Components</text>
</g>
<g id="clust3" class="cluster">
<title>cluster_src/Components/AppShell</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-632C127,-632 399,-632 399,-632 405,-632 411,-638 411,-644 411,-644 411,-732 411,-732 411,-738 405,-744 399,-744 399,-744 127,-744 127,-744 121,-744 115,-738 115,-732 115,-732 115,-644 115,-644 115,-638 121,-632 127,-632"/>
<text text-anchor="middle" x="263" y="-732.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">AppShell</text>
</g>
<g id="clust4" class="cluster">
<title>cluster_src/Components/Auth</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-572C127,-572 266.5,-572 266.5,-572 272.5,-572 278.5,-578 278.5,-584 278.5,-584 278.5,-612 278.5,-612 278.5,-618 272.5,-624 266.5,-624 266.5,-624 127,-624 127,-624 121,-624 115,-618 115,-612 115,-612 115,-584 115,-584 115,-578 121,-572 127,-572"/>
<text text-anchor="middle" x="196.75" y="-612.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Auth</text>
</g>
<g id="clust5" class="cluster">
<title>cluster_src/Components/Gaming</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-482C127,-482 263,-482 263,-482 269,-482 275,-488 275,-494 275,-494 275,-552 275,-552 275,-558 269,-564 263,-564 263,-564 127,-564 127,-564 121,-564 115,-558 115,-552 115,-552 115,-494 115,-494 115,-488 121,-482 127,-482"/>
<text text-anchor="middle" x="195" y="-552.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Gaming</text>
</g>
<g id="clust6" class="cluster">
<title>cluster_src/Components/Input</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M303,-98C303,-98 391,-98 391,-98 397,-98 403,-104 403,-110 403,-110 403,-168 403,-168 403,-174 397,-180 391,-180 391,-180 303,-180 303,-180 297,-180 291,-174 291,-168 291,-168 291,-110 291,-110 291,-104 297,-98 303,-98"/>
<text text-anchor="middle" x="347" y="-168.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Input</text>
</g>
<g id="clust7" class="cluster">
<title>cluster_src/Components/Map</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-188C127,-188 526.5,-188 526.5,-188 532.5,-188 538.5,-194 538.5,-200 538.5,-200 538.5,-462 538.5,-462 538.5,-468 532.5,-474 526.5,-474 526.5,-474 127,-474 127,-474 121,-474 115,-468 115,-462 115,-462 115,-200 115,-200 115,-194 121,-188 127,-188"/>
<text text-anchor="middle" x="326.75" y="-462.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Map</text>
</g>
<g id="clust8" class="cluster">
<title>cluster_src/Components/Map/Subcomponents</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M298.5,-336C298.5,-336 395.5,-336 395.5,-336 401.5,-336 407.5,-342 407.5,-348 407.5,-348 407.5,-436 407.5,-436 407.5,-442 401.5,-448 395.5,-448 395.5,-448 298.5,-448 298.5,-448 292.5,-448 286.5,-442 286.5,-436 286.5,-436 286.5,-348 286.5,-348 286.5,-342 292.5,-336 298.5,-336"/>
<text text-anchor="middle" x="347" y="-436.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Subcomponents</text>
</g>
<g id="clust9" class="cluster">
<title>cluster_src/Components/Map/hooks</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M448.5,-266C448.5,-266 518.5,-266 518.5,-266 524.5,-266 530.5,-272 530.5,-278 530.5,-278 530.5,-366 530.5,-366 530.5,-372 524.5,-378 518.5,-378 518.5,-378 448.5,-378 448.5,-378 442.5,-378 436.5,-372 436.5,-366 436.5,-366 436.5,-278 436.5,-278 436.5,-272 442.5,-266 448.5,-266"/>
<text text-anchor="middle" x="483.5" y="-366.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">hooks</text>
</g>
<g id="clust10" class="cluster">
<title>cluster_src/Components/Profile</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-113C127,-113 266.5,-113 266.5,-113 272.5,-113 278.5,-119 278.5,-125 278.5,-125 278.5,-153 278.5,-153 278.5,-159 272.5,-165 266.5,-165 266.5,-165 127,-165 127,-165 121,-165 115,-159 115,-153 115,-153 115,-125 115,-125 115,-119 121,-113 127,-113"/>
<text text-anchor="middle" x="196.75" y="-153.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Profile</text>
</g>
<g id="clust11" class="cluster">
<title>cluster_src/Components/Templates</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-24C127,-24 379.5,-24 379.5,-24 385.5,-24 391.5,-30 391.5,-36 391.5,-36 391.5,-78 391.5,-78 391.5,-84 385.5,-90 379.5,-90 379.5,-90 127,-90 127,-90 121,-90 115,-84 115,-78 115,-78 115,-36 115,-36 115,-30 121,-24 127,-24"/>
<text text-anchor="middle" x="253.25" y="-78.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Templates</text>
</g>
<g id="clust12" class="cluster">
<title>cluster_src/Components/Typography</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M453.5,-38C453.5,-38 513.5,-38 513.5,-38 519.5,-38 525.5,-44 525.5,-50 525.5,-50 525.5,-78 525.5,-78 525.5,-84 519.5,-90 513.5,-90 513.5,-90 453.5,-90 453.5,-90 447.5,-90 441.5,-84 441.5,-78 441.5,-78 441.5,-50 441.5,-50 441.5,-44 447.5,-38 453.5,-38"/>
<text text-anchor="middle" x="483.5" y="-78.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Typography</text>
</g>
<g id="clust13" class="cluster">
<title>cluster_src/SampleData</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M24,-720C24,-720 79,-720 79,-720 85,-720 91,-726 91,-732 91,-732 91,-760 91,-760 91,-766 85,-772 79,-772 79,-772 24,-772 24,-772 18,-772 12,-766 12,-760 12,-760 12,-732 12,-732 12,-726 18,-720 24,-720"/>
<text text-anchor="middle" x="51.5" y="-760.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">SampleData</text>
</g>
<g id="clust14" class="cluster">
<title>cluster_src/Utils</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M431,-778C431,-778 536,-778 536,-778 542,-778 548,-784 548,-790 548,-790 548,-908 548,-908 548,-914 542,-920 536,-920 536,-920 431,-920 431,-920 425,-920 419,-914 419,-908 419,-908 419,-790 419,-790 419,-784 425,-778 431,-778"/>
<text text-anchor="middle" x="483.5" y="-908.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Utils</text>
</g>
<!-- src/Components/AppShell/AppShell.tsx -->
<g id="node1" class="node">
<title>src/Components/AppShell/AppShell.tsx</title>
<g id="a_node1"><a xlink:href="src/Components/AppShell/AppShell.tsx" xlink:title="AppShell.tsx">
<path fill="#bbfeff" stroke="black" d="M265.5,-658C265.5,-658 204.5,-658 204.5,-658 201.5,-658 198.5,-655 198.5,-652 198.5,-652 198.5,-646 198.5,-646 198.5,-643 201.5,-640 204.5,-640 204.5,-640 265.5,-640 265.5,-640 268.5,-640 271.5,-643 271.5,-646 271.5,-646 271.5,-652 271.5,-652 271.5,-655 268.5,-658 265.5,-658"/>
<text text-anchor="start" x="206.5" y="-646.8" font-family="Helvetica,sans-Serif" font-size="9.00">AppShell.tsx</text>
</a>
</g>
</g>
<!-- src/Components/AppShell/NavBar.tsx -->
<g id="node2" class="node">
<title>src/Components/AppShell/NavBar.tsx</title>
<g id="a_node2"><a xlink:href="src/Components/AppShell/NavBar.tsx" xlink:title="NavBar.tsx">
<path fill="#bbfeff" stroke="black" d="M373.5,-658C373.5,-658 320.5,-658 320.5,-658 317.5,-658 314.5,-655 314.5,-652 314.5,-652 314.5,-646 314.5,-646 314.5,-643 317.5,-640 320.5,-640 320.5,-640 373.5,-640 373.5,-640 376.5,-640 379.5,-643 379.5,-646 379.5,-646 379.5,-652 379.5,-652 379.5,-655 376.5,-658 373.5,-658"/>
<text text-anchor="start" x="322.5" y="-646.8" font-family="Helvetica,sans-Serif" font-size="9.00">NavBar.tsx</text>
</a>
</g>
</g>
<!-- src/Components/AppShell/AppShell.tsx&#45;&gt;src/Components/AppShell/NavBar.tsx -->
<g id="edge1" class="edge">
<title>src/Components/AppShell/AppShell.tsx&#45;&gt;src/Components/AppShell/NavBar.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M271.71,-649C283.36,-649 296.33,-649 308.13,-649"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="308.18,-651.1 314.18,-649 308.18,-646.9 308.18,-651.1"/>
</g>
<!-- src/Components/AppShell/Content.tsx -->
<g id="node3" class="node">
<title>src/Components/AppShell/Content.tsx</title>
<g id="a_node3"><a xlink:href="src/Components/AppShell/Content.tsx" xlink:title="Content.tsx">
<path fill="#bbfeff" stroke="black" d="M263.5,-688C263.5,-688 206.5,-688 206.5,-688 203.5,-688 200.5,-685 200.5,-682 200.5,-682 200.5,-676 200.5,-676 200.5,-673 203.5,-670 206.5,-670 206.5,-670 263.5,-670 263.5,-670 266.5,-670 269.5,-673 269.5,-676 269.5,-676 269.5,-682 269.5,-682 269.5,-685 266.5,-688 263.5,-688"/>
<text text-anchor="start" x="208.5" y="-676.8" font-family="Helvetica,sans-Serif" font-size="9.00">Content.tsx</text>
</a>
</g>
</g>
<!-- src/Components/AppShell/SideBar.tsx -->
<g id="node4" class="node">
<title>src/Components/AppShell/SideBar.tsx</title>
<g id="a_node4"><a xlink:href="src/Components/AppShell/SideBar.tsx" xlink:title="SideBar.tsx">
<path fill="#bbfeff" stroke="black" d="M262.5,-718C262.5,-718 207.5,-718 207.5,-718 204.5,-718 201.5,-715 201.5,-712 201.5,-712 201.5,-706 201.5,-706 201.5,-703 204.5,-700 207.5,-700 207.5,-700 262.5,-700 262.5,-700 265.5,-700 268.5,-703 268.5,-706 268.5,-706 268.5,-712 268.5,-712 268.5,-715 265.5,-718 262.5,-718"/>
<text text-anchor="start" x="209.5" y="-706.8" font-family="Helvetica,sans-Serif" font-size="9.00">SideBar.tsx</text>
</a>
</g>
</g>
<!-- src/Components/AppShell/SidebarSubmenu.tsx -->
<g id="node5" class="node">
<title>src/Components/AppShell/SidebarSubmenu.tsx</title>
<g id="a_node5"><a xlink:href="src/Components/AppShell/SidebarSubmenu.tsx" xlink:title="SidebarSubmenu.tsx">
<path fill="#bbfeff" stroke="black" d="M397,-718C397,-718 297,-718 297,-718 294,-718 291,-715 291,-712 291,-712 291,-706 291,-706 291,-703 294,-700 297,-700 297,-700 397,-700 397,-700 400,-700 403,-703 403,-706 403,-706 403,-712 403,-712 403,-715 400,-718 397,-718"/>
<text text-anchor="start" x="299" y="-706.8" font-family="Helvetica,sans-Serif" font-size="9.00">SidebarSubmenu.tsx</text>
</a>
</g>
</g>
<!-- src/Components/AppShell/SideBar.tsx&#45;&gt;src/Components/AppShell/SidebarSubmenu.tsx -->
<g id="edge2" class="edge">
<title>src/Components/AppShell/SideBar.tsx&#45;&gt;src/Components/AppShell/SidebarSubmenu.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M268.71,-709C273.82,-709 279.25,-709 284.76,-709"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="284.76,-711.1 290.76,-709 284.76,-706.9 284.76,-711.1"/>
</g>
<!-- src/Components/AppShell/index.tsx -->
<g id="node6" class="node">
<title>src/Components/AppShell/index.tsx</title>
<g id="a_node6"><a xlink:href="src/Components/AppShell/index.tsx" xlink:title="index.tsx">
<path fill="#bbfeff" stroke="black" d="M175,-673C175,-673 129,-673 129,-673 126,-673 123,-670 123,-667 123,-667 123,-661 123,-661 123,-658 126,-655 129,-655 129,-655 175,-655 175,-655 178,-655 181,-658 181,-661 181,-661 181,-667 181,-667 181,-670 178,-673 175,-673"/>
<text text-anchor="start" x="131" y="-661.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
</a>
</g>
</g>
<!-- src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/AppShell.tsx -->
<g id="edge3" class="edge">
<title>src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/AppShell.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-658.75C184.84,-658.1 188.48,-657.43 192.13,-656.75"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="192.76,-658.77 198.28,-655.61 192,-654.64 192.76,-658.77"/>
</g>
<!-- src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/Content.tsx -->
<g id="edge4" class="edge">
<title>src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/Content.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-669.25C185.53,-670.02 189.93,-670.84 194.31,-671.65"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="193.98,-673.72 200.26,-672.75 194.74,-669.59 193.98,-673.72"/>
</g>
<!-- src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/SideBar.tsx -->
<g id="edge5" class="edge">
<title>src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/SideBar.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M175.71,-673.08C177.75,-674.27 179.71,-675.58 181.5,-677 188.94,-682.93 186.87,-688.32 194.5,-694 195.93,-695.07 197.45,-696.07 199.03,-697.01"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="198.27,-698.98 204.55,-699.95 200.24,-695.27 198.27,-698.98"/>
</g>
<!-- src/Components/Auth/index.tsx -->
<g id="node7" class="node">
<title>src/Components/Auth/index.tsx</title>
<g id="a_node7"><a xlink:href="src/Components/Auth/index.tsx" xlink:title="index.tsx">
<path fill="#bbfeff" stroke="black" d="M175,-598C175,-598 129,-598 129,-598 126,-598 123,-595 123,-592 123,-592 123,-586 123,-586 123,-583 126,-580 129,-580 129,-580 175,-580 175,-580 178,-580 181,-583 181,-586 181,-586 181,-592 181,-592 181,-595 178,-598 175,-598"/>
<text text-anchor="start" x="131" y="-586.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Auth/useAuth.tsx -->
<g id="node8" class="node">
<title>src/Components/Auth/useAuth.tsx</title>
<g id="a_node8"><a xlink:href="src/Components/Auth/useAuth.tsx" xlink:title="useAuth.tsx">
<path fill="#bbfeff" stroke="black" d="M264.5,-598C264.5,-598 205.5,-598 205.5,-598 202.5,-598 199.5,-595 199.5,-592 199.5,-592 199.5,-586 199.5,-586 199.5,-583 202.5,-580 205.5,-580 205.5,-580 264.5,-580 264.5,-580 267.5,-580 270.5,-583 270.5,-586 270.5,-586 270.5,-592 270.5,-592 270.5,-595 267.5,-598 264.5,-598"/>
<text text-anchor="start" x="207.5" y="-586.8" font-family="Helvetica,sans-Serif" font-size="9.00">useAuth.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Auth/index.tsx&#45;&gt;src/Components/Auth/useAuth.tsx -->
<g id="edge6" class="edge">
<title>src/Components/Auth/index.tsx&#45;&gt;src/Components/Auth/useAuth.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-589C185.16,-589 189.15,-589 193.15,-589"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="193.41,-591.1 199.41,-589 193.41,-586.9 193.41,-591.1"/>
</g>
<!-- src/Components/Gaming/Modal.tsx -->
<g id="node9" class="node">
<title>src/Components/Gaming/Modal.tsx</title>
<g id="a_node9"><a xlink:href="src/Components/Gaming/Modal.tsx" xlink:title="Modal.tsx">
<path fill="#bbfeff" stroke="black" d="M258.5,-508C258.5,-508 211.5,-508 211.5,-508 208.5,-508 205.5,-505 205.5,-502 205.5,-502 205.5,-496 205.5,-496 205.5,-493 208.5,-490 211.5,-490 211.5,-490 258.5,-490 258.5,-490 261.5,-490 264.5,-493 264.5,-496 264.5,-496 264.5,-502 264.5,-502 264.5,-505 261.5,-508 258.5,-508"/>
<text text-anchor="start" x="213.5" y="-496.8" font-family="Helvetica,sans-Serif" font-size="9.00">Modal.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Gaming/Quests.tsx -->
<g id="node10" class="node">
<title>src/Components/Gaming/Quests.tsx</title>
<g id="a_node10"><a xlink:href="src/Components/Gaming/Quests.tsx" xlink:title="Quests.tsx">
<path fill="#bbfeff" stroke="black" d="M261,-538C261,-538 209,-538 209,-538 206,-538 203,-535 203,-532 203,-532 203,-526 203,-526 203,-523 206,-520 209,-520 209,-520 261,-520 261,-520 264,-520 267,-523 267,-526 267,-526 267,-532 267,-532 267,-535 264,-538 261,-538"/>
<text text-anchor="start" x="211" y="-526.8" font-family="Helvetica,sans-Serif" font-size="9.00">Quests.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Gaming/index.tsx -->
<g id="node11" class="node">
<title>src/Components/Gaming/index.tsx</title>
<g id="a_node11"><a xlink:href="src/Components/Gaming/index.tsx" xlink:title="index.tsx">
<path fill="#bbfeff" stroke="black" d="M175,-523C175,-523 129,-523 129,-523 126,-523 123,-520 123,-517 123,-517 123,-511 123,-511 123,-508 126,-505 129,-505 129,-505 175,-505 175,-505 178,-505 181,-508 181,-511 181,-511 181,-517 181,-517 181,-520 178,-523 175,-523"/>
<text text-anchor="start" x="131" y="-511.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Gaming/index.tsx&#45;&gt;src/Components/Gaming/Modal.tsx -->
<g id="edge7" class="edge">
<title>src/Components/Gaming/index.tsx&#45;&gt;src/Components/Gaming/Modal.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-508.75C187.15,-507.68 193.33,-506.53 199.34,-505.42"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="199.76,-507.48 205.27,-504.32 198.99,-503.35 199.76,-507.48"/>
</g>
<!-- src/Components/Gaming/index.tsx&#45;&gt;src/Components/Gaming/Quests.tsx -->
<g id="edge8" class="edge">
<title>src/Components/Gaming/index.tsx&#45;&gt;src/Components/Gaming/Quests.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-519.25C186.31,-520.17 191.57,-521.14 196.75,-522.1"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="196.5,-524.19 202.78,-523.22 197.27,-520.06 196.5,-524.19"/>
</g>
<!-- src/Components/Input/InputText.tsx -->
<g id="node12" class="node">
<title>src/Components/Input/InputText.tsx</title>
<g id="a_node12"><a xlink:href="src/Components/Input/InputText.tsx" xlink:title="InputText.tsx">
<path fill="#bbfeff" stroke="black" d="M379,-154C379,-154 315,-154 315,-154 312,-154 309,-151 309,-148 309,-148 309,-142 309,-142 309,-139 312,-136 315,-136 315,-136 379,-136 379,-136 382,-136 385,-139 385,-142 385,-142 385,-148 385,-148 385,-151 382,-154 379,-154"/>
<text text-anchor="start" x="317" y="-142.8" font-family="Helvetica,sans-Serif" font-size="9.00">InputText.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Input/TextAreaInput.tsx -->
<g id="node13" class="node">
<title>src/Components/Input/TextAreaInput.tsx</title>
<g id="a_node13"><a xlink:href="src/Components/Input/TextAreaInput.tsx" xlink:title="TextAreaInput.tsx">
<path fill="#bbfeff" stroke="black" d="M389,-124C389,-124 305,-124 305,-124 302,-124 299,-121 299,-118 299,-118 299,-112 299,-112 299,-109 302,-106 305,-106 305,-106 389,-106 389,-106 392,-106 395,-109 395,-112 395,-112 395,-118 395,-118 395,-121 392,-124 389,-124"/>
<text text-anchor="start" x="307" y="-112.8" font-family="Helvetica,sans-Serif" font-size="9.00">TextAreaInput.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Map/Layer.tsx -->
<g id="node14" class="node">
<title>src/Components/Map/Layer.tsx</title>
<g id="a_node14"><a xlink:href="src/Components/Map/Layer.tsx" xlink:title="Layer.tsx">
<path fill="#bbfeff" stroke="black" d="M257.5,-336C257.5,-336 212.5,-336 212.5,-336 209.5,-336 206.5,-333 206.5,-330 206.5,-330 206.5,-324 206.5,-324 206.5,-321 209.5,-318 212.5,-318 212.5,-318 257.5,-318 257.5,-318 260.5,-318 263.5,-321 263.5,-324 263.5,-324 263.5,-330 263.5,-330 263.5,-333 260.5,-336 257.5,-336"/>
<text text-anchor="start" x="214.5" y="-324.8" font-family="Helvetica,sans-Serif" font-size="9.00">Layer.tsx</text>
</a>
</g>
</g>
<!-- src/Utils/MarkerIconFactory.ts -->
<g id="node15" class="node">
<title>src/Utils/MarkerIconFactory.ts</title>
<g id="a_node15"><a xlink:href="src/Utils/MarkerIconFactory.ts" xlink:title="MarkerIconFactory.ts">
<path fill="#ddfeff" stroke="black" d="M532.5,-894C532.5,-894 434.5,-894 434.5,-894 431.5,-894 428.5,-891 428.5,-888 428.5,-888 428.5,-882 428.5,-882 428.5,-879 431.5,-876 434.5,-876 434.5,-876 532.5,-876 532.5,-876 535.5,-876 538.5,-879 538.5,-882 538.5,-882 538.5,-888 538.5,-888 538.5,-891 535.5,-894 532.5,-894"/>
<text text-anchor="start" x="436.5" y="-882.8" font-family="Helvetica,sans-Serif" font-size="9.00">MarkerIconFactory.ts</text>
</a>
</g>
</g>
<!-- src/Components/Map/Layer.tsx&#45;&gt;src/Utils/MarkerIconFactory.ts -->
<g id="edge9" class="edge">
<title>src/Components/Map/Layer.tsx&#45;&gt;src/Utils/MarkerIconFactory.ts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M239.38,-336.08C247.87,-359.4 270.04,-423.47 278.5,-479 282.99,-508.45 274.18,-719.87 286.5,-747 319.72,-820.16 348.11,-832.18 419,-870 421.55,-871.36 424.23,-872.6 426.97,-873.73"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="426.34,-875.73 432.7,-875.89 427.83,-871.81 426.34,-875.73"/>
</g>
<!-- src/Components/Map/hooks/useItems.tsx -->
<g id="node16" class="node">
<title>src/Components/Map/hooks/useItems.tsx</title>
<g id="a_node16"><a xlink:href="src/Components/Map/hooks/useItems.tsx" xlink:title="useItems.tsx">
<path fill="#bbfeff" stroke="black" d="M514.5,-352C514.5,-352 452.5,-352 452.5,-352 449.5,-352 446.5,-349 446.5,-346 446.5,-346 446.5,-340 446.5,-340 446.5,-337 449.5,-334 452.5,-334 452.5,-334 514.5,-334 514.5,-334 517.5,-334 520.5,-337 520.5,-340 520.5,-340 520.5,-346 520.5,-346 520.5,-349 517.5,-352 514.5,-352"/>
<text text-anchor="start" x="454.5" y="-340.8" font-family="Helvetica,sans-Serif" font-size="9.00">useItems.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx -->
<g id="edge10" class="edge">
<title>src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M263.64,-327.06C298.17,-327.33 359.06,-328.49 411,-333 420.42,-333.82 430.51,-335.02 440.04,-336.32"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="439.98,-338.43 446.21,-337.17 440.56,-334.27 439.98,-338.43"/>
</g>
<!-- src/Components/Map/hooks/useLayers.tsx -->
<g id="node17" class="node">
<title>src/Components/Map/hooks/useLayers.tsx</title>
<g id="a_node17"><a xlink:href="src/Components/Map/hooks/useLayers.tsx" xlink:title="useLayers.tsx">
<path fill="#bbfeff" stroke="black" d="M516.5,-322C516.5,-322 450.5,-322 450.5,-322 447.5,-322 444.5,-319 444.5,-316 444.5,-316 444.5,-310 444.5,-310 444.5,-307 447.5,-304 450.5,-304 450.5,-304 516.5,-304 516.5,-304 519.5,-304 522.5,-307 522.5,-310 522.5,-310 522.5,-316 522.5,-316 522.5,-319 519.5,-322 516.5,-322"/>
<text text-anchor="start" x="452.5" y="-310.8" font-family="Helvetica,sans-Serif" font-size="9.00">useLayers.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx -->
<g id="edge11" class="edge">
<title>src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M263.51,-324.68C270.97,-324.09 279.04,-323.49 286.5,-323 338.46,-319.62 398.23,-316.71 437.97,-314.92"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="438.27,-317 444.17,-314.64 438.09,-312.81 438.27,-317"/>
</g>
<!-- src/Components/Map/hooks/useTags.tsx -->
<g id="node18" class="node">
<title>src/Components/Map/hooks/useTags.tsx</title>
<g id="a_node18"><a xlink:href="src/Components/Map/hooks/useTags.tsx" xlink:title="useTags.tsx">
<path fill="#bbfeff" stroke="black" d="M511.5,-292C511.5,-292 455.5,-292 455.5,-292 452.5,-292 449.5,-289 449.5,-286 449.5,-286 449.5,-280 449.5,-280 449.5,-277 452.5,-274 455.5,-274 455.5,-274 511.5,-274 511.5,-274 514.5,-274 517.5,-277 517.5,-280 517.5,-280 517.5,-286 517.5,-286 517.5,-289 514.5,-292 511.5,-292"/>
<text text-anchor="start" x="457.5" y="-280.8" font-family="Helvetica,sans-Serif" font-size="9.00">useTags.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx -->
<g id="edge12" class="edge">
<title>src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M263.64,-318.7C271.02,-316.66 279.03,-314.6 286.5,-313 315.63,-306.76 394.98,-295.24 443.31,-288.44"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="443.69,-290.5 449.34,-287.59 443.1,-286.34 443.69,-290.5"/>
</g>
<!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx -->
<g id="node19" class="node">
<title>src/Components/Map/Subcomponents/ItemFormPopup.tsx</title>
<g id="a_node19"><a xlink:href="src/Components/Map/Subcomponents/ItemFormPopup.tsx" xlink:title="ItemFormPopup.tsx">
<path fill="#bbfeff" stroke="black" d="M393.5,-422C393.5,-422 300.5,-422 300.5,-422 297.5,-422 294.5,-419 294.5,-416 294.5,-416 294.5,-410 294.5,-410 294.5,-407 297.5,-404 300.5,-404 300.5,-404 393.5,-404 393.5,-404 396.5,-404 399.5,-407 399.5,-410 399.5,-410 399.5,-416 399.5,-416 399.5,-419 396.5,-422 393.5,-422"/>
<text text-anchor="start" x="302.5" y="-410.8" font-family="Helvetica,sans-Serif" font-size="9.00">ItemFormPopup.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemFormPopup.tsx -->
<g id="edge13" class="edge">
<title>src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemFormPopup.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M240.05,-336.46C247.14,-351.83 263.28,-382.12 286.5,-398 288.21,-399.17 290.01,-400.25 291.87,-401.25"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="291.3,-403.3 297.61,-403.99 293.11,-399.51 291.3,-403.3"/>
</g>
<!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx -->
<g id="node20" class="node">
<title>src/Components/Map/Subcomponents/ItemViewPopup.tsx</title>
<g id="a_node20"><a xlink:href="src/Components/Map/Subcomponents/ItemViewPopup.tsx" xlink:title="ItemViewPopup.tsx">
<path fill="#bbfeff" stroke="black" d="M393,-392C393,-392 301,-392 301,-392 298,-392 295,-389 295,-386 295,-386 295,-380 295,-380 295,-377 298,-374 301,-374 301,-374 393,-374 393,-374 396,-374 399,-377 399,-380 399,-380 399,-386 399,-386 399,-389 396,-392 393,-392"/>
<text text-anchor="start" x="303" y="-380.8" font-family="Helvetica,sans-Serif" font-size="9.00">ItemViewPopup.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemViewPopup.tsx -->
<g id="edge14" class="edge">
<title>src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemViewPopup.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M244.81,-336.21C254.27,-345.56 270.14,-359.81 286.5,-368 289.21,-369.36 292.06,-370.6 294.98,-371.74"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="294.69,-373.87 301.05,-373.92 296.11,-369.91 294.69,-373.87"/>
</g>
<!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx -->
<g id="edge18" class="edge">
<title>src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M395.54,-403.98C400.87,-402.3 406.13,-400.32 411,-398 433.16,-387.44 454.99,-369.19 468.58,-356.63"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="470.27,-357.92 473.21,-352.28 467.4,-354.86 470.27,-357.92"/>
</g>
<!-- src/types.ts -->
<g id="node23" class="node">
<title>src/types.ts</title>
<g id="a_node23"><a xlink:href="src/types.ts" xlink:title="types.ts">
<path fill="#ddfeff" stroke="black" d="M504.5,-946C504.5,-946 462.5,-946 462.5,-946 459.5,-946 456.5,-943 456.5,-940 456.5,-940 456.5,-934 456.5,-934 456.5,-931 459.5,-928 462.5,-928 462.5,-928 504.5,-928 504.5,-928 507.5,-928 510.5,-931 510.5,-934 510.5,-934 510.5,-940 510.5,-940 510.5,-943 507.5,-946 504.5,-946"/>
<text text-anchor="start" x="465" y="-934.8" font-family="Helvetica,sans-Serif" font-size="9.00">types.ts</text>
</a>
</g>
</g>
<!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/types.ts -->
<g id="edge17" class="edge">
<title>src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/types.ts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M351.64,-422.28C363.06,-451.85 398.11,-546.8 411,-629 413.53,-645.14 408.59,-910.4 419,-923 426.59,-932.19 438.73,-936.18 450.36,-937.7"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="450.2,-939.79 456.37,-938.28 450.6,-935.61 450.2,-939.79"/>
</g>
<!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx -->
<g id="edge21" class="edge">
<title>src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M388.83,-373.93C396.24,-372.09 403.88,-370.09 411,-368 424.9,-363.93 440.07,-358.73 452.85,-354.13"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="453.62,-356.09 458.54,-352.07 452.18,-352.14 453.62,-356.09"/>
</g>
<!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx -->
<g id="edge22" class="edge">
<title>src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M399,-376.94C403.52,-374.7 407.64,-371.79 411,-368 431.78,-344.57 398.2,-321.41 419,-298 425.23,-290.98 434.08,-286.94 443.2,-284.67"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="443.76,-286.7 449.21,-283.43 442.91,-282.59 443.76,-286.7"/>
</g>
<!-- src/Utils/HeighlightTags.ts -->
<g id="node24" class="node">
<title>src/Utils/HeighlightTags.ts</title>
<g id="a_node24"><a xlink:href="src/Utils/HeighlightTags.ts" xlink:title="HeighlightTags.ts">
<path fill="#ddfeff" stroke="black" d="M524.5,-834C524.5,-834 442.5,-834 442.5,-834 439.5,-834 436.5,-831 436.5,-828 436.5,-828 436.5,-822 436.5,-822 436.5,-819 439.5,-816 442.5,-816 442.5,-816 524.5,-816 524.5,-816 527.5,-816 530.5,-819 530.5,-822 530.5,-822 530.5,-828 530.5,-828 530.5,-831 527.5,-834 524.5,-834"/>
<text text-anchor="start" x="444.5" y="-822.8" font-family="Helvetica,sans-Serif" font-size="9.00">HeighlightTags.ts</text>
</a>
</g>
</g>
<!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Utils/HeighlightTags.ts -->
<g id="edge19" class="edge">
<title>src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Utils/HeighlightTags.ts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M399.08,-388.59C403.64,-390.91 407.76,-393.97 411,-398 425.36,-415.83 404.62,-792.19 419,-810 422.15,-813.9 426.11,-816.91 430.51,-819.2"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="429.95,-821.25 436.29,-821.75 431.64,-817.41 429.95,-821.25"/>
</g>
<!-- src/Utils/ReplaceURLs.ts -->
<g id="node25" class="node">
<title>src/Utils/ReplaceURLs.ts</title>
<g id="a_node25"><a xlink:href="src/Utils/ReplaceURLs.ts" xlink:title="ReplaceURLs.ts">
<path fill="#ddfeff" stroke="black" d="M520.5,-864C520.5,-864 446.5,-864 446.5,-864 443.5,-864 440.5,-861 440.5,-858 440.5,-858 440.5,-852 440.5,-852 440.5,-849 443.5,-846 446.5,-846 446.5,-846 520.5,-846 520.5,-846 523.5,-846 526.5,-849 526.5,-852 526.5,-852 526.5,-858 526.5,-858 526.5,-861 523.5,-864 520.5,-864"/>
<text text-anchor="start" x="448.5" y="-852.8" font-family="Helvetica,sans-Serif" font-size="9.00">ReplaceURLs.ts</text>
</a>
</g>
</g>
<!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Utils/ReplaceURLs.ts -->
<g id="edge20" class="edge">
<title>src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Utils/ReplaceURLs.ts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M399.08,-388.59C403.65,-390.9 407.76,-393.97 411,-398 426.4,-417.13 403.59,-820.88 419,-840 423.14,-845.13 428.67,-848.71 434.76,-851.16"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="434.12,-853.17 440.48,-853.12 435.48,-849.19 434.12,-853.17"/>
</g>
<!-- src/Components/Map/Subcomponents/AddButton.tsx -->
<g id="node21" class="node">
<title>src/Components/Map/Subcomponents/AddButton.tsx</title>
<g id="a_node21"><a xlink:href="src/Components/Map/Subcomponents/AddButton.tsx" xlink:title="AddButton.tsx">
<path fill="#bbfeff" stroke="black" d="M382,-362C382,-362 312,-362 312,-362 309,-362 306,-359 306,-356 306,-356 306,-350 306,-350 306,-347 309,-344 312,-344 312,-344 382,-344 382,-344 385,-344 388,-347 388,-350 388,-350 388,-356 388,-356 388,-359 385,-362 382,-362"/>
<text text-anchor="start" x="314" y="-350.8" font-family="Helvetica,sans-Serif" font-size="9.00">AddButton.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Map/Subcomponents/AddButton.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx -->
<g id="edge16" class="edge">
<title>src/Components/Map/Subcomponents/AddButton.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M388.19,-349.55C396.21,-347.57 404.24,-344.56 411,-340 416.31,-336.42 413.74,-331.66 419,-328 424.81,-323.96 431.57,-321 438.47,-318.83"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="439.08,-320.84 444.28,-317.19 437.93,-316.8 439.08,-320.84"/>
</g>
<!-- src/Utils/DynamicHeroIcon.tsx -->
<g id="node22" class="node">
<title>src/Utils/DynamicHeroIcon.tsx</title>
<g id="a_node22"><a xlink:href="src/Utils/DynamicHeroIcon.tsx" xlink:title="DynamicHeroIcon.tsx">
<path fill="#bbfeff" stroke="black" d="M534,-804C534,-804 433,-804 433,-804 430,-804 427,-801 427,-798 427,-798 427,-792 427,-792 427,-789 430,-786 433,-786 433,-786 534,-786 534,-786 537,-786 540,-789 540,-792 540,-792 540,-798 540,-798 540,-801 537,-804 534,-804"/>
<text text-anchor="start" x="435" y="-792.8" font-family="Helvetica,sans-Serif" font-size="9.00">DynamicHeroIcon.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Map/Subcomponents/AddButton.tsx&#45;&gt;src/Utils/DynamicHeroIcon.tsx -->
<g id="edge15" class="edge">
<title>src/Components/Map/Subcomponents/AddButton.tsx&#45;&gt;src/Utils/DynamicHeroIcon.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M388.01,-355.29C396.62,-357.6 404.94,-361.51 411,-368 439.9,-398.93 473.29,-705.97 480.9,-779.32"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="478.85,-779.92 481.56,-785.67 483.03,-779.49 478.85,-779.92"/>
</g>
<!-- src/Components/Map/Tags.tsx -->
<g id="node26" class="node">
<title>src/Components/Map/Tags.tsx</title>
<g id="a_node26"><a xlink:href="src/Components/Map/Tags.tsx" xlink:title="Tags.tsx">
<path fill="#bbfeff" stroke="black" d="M368,-214C368,-214 326,-214 326,-214 323,-214 320,-211 320,-208 320,-208 320,-202 320,-202 320,-199 323,-196 326,-196 326,-196 368,-196 368,-196 371,-196 374,-199 374,-202 374,-202 374,-208 374,-208 374,-211 371,-214 368,-214"/>
<text text-anchor="start" x="328.5" y="-202.8" font-family="Helvetica,sans-Serif" font-size="9.00">Tags.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Map/Tags.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx -->
<g id="edge23" class="edge">
<title>src/Components/Map/Tags.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M374.08,-209.86C385.8,-212.68 399.55,-216.92 411,-223 434.14,-235.29 456.58,-256 469.97,-269.58"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="468.46,-271.05 474.15,-273.89 471.48,-268.12 468.46,-271.05"/>
</g>
<!-- src/Components/Map/UtopiaMap.css -->
<g id="node27" class="node">
<title>src/Components/Map/UtopiaMap.css</title>
<g id="a_node27"><a xlink:href="src/Components/Map/UtopiaMap.css" xlink:title="UtopiaMap.css">
<path fill="#ffffcc" stroke="black" d="M382,-286C382,-286 312,-286 312,-286 309,-286 306,-283 306,-280 306,-280 306,-274 306,-274 306,-271 309,-268 312,-268 312,-268 382,-268 382,-268 385,-268 388,-271 388,-274 388,-274 388,-280 388,-280 388,-283 385,-286 382,-286"/>
<text text-anchor="start" x="314" y="-274.8" font-family="Helvetica,sans-Serif" font-size="9.00">UtopiaMap.css</text>
</a>
</g>
</g>
<!-- src/Components/Map/UtopiaMap.tsx -->
<g id="node28" class="node">
<title>src/Components/Map/UtopiaMap.tsx</title>
<g id="a_node28"><a xlink:href="src/Components/Map/UtopiaMap.tsx" xlink:title="UtopiaMap.tsx">
<path fill="#bbfeff" stroke="black" d="M269.5,-286C269.5,-286 200.5,-286 200.5,-286 197.5,-286 194.5,-283 194.5,-280 194.5,-280 194.5,-274 194.5,-274 194.5,-271 197.5,-268 200.5,-268 200.5,-268 269.5,-268 269.5,-268 272.5,-268 275.5,-271 275.5,-274 275.5,-274 275.5,-280 275.5,-280 275.5,-283 272.5,-286 269.5,-286"/>
<text text-anchor="start" x="202.5" y="-274.8" font-family="Helvetica,sans-Serif" font-size="9.00">UtopiaMap.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx -->
<g id="edge25" class="edge">
<title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M261.11,-267.99C269.12,-265.54 278.08,-263.22 286.5,-262 313.88,-258.02 390.29,-243.65 411,-262 433.11,-281.6 399.3,-305.98 419,-328 424.54,-334.19 432.11,-338.06 440.1,-340.44"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="439.93,-342.57 446.26,-341.98 440.95,-338.49 439.93,-342.57"/>
</g>
<!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx -->
<g id="edge26" class="edge">
<title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M249.45,-267.83C259.24,-261.72 273.08,-254.25 286.5,-251 313.39,-244.48 389.86,-233.15 411,-251 427.19,-264.67 404.5,-282.55 419,-298 424.15,-303.48 430.9,-307.13 438.07,-309.53"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="437.83,-311.64 444.17,-311.26 438.97,-307.6 437.83,-311.64"/>
</g>
<!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx -->
<g id="edge27" class="edge">
<title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M243.83,-267.91C252.94,-258.11 268.97,-243.1 286.5,-237 338.76,-218.81 357.91,-221.4 411,-237 432.69,-243.38 454.03,-258.59 467.66,-269.79"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="466.38,-271.45 472.32,-273.7 469.08,-268.24 466.38,-271.45"/>
</g>
<!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/Subcomponents/AddButton.tsx -->
<g id="edge28" class="edge">
<title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/Subcomponents/AddButton.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M251.39,-286.25C260.5,-292.47 271.58,-301.45 278.5,-312 285.59,-322.83 277.06,-331.14 286.5,-340 290.38,-343.64 295.03,-346.35 300,-348.36"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="299.6,-350.44 305.96,-350.41 300.97,-346.47 299.6,-350.44"/>
</g>
<!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/types.ts -->
<g id="edge24" class="edge">
<title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/types.ts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M253.26,-286.24C262.55,-292.23 273.18,-300.98 278.5,-312 289.02,-333.76 278.63,-724.15 286.5,-747 318.4,-839.57 336.63,-870.06 419,-923 428.29,-928.97 439.75,-932.42 450.36,-934.41"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="450.23,-936.51 456.49,-935.42 450.91,-932.37 450.23,-936.51"/>
</g>
<!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/UtopiaMap.css -->
<g id="edge29" class="edge">
<title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/UtopiaMap.css</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M275.71,-277C283.56,-277 291.86,-277 299.89,-277"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="299.98,-279.1 305.98,-277 299.98,-274.9 299.98,-279.1"/>
</g>
<!-- src/Components/Map/index.tsx -->
<g id="node29" class="node">
<title>src/Components/Map/index.tsx</title>
<g id="a_node29"><a xlink:href="src/Components/Map/index.tsx" xlink:title="index.tsx">
<path fill="#bbfeff" stroke="black" d="M175,-311C175,-311 129,-311 129,-311 126,-311 123,-308 123,-305 123,-305 123,-299 123,-299 123,-296 126,-293 129,-293 129,-293 175,-293 175,-293 178,-293 181,-296 181,-299 181,-299 181,-305 181,-305 181,-308 178,-311 175,-311"/>
<text text-anchor="start" x="131" y="-299.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Layer.tsx -->
<g id="edge30" class="edge">
<title>src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Layer.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-310.74C187.55,-312.66 194.19,-314.71 200.58,-316.69"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="200.02,-318.71 206.37,-318.47 201.25,-314.7 200.02,-318.71"/>
</g>
<!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Tags.tsx -->
<g id="edge31" class="edge">
<title>src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Tags.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M160.82,-292.79C168.65,-284 181.39,-270.84 194.5,-262 231.75,-236.89 281.55,-220.92 313.7,-212.46"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="314.6,-214.39 319.89,-210.87 313.55,-210.33 314.6,-214.39"/>
</g>
<!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/UtopiaMap.tsx -->
<g id="edge32" class="edge">
<title>src/Components/Map/index.tsx&#45;&gt;src/Components/Map/UtopiaMap.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-293.26C187.01,-291.5 193.04,-289.64 198.92,-287.83"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="199.61,-289.81 204.72,-286.04 198.37,-285.8 199.61,-289.81"/>
</g>
<!-- src/Components/Profile/Settings.tsx -->
<g id="node30" class="node">
<title>src/Components/Profile/Settings.tsx</title>
<g id="a_node30"><a xlink:href="src/Components/Profile/Settings.tsx" xlink:title="Settings.tsx">
<path fill="#bbfeff" stroke="black" d="M264.5,-139C264.5,-139 205.5,-139 205.5,-139 202.5,-139 199.5,-136 199.5,-133 199.5,-133 199.5,-127 199.5,-127 199.5,-124 202.5,-121 205.5,-121 205.5,-121 264.5,-121 264.5,-121 267.5,-121 270.5,-124 270.5,-127 270.5,-127 270.5,-133 270.5,-133 270.5,-136 267.5,-139 264.5,-139"/>
<text text-anchor="start" x="207.5" y="-127.8" font-family="Helvetica,sans-Serif" font-size="9.00">Settings.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Input/InputText.tsx -->
<g id="edge33" class="edge">
<title>src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Input/InputText.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M270.5,-134.7C280.72,-136.1 292.04,-137.64 302.74,-139.1"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="302.72,-141.22 308.95,-139.95 303.29,-137.06 302.72,-141.22"/>
</g>
<!-- src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Input/TextAreaInput.tsx -->
<g id="edge34" class="edge">
<title>src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Input/TextAreaInput.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M270.5,-125.3C277.49,-124.34 285,-123.32 292.47,-122.3"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="293.06,-124.34 298.72,-121.45 292.49,-120.18 293.06,-124.34"/>
</g>
<!-- src/Components/Templates/TitleCard.tsx -->
<g id="node31" class="node">
<title>src/Components/Templates/TitleCard.tsx</title>
<g id="a_node31"><a xlink:href="src/Components/Templates/TitleCard.tsx" xlink:title="TitleCard.tsx">
<path fill="#bbfeff" stroke="black" d="M377.5,-64C377.5,-64 316.5,-64 316.5,-64 313.5,-64 310.5,-61 310.5,-58 310.5,-58 310.5,-52 310.5,-52 310.5,-49 313.5,-46 316.5,-46 316.5,-46 377.5,-46 377.5,-46 380.5,-46 383.5,-49 383.5,-52 383.5,-52 383.5,-58 383.5,-58 383.5,-61 380.5,-64 377.5,-64"/>
<text text-anchor="start" x="318.5" y="-52.8" font-family="Helvetica,sans-Serif" font-size="9.00">TitleCard.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx -->
<g id="edge35" class="edge">
<title>src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M249.26,-120.74C259.42,-113.65 273.81,-103.66 286.5,-95 300.05,-85.75 315.42,-75.42 327.15,-67.58"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="328.44,-69.24 332.26,-64.16 326.1,-65.75 328.44,-69.24"/>
</g>
<!-- src/Components/Typography/Subtitle.tsx -->
<g id="node34" class="node">
<title>src/Components/Typography/Subtitle.tsx</title>
<g id="a_node34"><a xlink:href="src/Components/Typography/Subtitle.tsx" xlink:title="Subtitle.tsx">
<path fill="#bbfeff" stroke="black" d="M511.5,-64C511.5,-64 455.5,-64 455.5,-64 452.5,-64 449.5,-61 449.5,-58 449.5,-58 449.5,-52 449.5,-52 449.5,-49 452.5,-46 455.5,-46 455.5,-46 511.5,-46 511.5,-46 514.5,-46 517.5,-49 517.5,-52 517.5,-52 517.5,-58 517.5,-58 517.5,-61 514.5,-64 511.5,-64"/>
<text text-anchor="start" x="457.5" y="-52.8" font-family="Helvetica,sans-Serif" font-size="9.00">Subtitle.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Templates/TitleCard.tsx&#45;&gt;src/Components/Typography/Subtitle.tsx -->
<g id="edge38" class="edge">
<title>src/Components/Templates/TitleCard.tsx&#45;&gt;src/Components/Typography/Subtitle.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M383.69,-55C402.01,-55 424.37,-55 443.18,-55"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="443.42,-57.1 449.42,-55 443.42,-52.9 443.42,-57.1"/>
</g>
<!-- src/Components/Profile/index.tsx -->
<g id="node32" class="node">
<title>src/Components/Profile/index.tsx</title>
<g id="a_node32"><a xlink:href="src/Components/Profile/index.tsx" xlink:title="index.tsx">
<path fill="#bbfeff" stroke="black" d="M175,-139C175,-139 129,-139 129,-139 126,-139 123,-136 123,-133 123,-133 123,-127 123,-127 123,-124 126,-121 129,-121 129,-121 175,-121 175,-121 178,-121 181,-124 181,-127 181,-127 181,-133 181,-133 181,-136 178,-139 175,-139"/>
<text text-anchor="start" x="131" y="-127.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Profile/index.tsx&#45;&gt;src/Components/Profile/Settings.tsx -->
<g id="edge36" class="edge">
<title>src/Components/Profile/index.tsx&#45;&gt;src/Components/Profile/Settings.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-130C185.16,-130 189.15,-130 193.15,-130"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="193.41,-132.1 199.41,-130 193.41,-127.9 193.41,-132.1"/>
</g>
<!-- src/Components/Templates/CardPage.tsx -->
<g id="node33" class="node">
<title>src/Components/Templates/CardPage.tsx</title>
<g id="a_node33"><a xlink:href="src/Components/Templates/CardPage.tsx" xlink:title="CardPage.tsx">
<path fill="#bbfeff" stroke="black" d="M267,-50C267,-50 203,-50 203,-50 200,-50 197,-47 197,-44 197,-44 197,-38 197,-38 197,-35 200,-32 203,-32 203,-32 267,-32 267,-32 270,-32 273,-35 273,-38 273,-38 273,-44 273,-44 273,-47 270,-50 267,-50"/>
<text text-anchor="start" x="205" y="-38.8" font-family="Helvetica,sans-Serif" font-size="9.00">CardPage.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Templates/CardPage.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx -->
<g id="edge37" class="edge">
<title>src/Components/Templates/CardPage.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M273.24,-45.74C283.15,-47 293.92,-48.37 304.07,-49.66"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="304.07,-51.78 310.29,-50.45 304.6,-47.61 304.07,-51.78"/>
</g>
<!-- src/Components/Templates/index.tsx -->
<g id="node35" class="node">
<title>src/Components/Templates/index.tsx</title>
<g id="a_node35"><a xlink:href="src/Components/Templates/index.tsx" xlink:title="index.tsx">
<path fill="#bbfeff" stroke="black" d="M175,-64C175,-64 129,-64 129,-64 126,-64 123,-61 123,-58 123,-58 123,-52 123,-52 123,-49 126,-46 129,-46 129,-46 175,-46 175,-46 178,-46 181,-49 181,-52 181,-52 181,-58 181,-58 181,-61 178,-64 175,-64"/>
<text text-anchor="start" x="131" y="-52.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Templates/index.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx -->
<g id="edge40" class="edge">
<title>src/Components/Templates/index.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.13,-55.77C185.6,-55.87 190.18,-55.95 194.5,-56 231.83,-56.45 241.17,-56.28 278.5,-56 286.72,-55.94 295.5,-55.84 303.92,-55.72"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="304.3,-57.81 310.27,-55.63 304.24,-53.61 304.3,-57.81"/>
</g>
<!-- src/Components/Templates/index.tsx&#45;&gt;src/Components/Templates/CardPage.tsx -->
<g id="edge39" class="edge">
<title>src/Components/Templates/index.tsx&#45;&gt;src/Components/Templates/CardPage.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-50.1C184.31,-49.59 187.39,-49.06 190.49,-48.52"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="191.3,-50.51 196.86,-47.42 190.59,-46.37 191.3,-50.51"/>
</g>
<!-- src/SampleData/data.js -->
<g id="node36" class="node">
<title>src/SampleData/data.js</title>
<g id="a_node36"><a xlink:href="src/SampleData/data.js" xlink:title="data.js">
<path fill="#ccffcc" stroke="black" d="M72,-746C72,-746 30,-746 30,-746 27,-746 24,-743 24,-740 24,-740 24,-734 24,-734 24,-731 27,-728 30,-728 30,-728 72,-728 72,-728 75,-728 78,-731 78,-734 78,-734 78,-740 78,-740 78,-743 75,-746 72,-746"/>
<text text-anchor="start" x="35.5" y="-734.8" font-family="Helvetica,sans-Serif" font-size="9.00">data.js</text>
</a>
</g>
</g>
<!-- src/index.css -->
<g id="node37" class="node">
<title>src/index.css</title>
<g id="a_node37"><a xlink:href="src/index.css" xlink:title="index.css">
<path fill="#ffffcc" stroke="black" d="M175.5,-796C175.5,-796 128.5,-796 128.5,-796 125.5,-796 122.5,-793 122.5,-790 122.5,-790 122.5,-784 122.5,-784 122.5,-781 125.5,-778 128.5,-778 128.5,-778 175.5,-778 175.5,-778 178.5,-778 181.5,-781 181.5,-784 181.5,-784 181.5,-790 181.5,-790 181.5,-793 178.5,-796 175.5,-796"/>
<text text-anchor="start" x="130.5" y="-784.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.css</text>
</a>
</g>
</g>
<!-- src/index.tsx -->
<g id="node38" class="node">
<title>src/index.tsx</title>
<g id="a_node38"><a xlink:href="src/index.tsx" xlink:title="index.tsx">
<path fill="#bbfeff" stroke="black" d="M74,-523C74,-523 28,-523 28,-523 25,-523 22,-520 22,-517 22,-517 22,-511 22,-511 22,-508 25,-505 28,-505 28,-505 74,-505 74,-505 77,-505 80,-508 80,-511 80,-511 80,-517 80,-517 80,-520 77,-523 74,-523"/>
<text text-anchor="start" x="30" y="-511.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
</a>
</g>
</g>
<!-- src/index.tsx&#45;&gt;src/Components/AppShell/index.tsx -->
<g id="edge41" class="edge">
<title>src/index.tsx&#45;&gt;src/Components/AppShell/index.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M54.99,-523.22C61.88,-543.47 80.3,-592.76 107,-627 114.12,-636.13 123.81,-644.57 132.29,-651.09"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="131.31,-652.98 137.38,-654.88 133.82,-649.61 131.31,-652.98"/>
</g>
<!-- src/index.tsx&#45;&gt;src/Components/Auth/index.tsx -->
<g id="edge42" class="edge">
<title>src/index.tsx&#45;&gt;src/Components/Auth/index.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M59.86,-523.12C69.95,-534.44 88.37,-553.84 107,-567 112.23,-570.7 118.17,-574.12 123.96,-577.1"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="123.36,-579.15 129.67,-579.94 125.23,-575.39 123.36,-579.15"/>
</g>
<!-- src/index.tsx&#45;&gt;src/Components/Gaming/index.tsx -->
<g id="edge43" class="edge">
<title>src/index.tsx&#45;&gt;src/Components/Gaming/index.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M80.1,-514C91.5,-514 104.76,-514 116.71,-514"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="116.83,-516.1 122.83,-514 116.83,-511.9 116.83,-516.1"/>
</g>
<!-- src/index.tsx&#45;&gt;src/Components/Map/index.tsx -->
<g id="edge44" class="edge">
<title>src/index.tsx&#45;&gt;src/Components/Map/index.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M56.25,-504.89C71.7,-471.8 124.95,-357.79 144.08,-316.81"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="146.01,-317.64 146.65,-311.31 142.21,-315.86 146.01,-317.64"/>
</g>
<!-- src/index.tsx&#45;&gt;src/Components/Profile/index.tsx -->
<g id="edge45" class="edge">
<title>src/index.tsx&#45;&gt;src/Components/Profile/index.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M51.88,-504.89C51.68,-465.04 54.32,-302.91 107,-185 114.09,-169.12 126.89,-153.91 136.85,-143.53"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="138.49,-144.86 141.21,-139.11 135.5,-141.91 138.49,-144.86"/>
</g>
<!-- src/index.tsx&#45;&gt;src/Components/Templates/index.tsx -->
<g id="edge46" class="edge">
<title>src/index.tsx&#45;&gt;src/Components/Templates/index.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M52.59,-504.66C56.09,-451.3 74.92,-184.82 107,-110 113.85,-94.02 126.67,-78.82 136.71,-68.46"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="138.35,-69.8 141.1,-64.06 135.38,-66.83 138.35,-69.8"/>
</g>
<!-- src/index.tsx&#45;&gt;src/index.css -->
<g id="edge47" class="edge">
<title>src/index.tsx&#45;&gt;src/index.css</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M52.25,-523.16C53.53,-555.91 61.22,-669.29 107,-747 113.28,-757.66 123.32,-767.1 132.22,-774.13"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="130.97,-775.82 137.02,-777.78 133.52,-772.48 130.97,-775.82"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 57 KiB

View File

@ -0,0 +1,63 @@
import * as React from "react";
import { MouseEvent, useEffect, useRef } from "react";
const isClickInsideRectangle = (e: MouseEvent, element: HTMLElement) => {
const r = element.getBoundingClientRect();
return (
e.clientX > r.left &&
e.clientX < r.right &&
e.clientY > r.top &&
e.clientY < r.bottom
);
};
type Props = {
title: string;
isOpened: boolean;
onClose: () => void;
children: React.ReactNode;
};
const DialogModal = ({
title,
isOpened,
onClose,
children,
}: Props) => {
const ref = useRef<HTMLDialogElement>(null);
useEffect(() => {
if (isOpened) {
ref.current?.showModal();
document.body.classList.add("modal-open"); // prevent bg scroll
} else {
ref.current?.close();
document.body.classList.remove("modal-open");
}
}, [isOpened]);
return (
<dialog id="signup_modal" className='tw-card tw-shadow-xl tw-absolute tw-right-0 tw-top-0 tw-bottom-0 tw-left-0 tw-m-auto tw-transition-opacity tw-duration-300'
ref={ref}
onCancel={onClose}
onClick={(e) =>
ref.current && !isClickInsideRectangle(e, ref.current) && onClose()
}
>
<div className="tw-card-body tw-p-2">
<button className="tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-2 tw-top-2" onClick={onClose}></button>
<h2 className='tw-text-2xl tw-font-semibold tw-mb-2 tw-text-center'>{title}</h2>
{children}
</div>
</dialog>
);
};
export default DialogModal;

View File

@ -0,0 +1,66 @@
import {useState, useRef} from 'react'
import {Link} from 'react-router-dom'
import ErrorText from '../Typography/ErrorText'
import InputText from '../Input/InputText'
import * as React from 'react'
export function LoginPage(){
const INITIAL_LOGIN_OBJ = {
password : "",
emailId : ""
}
const [loading, setLoading] = useState(false)
const [errorMessage, setErrorMessage] = useState("")
const [loginObj, setLoginObj] = useState(INITIAL_LOGIN_OBJ)
const submitForm = (e) =>{
e.preventDefault()
setErrorMessage("")
if(loginObj.emailId.trim() === "")return setErrorMessage("Email Id is required! (use any value)")
if(loginObj.password.trim() === "")return setErrorMessage("Password is required! (use any value)")
else{
setLoading(true)
// Call API to check user credentials and save token in localstorage
localStorage.setItem("token", "DumyTokenHere")
setLoading(false)
window.location.href = '/app/welcome'
}
}
const updateFormValue = (val: string) => {
console.log(val)
}
return(
<div className="tw-flex-1 tw-bg-base-200 tw-flex tw-items-center">
<div className="tw-card tw-mx-auto tw-w-full tw-max-w-md tw-shadow-xl">
<div className="tw-grid md:tw-grid-cols-1 tw-grid-cols-1 tw-bg-base-100 tw-rounded-xl">
<div className='tw-py-10 tw-px-10'>
<h2 className='tw-text-2xl tw-font-semibold tw-mb-2 tw-text-center'>Login</h2>
<form onSubmit={(e) => submitForm(e)}>
<div className="tw-mb-4">
<InputText type="email" defaultValue={loginObj.emailId} containerStyle="tw-mt-4" labelTitle="E-Mail" updateFormValue={(v) => updateFormValue(v)}/>
<InputText defaultValue={loginObj.password} type="password" containerStyle="tw-mt-4" labelTitle="Password" updateFormValue={(v) => updateFormValue(v)}/>
</div>
<div className='tw-text-right tw-text-primary'><Link to="/forgot-password"><span className="tw-text-sm tw-inline-block hover:tw-text-primary hover:tw-underline hover:tw-cursor-pointer tw-transition tw-duration-200">Forgot Password?</span></Link>
</div>
<ErrorText styleClass="mt-8">{errorMessage}</ErrorText>
<button type="submit" className={"tw-btn tw-mt-2 tw-w-full tw-btn-primary" + (loading ? " tw-loading" : "")}>Login</button>
<div className='tw-text-center tw-mt-4'>Don't have an account yet? <Link to="/signup"><span className=" tw-inline-block hover:tw-text-primary hover:tw-underline hover:tw-cursor-pointer tw-transition tw-duration-200">Sign Up</span></Link></div>
</form>
</div>
</div>
</div>
</div>
)
}

View File

@ -0,0 +1,67 @@
import { useState, useRef } from 'react'
import { Link } from 'react-router-dom'
import ErrorText from '../Typography/ErrorText'
import InputText from '../Input/InputText'
import * as React from 'react'
export function SignupPage() {
const INITIAL_REGISTER_OBJ = {
name : "",
password : "",
emailId : ""
}
const [loading, setLoading] = useState(false)
const [errorMessage, setErrorMessage] = useState("")
const [registerObj, setRegisterObj] = useState(INITIAL_REGISTER_OBJ)
const submitForm = (e) =>{
e.preventDefault()
setErrorMessage("")
if(registerObj.name.trim() === "")return setErrorMessage("Name is required! (use any value)")
if(registerObj.emailId.trim() === "")return setErrorMessage("Email Id is required! (use any value)")
if(registerObj.password.trim() === "")return setErrorMessage("Password is required! (use any value)")
else{
setLoading(true)
// Call API to check user credentials and save token in localstorage
localStorage.setItem("token", "DumyTokenHere")
setLoading(false)
window.location.href = '/app/welcome'
}
}
const updateFormValue = (val: string) => {
console.log(val)
}
return (
<div className="tw-flex-1 tw-bg-base-200 tw-flex tw-items-center">
<div className="tw-card tw-mx-auto tw-w-full tw-max-w-md tw-shadow-xl">
<div className="tw-grid md:tw-grid-cols-1 tw-grid-cols-1 tw-bg-base-100 tw-rounded-xl">
<div className='tw-py-10 tw-px-10'>
<h2 className='tw-text-2xl tw-font-semibold tw-mb-2 tw-text-center'>Sign Up</h2>
<form onSubmit={(e) => submitForm(e)}>
<div className="mb-4">
<InputText defaultValue={registerObj.name} containerStyle="tw-mt-4" labelTitle="Name" updateFormValue={updateFormValue} />
<InputText defaultValue={registerObj.emailId} containerStyle="tw-mt-4" labelTitle="E-Mail" updateFormValue={updateFormValue} />
<InputText defaultValue={registerObj.password} type="password" containerStyle="tw-mt-4" labelTitle="Password" updateFormValue={updateFormValue} />
</div>
<ErrorText styleClass="tw-mt-8">{errorMessage}</ErrorText>
<button type="submit" className={"tw-btn tw-mt-2 tw-w-full tw-btn-primary" + (loading ? " tw-loading" : "")}>Register</button>
<div className='tw-text-center tw-mt-4'>Already have an account? <Link to="/login"><span className=" tw-inline-block hover:tw-text-primary hover:tw-underline hover:tw-cursor-pointer tw-transition tw-duration-200">Login</span></Link></div>
</form>
</div>
</div>
</div>
</div>
)
}

View File

@ -0,0 +1,9 @@
import * as React from "react"
function ErrorText({styleClass, children}){
return(
<p className={`tw-text-center tw-text-error ${styleClass}`}>{children}</p>
)
}
export default ErrorText