{"version":3,"sources":["components/sticky-footer/index.js","lib/api-factory.js","atoms/tracker-atoms.js","screens/categories.js","screens/subcategory.js","screens/subject.js","App.js","index.js"],"names":["Phantom","styled","div","display","padding","height","width","Footer","backgroundColor","textAlign","position","left","bottom","StickyFooter","props","children","httpClient","environment","process","REACT_APP_ENVIRONMENT","console","log","api_url","axios","create","baseURL","currentSelectionsAtom","atom","key","default","getCategoriesQuery","selector","get","a","response","data","useRecoilState","setCurrentSelections","categoriesData","useRecoilValue","history","useHistory","useEffect","subCategoryChange","e","selections","JSON","parse","push","subcategoryid","Container","Row","style","paddingLeft","className","xs","md","lg","map","c","i","Col","Card","Img","variant","src","category","Body","Title","DropdownButton","title","onSelect","subcategories","sub","Dropdown","Item","id","eventKey","stringify","subcategory","name","Text","color","toLowerCase","marginTop","Jumbotron","fluid","useStyles","makeStyles","theme","root","flexWrap","justifyContent","overflowX","overflowY","palette","background","paper","gridList","icon","pagination","spacing","getSubCategoriesQuery","selectorFamily","subid","classes","params","match","useState","currentSet","setCurrentSet","page","setPage","pageCount","setPageCount","mySelections","subCategoriesData","getCurrentSet","Math","ceil","length","error","value","dataArray","_currentSet","_to","Breadcrumb","href","active","GridList","cellHeight","GridListTile","cols","Typography","tile","images","thumbnail","alt","GridListTileBar","subtitle","author","actionIcon","to","Pagination","count","onChange","event","statusBadge","status","_s","includes","getSubjectQuery","currentImage","setCurrentImage","imageGallery","useRef","subject","currentImageHandler","index","current","getCurrentIndex","items","span","sm","Hidden","xsDown","scientificName","Badge","habitat","paddingTop","Image","rangmeMap","smUp","Tabs","defaultActiveKey","transition","Tab","maxWidth","thumbnailPosition","showFullscreenButton","ref","onImageLoad","onSlide","showPlayButton","fontSize","photoBy","dangerouslySetInnerHTML","__html","description","queryCache","QueryCache","App","Suspense","fallback","hashType","Navbar","bg","expand","Brand","Toggle","aria-controls","Collapse","exact","path","component","Categories","SubCategory","Subject","route","toString","Date","getFullYear","Component","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.25ff1aa6.chunk.js","sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nconst Phantom = styled.div({\r\n    display: 'block',\r\n    padding: '10px',\r\n    height: '40px',\r\n    width: '100%'\r\n});\r\n\r\nconst Footer = styled.div({\r\n    backgroundColor: \"#5E9DDF\",\r\n    textAlign: \"center\",\r\n    padding: \"10px\",\r\n    position: \"fixed\",\r\n    left: \"0\",\r\n    bottom: \"0\",\r\n    height: \"40px\",\r\n    width: \"100%\"\r\n});\r\n\r\n\r\nconst StickyFooter = (props) => {\r\n    return (\r\n        <div>\r\n            <Phantom />\r\n            <Footer>\r\n                { props.children }\r\n            </Footer>\r\n        </div>\r\n    )\r\n};\r\n\r\nexport default StickyFooter","import axios from 'axios';\r\n\r\nexport const httpClient = () => {\r\n    var environment = process.env.REACT_APP_ENVIRONMENT;\r\n\r\n    console.log(\"ENV\", environment);\r\n\r\n    var api_url = environment === \"development\" ?\r\n        \"http://localhost:3101\" :\r\n        \"https://api.discoverthewild.org/v1\";\r\n\r\n    const ax = axios.create({\r\n        baseURL: api_url\r\n    });\r\n\r\n    return ax;\r\n};","import { atom } from \"recoil\";\r\n\r\nexport const currentSelectionsAtom = atom({\r\n    key: 'currentSelectionsAtom',\r\n    default: {}\r\n});\r\n","import React, { useEffect  } from 'react';\r\nimport { httpClient } from '../lib/api-factory';\r\n\r\nimport {\r\n    Card,\r\n    Container,\r\n    Row,\r\n    Col,\r\n    DropdownButton,\r\n    Dropdown,\r\n    Jumbotron\r\n} from 'react-bootstrap';\r\n\r\nimport { useRecoilState, useRecoilValue, selector } from 'recoil';\r\nimport { currentSelectionsAtom } from '../atoms/tracker-atoms';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\nconst getCategoriesQuery = selector({\r\n    key: 'getCategoriesQuery',\r\n    get: async () => {\r\n        const response = await httpClient().get(`/category-data`);\r\n        return response.data;\r\n    }\r\n});\r\n\r\nexport default (props) => {\r\n    const [_, setCurrentSelections] = useRecoilState(currentSelectionsAtom);\r\n    const categoriesData = useRecoilValue(getCategoriesQuery); \r\n    let history = useHistory();\r\n\r\n\r\n    useEffect(() => { \r\n        console.log(\"LOADED\", categoriesData);\r\n    }, []);\r\n\r\n    const subCategoryChange = (e) => {\r\n        var selections = JSON.parse(e);\r\n        setCurrentSelections(selections);\r\n        history.push(`/subcategory/${selections.subcategoryid}`);\r\n    };\r\n\r\n    return (\r\n        <>\r\n            <br />\r\n\r\n            <Container>\r\n                <Row>\r\n                    <h1 style={{textAlign: \"left\", paddingLeft: \"30px\"}}>\r\n                        Welcome to <span className=\"app-name-font\">Discover The Wild</span>\r\n                    </h1>&copy;\r\n                </Row>\r\n\r\n                <Row xs={1} md={3} lg={6}>\r\n                { categoriesData?.map((c, i) => \r\n                    <Col key={`cat-${i}`} style={{textAlign: \"center\"}}>\r\n                        <Card className=\"category-card\">\r\n                            <Card.Img variant=\"top\" src={`thumbs/${c.category}.jpg`} />\r\n                            \r\n                            <Card.Body style={{backgroundColor: \"#579CDF\", padding: \"0\"}}>\r\n                                <Card.Title>\r\n                                    <DropdownButton title={c.category} variant=\"link\" className=\"subCategoryLinkMain\" onSelect={subCategoryChange}>\r\n                                        { c.subcategories?.map((sub, i) =>\r\n                                            <Dropdown.Item \r\n                                                key={`sub_${sub.id}`}\r\n                                                eventKey={JSON.stringify({\r\n                                                    category: c.category,\r\n                                                    subcategory: sub.name,\r\n                                                    subcategoryid: sub.id\r\n                                                })}>\r\n                                                {sub.name}\r\n                                            </Dropdown.Item>\r\n                                        )}\r\n                                    </DropdownButton>\r\n                                </Card.Title>\r\n\r\n                                <Card.Text style={{padding: \"5px 5px 20px 5px\", color: \"#c6e4ff\"}}>\r\n                                    Select a sub-category above to see a list of {c.category.toLowerCase()}.\r\n                                </Card.Text>\r\n                            </Card.Body>\r\n                        </Card>\r\n                    </Col>\r\n                )}\r\n                </Row>\r\n                \r\n                <Row>\r\n                    <hr style={{width: \"100%\", backgroundColor:\"#D9E9F7\", marginTop: \"30px\"}} />\r\n\r\n                    <Jumbotron fluid className=\"intro-text\">\r\n                        <Container>\r\n                            <h4>about ~</h4>\r\n\r\n                            <p>\r\n                                This site is dedicated to bringing my passion of nature to you. It is a work\r\n                                in progress and will continue over a lifetime.I encourage you to participate in adding to the site. Send \"your\"\r\n                                animal photographs along with information for that animal and your name. Submissions meeting approval will be added \r\n                                to the site.\r\n                                <br /><br />\r\n                                There are far too many animals in the world for one person to tackle alone so you will find some of the categories\r\n                                have limited or no animals at all. Keep checking back, more are added all of the time. \r\n                                <br /><br />\r\n                                Begin by selecting one of the sub-categories above or by using the search.\r\n                            </p>\r\n                        </Container>\r\n                    </Jumbotron>\r\n                </Row>\r\n            </Container>\r\n        </>\r\n    );\r\n}","import React, { useState, useEffect  } from 'react';\r\nimport { NavLink } from 'react-router-dom';\r\nimport { httpClient } from '../lib/api-factory';\r\nimport { Breadcrumb } from 'react-bootstrap';\r\nimport { useRecoilValue, selectorFamily } from 'recoil';\r\nimport { currentSelectionsAtom } from '../atoms/tracker-atoms';\r\n\r\n//==================\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport GridList from '@material-ui/core/GridList';\r\nimport GridListTile from '@material-ui/core/GridListTile';\r\nimport GridListTileBar from '@material-ui/core/GridListTileBar';\r\nimport InfoIcon from '@material-ui/icons/Info';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Pagination from '@material-ui/lab/Pagination';\r\n//==================\r\n\r\nconst useStyles = makeStyles((theme) => ({   //GET RID OF IMAGES AND JSON SERVER\r\n    root: {\r\n      display: 'flex',\r\n      flexWrap: 'wrap',\r\n      justifyContent: 'space-around',\r\n      overflowX: 'hidden',\r\n      overflowY: 'auto',\r\n      backgroundColor: theme.palette.background.paper\r\n    },\r\n    gridList: {\r\n      width: \"100%\",\r\n      height: 500,\r\n    },\r\n    icon: {\r\n      color: 'rgba(255, 255, 255, 0.54)',\r\n    },\r\n    pagination: {\r\n        '& > * + *': {\r\n            marginTop: theme.spacing(2),\r\n        },\r\n    }\r\n}));\r\n\r\nconst getSubCategoriesQuery = selectorFamily({\r\n    key: 'getSubCategoriesQuery',\r\n    get: subid => async () => {\r\n        const response = await httpClient().get(`/wl/${subid}`);\r\n        return response.data;\r\n    }\r\n});\r\n\r\nexport default (props) => {\r\n    const classes = useStyles();\r\n    var {params} = props.match;\r\n\r\n    const [currentSet, setCurrentSet] = useState([]);\r\n    const [page, setPage] = useState(1); \r\n    const [pageCount, setPageCount] = useState(0); \r\n    const mySelections = useRecoilValue(currentSelectionsAtom);\r\n    const subCategoriesData = useRecoilValue(getSubCategoriesQuery(params.subid)); \r\n\r\n    useEffect(() => { \r\n        (async () => {\r\n            try {\r\n                getCurrentSet(1, subCategoriesData);\r\n                setPageCount(Math.ceil(subCategoriesData.length / 10));\r\n\r\n                console.log(\"useEffect sub-categories called\");\r\n            }\r\n            catch(error) {\r\n\r\n            }\r\n        })();\r\n    }, []);\r\n\r\n    const getCurrentSet = (value, dataArray) => {\r\n        var _currentSet = [];\r\n        var _to = value * 10;\r\n        var _from = _to - 10;\r\n\r\n        for(let i = _from; i < _to; i++) {\r\n            if(typeof dataArray[i] !== 'undefined') {\r\n                _currentSet.push(dataArray[i]);\r\n            }\r\n        }\r\n        \r\n        setCurrentSet(_currentSet);\r\n    };\r\n\r\n    const handleChange = (event, value) => { \r\n        setPage(value);\r\n        getCurrentSet(value, subCategoriesData);\r\n    };\r\n\r\n    return (\r\n        <>\r\n            <Breadcrumb>\r\n                <Breadcrumb.Item href=\"#/\">\r\n                    Categories\r\n                </Breadcrumb.Item>\r\n                <Breadcrumb.Item active>{mySelections.subcategory}</Breadcrumb.Item>\r\n            </Breadcrumb>\r\n\r\n            <div className=\"app-page\">\r\n                <div><h2>{mySelections.subcategory}</h2></div>\r\n\r\n                { pageCount > 0 ? \r\n                <>\r\n                <div className={classes.root}>\r\n                    <GridList cellHeight={180} className={classes.gridList}>\r\n                        <GridListTile key=\"Subheader\" cols={5} style={{ height: 'auto', width: \"100%\" }}>\r\n                            <Typography>\r\n                                Browser through the images below. To view more information about the animal you have selected\r\n                                click on the info icon <InfoIcon />. \r\n                                {/*Replace this text with sub-category descriptions*/}\r\n                            </Typography>\r\n                        </GridListTile>\r\n\r\n                        {currentSet.map((tile) => (\r\n                        <GridListTile style={{width: \"280px\"}} key={`subject_${tile.id}`}>\r\n                            <img src={tile.images[0].thumbnail} alt={tile.name} style={{width: \"280px\", height: \"180px\"}} /> \r\n                            {/*todo: get from data 270x180     \"https://picsum.photos/id/977/270/180\"        */}\r\n\r\n                            <GridListTileBar\r\n                                title={tile.name}\r\n                                subtitle={<span>by: {tile.author || \"SBrickner\"}</span>}\r\n                                actionIcon={\r\n                                    <NavLink to={`/subject/${tile.id}`} className={classes.icon}>\r\n                                        <InfoIcon />\r\n                                    </NavLink>\r\n                                }\r\n                            />\r\n                        </GridListTile>\r\n                        ))}\r\n                    </GridList>\r\n                </div>\r\n\r\n                <div className={classes.pagination}>\r\n                    <Typography>Page: {page} of {pageCount}</Typography>\r\n                    <Pagination count={pageCount} page={page} onChange={handleChange} />\r\n                </div>\r\n                </>\r\n                :\r\n                <div>\r\n                    Nothing yet but keep checking back, or be the first to add something.\r\n                </div>\r\n                }\r\n            </div>\r\n        </>\r\n    );\r\n}","import React, { useState, useEffect, useRef  } from 'react';\r\nimport { httpClient } from '../lib/api-factory';\r\nimport { useRecoilValue, selectorFamily } from 'recoil';\r\n\r\nimport {\r\n    Container,\r\n    Row,\r\n    Col,\r\n    Breadcrumb,\r\n    Badge,\r\n    Image,\r\n    Tabs, \r\n    Tab\r\n} from 'react-bootstrap';\r\n\r\nimport Hidden from '@material-ui/core/Hidden';\r\n\r\n//https://www.npmjs.com/package/react-image-gallery\r\nimport ImageGallery from 'react-image-gallery';\r\nimport \"react-image-gallery/styles/css/image-gallery.css\";\r\n\r\nconst statusBadge = (status) => {\r\n    var _s = status ? status.toLowerCase() : \"success\";\r\n    if([\"common\", \"low risk\"].includes(_s)) return \"success\";\r\n    if([\"vulnerable\"].includes(_s)) return \"warning\";\r\n    if([\"endangered\"].includes(_s)) return \"danger\";\r\n    return \"success\";\r\n};\r\n\r\nconst getSubjectQuery = selectorFamily({\r\n    key: 'getSubjectQuery',\r\n    get: id => async () => {\r\n        const response = await httpClient().get(`/subject/${id}`);\r\n        return response.data;\r\n    }\r\n});\r\n\r\nexport default (props) => {\r\n    var {params} = props.match;\r\n\r\n    const [currentImage, setCurrentImage] = useState({});\r\n    const imageGallery = useRef(null);\r\n    const subject = useRecoilValue(getSubjectQuery(params.id)); \r\n\r\n    useEffect(() => {\r\n        console.log(\"useEffect subject called\");\r\n    }, []);\r\n\r\n    const currentImageHandler = (e) => {\r\n        var index = imageGallery?.current?.getCurrentIndex();\r\n        setCurrentImage(imageGallery?.current?.props?.items[index] || {});\r\n    };\r\n\r\n    //https://picsum.photos/id/977/800/500/\r\n\r\n    return (\r\n        <>\r\n            <Breadcrumb>\r\n                <Breadcrumb.Item href=\"#/\">\r\n                    Categories\r\n                </Breadcrumb.Item>\r\n                <Breadcrumb.Item href={`#/subcategory/${subject.subid}`}>\r\n                    {subject.subcategory}\r\n                </Breadcrumb.Item>\r\n                <Breadcrumb.Item active>{subject.name}</Breadcrumb.Item>\r\n            </Breadcrumb>\r\n\r\n            <div className=\"app-page\">\r\n                <Container fluid className=\"page-container\">\r\n                    <Row>\r\n                        <Col span={12}>\r\n                            <div>\r\n                                <h2>\r\n                                    {subject.name}\r\n                                </h2>\r\n                            </div> \r\n                        </Col>\r\n                    </Row>\r\n\r\n                    <Row>\r\n                        <Col sm ={12} md={4}>\r\n                            <Hidden xsDown>\r\n                                <div style={{backgroundColor: \"#fffdcd\", padding: \"10px 0 10px 10px\"}}>\r\n                                    <div>\r\n                                        <b>Scientific name:</b> {subject.scientificName || \"Unknown\"}\r\n                                    </div>\r\n\r\n                                    <div>\r\n                                        <b>Status:</b>\r\n                                        <Badge variant={statusBadge(subject.status)}>\r\n                                            {subject.status || \"Unknown\"}\r\n                                        </Badge>\r\n                                    </div>\r\n\r\n                                    <div>\r\n                                        <b>Habitat:</b> {subject.habitat || \"Unknown\"}\r\n                                    </div>\r\n\r\n                                    <div>\r\n                                        <b>Length:</b> {subject.length || \"Unknown\"}\r\n                                    </div>\r\n\r\n                                    <div style={{paddingTop: \"20px\"}}>\r\n                                        <Image src={subject.rangmeMap || \"images/location_blank.jpg\"} alt=\"map\" style={{width: \"50%\", height: \"50%\"}} fluid />\r\n                                        {/*https://place-hold.it/525x525  todo: change to S3 location  */}\r\n                                    </div>\r\n                                </div>\r\n                            </Hidden>\r\n\r\n                            <Hidden smUp>\r\n                                <Tabs defaultActiveKey=\"home\" transition={false} id=\"noanim-tab-example\">\r\n                                    <Tab eventKey=\"home\" title=\"Description\" style={{backgroundColor: \"#fffdcd\"}}>\r\n                                        <div>\r\n                                            <b>Scientific name:</b> {subject.scientificName || \"Unknown\"}\r\n                                        </div>\r\n\r\n                                        <div>\r\n                                            <b>Status:</b>\r\n                                            <Badge variant={statusBadge(subject.status)}>\r\n                                                {subject.status || \"Unknown\"}\r\n                                            </Badge>\r\n                                        </div>\r\n\r\n                                        <div>\r\n                                            <b>Habitat:</b> {subject.habitat || \"Unknown\"}\r\n                                        </div>\r\n\r\n                                        <div>\r\n                                            <b>Length:</b> {subject.length || \"Unknown\"}\r\n                                        </div>\r\n                                    </Tab>\r\n\r\n                                    <Tab eventKey=\"profile\" title=\"Distribution\" style={{backgroundColor: \"#fffdcd\"}}>\r\n                                        <div style={{paddingTop: \"20px\"}}>\r\n                                            <Image src={subject.rangmeMap || \"https://place-hold.it/525x525\"} alt=\"map\" style={{width: \"50%\", height: \"50%\"}} fluid />\r\n                                        </div>\r\n                                    </Tab>\r\n                                </Tabs>\r\n                            </Hidden>\r\n                        </Col>\r\n\r\n                        <Col sm={12} md={8}>\r\n                            <div style={{maxWidth: \"800px\", backgroundColor: \"#E9ECEF\", padding: \"10px\"}}>\r\n                                { subject.images && subject.images.length > 0 ?\r\n                                <ImageGallery \r\n                                    items={subject.images} \r\n                                    thumbnailPosition=\"left\" \r\n                                    showFullscreenButton={false}\r\n                                    ref={imageGallery}\r\n                                    onImageLoad={currentImageHandler}\r\n                                    onSlide={currentImageHandler}\r\n                                    showPlayButton={true}\r\n                                />\r\n                                :\r\n                                <div>\r\n                                    <Image src=\"https://place-hold.it/800x500\" alt=\"Image not available\" fluid />\r\n                                </div>\r\n                                }\r\n                            </div>\r\n                            \r\n                            <div style={{fontSize: \".85em\", paddingTop: \"4px\"}}>\r\n                                { currentImage.photoBy ? `Photo by: ${currentImage.photoBy}` : \"Uncredited photo\" }\r\n                            </div>\r\n                        </Col>\r\n                    </Row>\r\n\r\n                    <Row>\r\n                        <Col span={12}>\r\n                            <div style={{paddingTop: \"30px\"}}>\r\n                                <h5>Description</h5>\r\n                            </div>\r\n\r\n                            <div style={{width: \"80%\"}}\r\n                                dangerouslySetInnerHTML={{\r\n                                    __html: subject.description || \"Description unknown\"\r\n                                }}>\r\n                            </div>\r\n                        </Col>\r\n                    </Row>\r\n                </Container>\r\n            </div>\r\n        </>\r\n    );\r\n}","import React, { Component } from 'react';\nimport { Route, HashRouter } from 'react-router-dom';\nimport { QueryCache, ReactQueryCacheProvider } from 'react-query';\n//import ReactGA from 'react-ga';\nimport './index.css';\n//import { LinkContainer } from 'react-router-bootstrap';\nimport StickyFooter from './components/sticky-footer';\n\nimport { RecoilRoot } from 'recoil';\n\n//bootstrap\n//import Form from 'react-bootstrap/Form';\n//import FormControl from 'react-bootstrap/FormControl';\nimport { \n    //Button, \n    Navbar \n} from 'react-bootstrap';\n\n//screens\nimport Categories from './screens/categories';\nimport SubCategory from './screens/subcategory';\nimport Subject from './screens/subject';\n\n//https://www.npmjs.com/package/react-ga\n//https://medium.com/brownbag/add-google-analytics-to-create-react-app-project-with-react-router-v4-f12b947262fc\n/*const initializeReactGA = () => {\n    ReactGA.initialize('UA-7618665-1'); //actual id, not called yet\n    ReactGA.pageview('/');\n}*/\n\nconst getRoutes = (auth) => {\n    return [\n        {\n            exact: true,\n            path: \"/\",\n            component: Categories\n        },\n        {\n            path: \"/subcategory/:subid\",\n            component: SubCategory\n        },\n        {\n            path: \"/subject/:id\",\n            component: Subject\n        }\n    ];\n}\n\nconst queryCache = new QueryCache();\n\nclass App extends Component {\n    render() {\n        return (\n            <RecoilRoot>\n                <React.Suspense fallback={<div>Loading...</div>}>\n                    <ReactQueryCacheProvider queryCache={queryCache}>\n                    <div className=\"App\">\n                        <HashRouter hashType=\"slash\">\n                            <div>\n                                <div>\n                                    <Navbar bg=\"light\" variant=\"light\" expand=\"lg\" className=\"app-nav-bar\">\n                                        <Navbar.Brand href=\"/\" className=\"app-name-font app-name-main\">\n                                            Discover The Wild\n                                        </Navbar.Brand>\n\n                                        <Navbar.Toggle aria-controls=\"basic-navbar-nav\" />\n\n                                        <Navbar.Collapse id=\"basic-navbar-nav\">\n                                            {/*<Nav className=\"mr-auto\">\n                                                <LinkContainer to=\"/\">\n                                                    <Nav.Link>Categories</Nav.Link>\n                                                </LinkContainer>\n                                            </Nav>*/}\n                                            {/*<div style={{width: \"70%\"}}></div>\n\n                                            <Form inline>\n                                                <FormControl type=\"text\" placeholder=\"Search\" className=\"mr-sm-2\" />\n                                                <Button variant=\"outline-primary\" className=\"app-nav-bar-search-button\">Search</Button>\n                                            </Form>*/}\n                                        </Navbar.Collapse>\n                                    </Navbar>\n                                </div>\n\n                                <div className=\"header-base\"></div>\n\n                                <div>\n                                    {getRoutes().map((route, i) =>\n                                        <Route key={i.toString()} {...route} />\n                                    )}\n                                </div>\n                            </div>\n                        </HashRouter>\n\n                        <StickyFooter>\n                            <p style={{fontSize: \".75em\", color: \"#fff\"}} className=\"ml-auto\">\n                                &copy; Discover The Wild (2006 - {new Date().getFullYear()})\n                            </p>\n                        </StickyFooter>\n                    </div>\n                    </ReactQueryCacheProvider>\n                </React.Suspense>\n            </RecoilRoot>\n        );\n    }\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport './index.css';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n"],"sourceRoot":""}