src/assets/component-diagram.drawio.svg

<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="541px" height="361px" viewBox="-0.5 -0.5 541 361" content="&lt;mxfile&gt;&lt;diagram id=&quot;t_OTOLR6wh7CQ6CwQKDX&quot; name=&quot;Page-1&quot;&gt;zZdNc5swEIZ/DdP2kI5BtuscYyduLu3F0+lZQRtQLSRGEv7or+8KhG0sk8khNb4w4tUH6NndFxGRRbH7rmmZ/1AMRJSM2C4ij1GSjMkIr07YN0JMpnGjZJozrx2FFf8LXvQTs4ozMJ2BVilhedkVUyUlpLajUa3VtjvsVYnuU0uaQSCsUipC9TdnNm/U2WR01J+BZ3n75HjkewraDvaCySlT2xOJPEVkoZWyTavYLUA4eC2XZt6yp/fwYhqkfc8E0kzYUFH5vfn3svt2s1pVkoEbP4rIfJtzC6uSpq53i+FFLbeFwLsYm3450BZ2va8UHzaKGQKqAKv3OMRPaLPDJ8cdmXlhe0Q9GXstP8FMpl6kPrzZYe0jAWx4CJeBjAMgD2X59Y/ZBVxwh7a7eWO1WsNCCaVRkUriyPkrF+JMooJnEm9TJAKozx0vjun14DsKzph7zEXa3Xh8APBk+g7i00vAP4D3JOA9d/UJDfKpcIhfNLYy1/pscle8OF3ipTKgP5m6poFGycLFB6hO87qwmoEvbqMpt/umH0tdYL25KZYba+4oY6a2D+dH1OQvimr25Y0iiK9SBJOzkMT3YUji5EJM4skHBGUaBGWJjgS6JyiCy3XLMHPwNZRqeIbj8aAQv12AqKviAj+Xxy4JS2Vs/dUqCtxindiSuRyurFXS1OmrHWPFZdYCd4l+GCn4Gszw5Ek8KPlZQH5V20Kfp7Se0XhCaxqSFnBmGjVwdIwbNIx4Nijy+wD5My7SB9x95RoPX6rKDg/v3G3J5Jrs2mI5hQeU9dutyjD5ls413JM31FJsLB3Vm6AZpOKVccbhkUKhgRY/6aaHqKQbnlELhxKvF0QfLvHAhk48PNPAUa/MNAmY/sL0e2z9r/dgUNupej0euPyx7eCqN8A2OCf8V7Z4e/y9q/tOfpLJ0z8=&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs/>
    <g>
        <rect x="0" y="0" width="540" height="360" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <rect x="230" y="0" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 15px; margin-left: 231px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                App.jsx
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="260" y="19" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    App.jsx
                </text>
            </switch>
        </g>
        <rect x="20" y="190" width="120" height="150" rx="18" ry="18" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 265px; margin-left: 21px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Browse.jsx
                                <br/>
                                (shows in user's area, search shows by city, follow artists-adds to dashboard)
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="80" y="269" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Browse.jsx...
                </text>
            </switch>
        </g>
        <rect x="410" y="190" width="120" height="150" rx="18" ry="18" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 265px; margin-left: 411px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Footer.jsx
                                <br/>
                                (link to gh repo)
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="470" y="269" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Footer.jsx...
                </text>
            </switch>
        </g>
        <rect x="280" y="190" width="120" height="150" rx="18" ry="18" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 265px; margin-left: 281px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Forum
                                <br/>
                                (users post comments and buttons for going to show and likes)
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="340" y="269" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Forum...
                </text>
            </switch>
        </g>
        <rect x="150" y="190" width="120" height="150" rx="18" ry="18" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 265px; margin-left: 151px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Search.jsx
                                <br/>
                                (search artist by name, follow to add to dashboard)
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="210" y="269" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Search.jsx...
                </text>
            </switch>
        </g>
        <rect x="20" y="30" width="120" height="150" rx="18" ry="18" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 105px; margin-left: 21px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Home.jsx
                                <br/>
                                (sign in/out)
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="80" y="109" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Home.jsx...
                </text>
            </switch>
        </g>
        <rect x="150" y="30" width="120" height="150" rx="18" ry="18" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 105px; margin-left: 151px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Header.jsx
                                <br/>
                                (logo/user avatar/signout)
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="210" y="109" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Header.jsx...
                </text>
            </switch>
        </g>
        <rect x="280" y="30" width="120" height="150" rx="18" ry="18" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 105px; margin-left: 281px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                BottomNav.jsx
                                <br/>
                                (navigate to all components)
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="340" y="109" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    BottomNav.jsx...
                </text>
            </switch>
        </g>
        <rect x="410" y="30" width="120" height="150" rx="18" ry="18" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 105px; margin-left: 411px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                UserDashboard.jsx
                                <br/>
                                (list of artists user follows)
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="470" y="109" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    UserDashboard.jsx...
                </text>
            </switch>
        </g>
    </g>
    <switch>
        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
                Text is not SVG - cannot display
            </text>
        </a>
    </switch>
</svg>