├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.js ├── data.js ├── index.css └── index.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `yarn build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "contact-list-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^13.0.0", 8 | "@testing-library/user-event": "^13.2.1", 9 | "bootstrap": "^5.2.0", 10 | "react": "^18.2.0", 11 | "react-bootstrap": "^2.4.0", 12 | "react-dom": "^18.2.0", 13 | "react-scripts": "5.0.1", 14 | "web-vitals": "^2.1.0" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fireclint/filter-contact-list-react/9375b0ab6cb697bed03e81abcdfa8eacda18ae32/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Contact Keeper 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fireclint/filter-contact-list-react/9375b0ab6cb697bed03e81abcdfa8eacda18ae32/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fireclint/filter-contact-list-react/9375b0ab6cb697bed03e81abcdfa8eacda18ae32/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import Table from 'react-bootstrap/Table'; 3 | import Container from 'react-bootstrap/Container'; 4 | import Form from 'react-bootstrap/Form'; 5 | import InputGroup from 'react-bootstrap/InputGroup'; 6 | import 'bootstrap/dist/css/bootstrap.min.css'; 7 | import { data } from './data.js'; 8 | 9 | function App() { 10 | const [contacts, setContacts] = useState(data); 11 | const [search, setSearch] = useState(''); 12 | 13 | // const sortName = () => { 14 | // setContacts( 15 | // data.sort((a, b) => { 16 | // return a.first_name.toLowerCase() < a.first_name.toLowerCase() 17 | // ? -1 18 | // : a.first_name.toLowerCase() > a.first_name.toLowerCase() 19 | // ? 1 20 | // : 0; 21 | // }) 22 | // ); 23 | // }; 24 | 25 | return ( 26 |
27 | 28 |

Contact Keeper

29 |
30 | 31 | 32 | {/* onChange for search */} 33 | setSearch(e.target.value)} 35 | placeholder='Search contacts' 36 | /> 37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | {data 50 | .filter((item) => { 51 | return search.toLowerCase() === '' 52 | ? item 53 | : item.first_name.toLowerCase().includes(search); 54 | }) 55 | .map((item, index) => ( 56 | 57 | 58 | 59 | 60 | 61 | 62 | ))} 63 | 64 |
First NameLast NameEmailPhone
{item.first_name}{item.last_name}{item.email}{item.phone}
65 | 66 |
67 | ); 68 | } 69 | 70 | export default App; 71 | -------------------------------------------------------------------------------- /src/data.js: -------------------------------------------------------------------------------- 1 | export const data = [ 2 | { 3 | id: 1, 4 | first_name: 'Wilmette', 5 | last_name: 'Maasz', 6 | email: 'wmaasz0@jalbum.net', 7 | phone: '130-309-6439', 8 | }, 9 | { 10 | id: 2, 11 | first_name: 'Morry', 12 | last_name: 'Heater', 13 | email: 'mheater1@yale.edu', 14 | phone: '814-809-2958', 15 | }, 16 | { 17 | id: 3, 18 | first_name: 'Laverne', 19 | last_name: 'MacMorland', 20 | email: 'lmacmorland2@webnode.com', 21 | phone: '271-342-7249', 22 | }, 23 | { 24 | id: 4, 25 | first_name: 'Cindee', 26 | last_name: 'De Freitas', 27 | email: 'cdefreitas3@privacy.gov.au', 28 | phone: '617-624-6967', 29 | }, 30 | { 31 | id: 5, 32 | first_name: 'Carole', 33 | last_name: 'Reffe', 34 | email: 'creffe4@nih.gov', 35 | phone: '738-966-3137', 36 | }, 37 | { 38 | id: 6, 39 | first_name: 'Ansel', 40 | last_name: 'Iwanicki', 41 | email: 'aiwanicki5@pagesperso-orange.fr', 42 | phone: '716-371-2467', 43 | }, 44 | { 45 | id: 7, 46 | first_name: 'Herold', 47 | last_name: 'Mungham', 48 | email: 'hmungham6@goodreads.com', 49 | phone: '659-298-5396', 50 | }, 51 | { 52 | id: 8, 53 | first_name: 'Sibeal', 54 | last_name: 'Andreacci', 55 | email: 'sandreacci7@bloomberg.com', 56 | phone: '508-876-5450', 57 | }, 58 | { 59 | id: 9, 60 | first_name: 'Eustacia', 61 | last_name: 'Matteuzzi', 62 | email: 'ematteuzzi8@rakuten.co.jp', 63 | phone: '953-375-3684', 64 | }, 65 | { 66 | id: 10, 67 | first_name: 'Tiebold', 68 | last_name: 'Powe', 69 | email: 'tpowe9@dmoz.org', 70 | phone: '574-154-1045', 71 | }, 72 | { 73 | id: 11, 74 | first_name: 'Deloris', 75 | last_name: 'Flintoffe', 76 | email: 'dflintoffea@usa.gov', 77 | phone: '281-262-2474', 78 | }, 79 | { 80 | id: 12, 81 | first_name: 'Janela', 82 | last_name: 'Coite', 83 | email: 'jcoiteb@columbia.edu', 84 | phone: '241-621-1528', 85 | }, 86 | { 87 | id: 13, 88 | first_name: 'Ines', 89 | last_name: 'Ginity', 90 | email: 'iginityc@studiopress.com', 91 | phone: '924-888-0857', 92 | }, 93 | { 94 | id: 14, 95 | first_name: 'Godfree', 96 | last_name: 'Bastistini', 97 | email: 'gbastistinid@pen.io', 98 | phone: '694-172-1204', 99 | }, 100 | { 101 | id: 15, 102 | first_name: 'Jazmin', 103 | last_name: 'Exrol', 104 | email: 'jexrole@networkadvertising.org', 105 | phone: '265-313-4188', 106 | }, 107 | { 108 | id: 16, 109 | first_name: 'Sacha', 110 | last_name: 'Sidwick', 111 | email: 'ssidwickf@home.pl', 112 | phone: '960-987-8058', 113 | }, 114 | { 115 | id: 17, 116 | first_name: 'Leonhard', 117 | last_name: 'Capron', 118 | email: 'lcaprong@zimbio.com', 119 | phone: '585-187-8345', 120 | }, 121 | { 122 | id: 18, 123 | first_name: 'My', 124 | last_name: 'Raiment', 125 | email: 'mraimenth@abc.net.au', 126 | phone: '557-179-7329', 127 | }, 128 | { 129 | id: 19, 130 | first_name: 'Riley', 131 | last_name: 'Botting', 132 | email: 'rbottingi@diigo.com', 133 | phone: '684-766-2752', 134 | }, 135 | { 136 | id: 20, 137 | first_name: 'Daron', 138 | last_name: 'Pinkney', 139 | email: 'dpinkneyj@redcross.org', 140 | phone: '872-837-1696', 141 | }, 142 | { 143 | id: 21, 144 | first_name: 'Susi', 145 | last_name: 'Leipelt', 146 | email: 'sleipeltk@reference.com', 147 | phone: '921-979-2052', 148 | }, 149 | { 150 | id: 22, 151 | first_name: 'Marco', 152 | last_name: 'Drinkhall', 153 | email: 'mdrinkhalll@wunderground.com', 154 | phone: '877-857-1366', 155 | }, 156 | { 157 | id: 23, 158 | first_name: 'Donal', 159 | last_name: 'Eronie', 160 | email: 'deroniem@google.fr', 161 | phone: '239-493-4126', 162 | }, 163 | { 164 | id: 24, 165 | first_name: 'Zane', 166 | last_name: 'Caulder', 167 | email: 'zcauldern@uiuc.edu', 168 | phone: '122-984-4442', 169 | }, 170 | { 171 | id: 25, 172 | first_name: 'Esma', 173 | last_name: 'Glencrash', 174 | email: 'eglencrasho@cnet.com', 175 | phone: '384-610-3439', 176 | }, 177 | { 178 | id: 26, 179 | first_name: 'Ailina', 180 | last_name: 'Raymond', 181 | email: 'araymondp@lycos.com', 182 | phone: '896-480-7485', 183 | }, 184 | { 185 | id: 27, 186 | first_name: 'Kaitlynn', 187 | last_name: 'Spearing', 188 | email: 'kspearingq@earthlink.net', 189 | phone: '801-590-3008', 190 | }, 191 | { 192 | id: 28, 193 | first_name: 'Tammara', 194 | last_name: 'Gynni', 195 | email: 'tgynnir@china.com.cn', 196 | phone: '411-827-8792', 197 | }, 198 | { 199 | id: 29, 200 | first_name: 'Osmond', 201 | last_name: 'Murthwaite', 202 | email: 'omurthwaites@blog.com', 203 | phone: '672-381-6692', 204 | }, 205 | { 206 | id: 30, 207 | first_name: 'Britta', 208 | last_name: 'Billings', 209 | email: 'bbillingst@wisc.edu', 210 | phone: '970-104-3746', 211 | }, 212 | { 213 | id: 31, 214 | first_name: 'Clarice', 215 | last_name: 'Linsay', 216 | email: 'clinsayu@issuu.com', 217 | phone: '334-704-0623', 218 | }, 219 | { 220 | id: 32, 221 | first_name: 'Jillie', 222 | last_name: 'Goburn', 223 | email: 'jgoburnv@nationalgeographic.com', 224 | phone: '100-589-9642', 225 | }, 226 | { 227 | id: 33, 228 | first_name: 'Kelvin', 229 | last_name: 'Wilds', 230 | email: 'kwildsw@alibaba.com', 231 | phone: '947-677-8040', 232 | }, 233 | { 234 | id: 34, 235 | first_name: 'Jeannette', 236 | last_name: 'Payle', 237 | email: 'jpaylex@devhub.com', 238 | phone: '168-817-0008', 239 | }, 240 | { 241 | id: 35, 242 | first_name: 'Zacherie', 243 | last_name: 'Rowthorn', 244 | email: 'zrowthorny@ezinearticles.com', 245 | phone: '648-210-8508', 246 | }, 247 | { 248 | id: 36, 249 | first_name: 'Anthiathia', 250 | last_name: 'Arnow', 251 | email: 'aarnowz@studiopress.com', 252 | phone: '750-373-8439', 253 | }, 254 | { 255 | id: 37, 256 | first_name: 'Elysee', 257 | last_name: 'Fenich', 258 | email: 'efenich10@acquirethisname.com', 259 | phone: '624-398-1336', 260 | }, 261 | { 262 | id: 38, 263 | first_name: 'Ole', 264 | last_name: 'Sedgwick', 265 | email: 'osedgwick11@forbes.com', 266 | phone: '554-584-4881', 267 | }, 268 | { 269 | id: 39, 270 | first_name: 'Allsun', 271 | last_name: 'MacGilpatrick', 272 | email: 'amacgilpatrick12@baidu.com', 273 | phone: '851-745-6306', 274 | }, 275 | { 276 | id: 40, 277 | first_name: 'Ric', 278 | last_name: 'Sive', 279 | email: 'rsive13@accuweather.com', 280 | phone: '469-754-5234', 281 | }, 282 | { 283 | id: 41, 284 | first_name: 'Kissiah', 285 | last_name: 'Gynne', 286 | email: 'kgynne14@ocn.ne.jp', 287 | phone: '831-485-1484', 288 | }, 289 | { 290 | id: 42, 291 | first_name: 'Phyllys', 292 | last_name: 'Morecombe', 293 | email: 'pmorecombe15@cbc.ca', 294 | phone: '184-751-6164', 295 | }, 296 | { 297 | id: 43, 298 | first_name: 'Happy', 299 | last_name: 'Pinnington', 300 | email: 'hpinnington16@xinhuanet.com', 301 | phone: '323-704-8309', 302 | }, 303 | { 304 | id: 44, 305 | first_name: 'Kermie', 306 | last_name: 'Aird', 307 | email: 'kaird17@nymag.com', 308 | phone: '417-994-0914', 309 | }, 310 | { 311 | id: 45, 312 | first_name: 'Cross', 313 | last_name: 'Vondra', 314 | email: 'cvondra18@umich.edu', 315 | phone: '231-406-1331', 316 | }, 317 | { 318 | id: 46, 319 | first_name: 'Conny', 320 | last_name: 'Bonsall', 321 | email: 'cbonsall19@auda.org.au', 322 | phone: '130-871-6595', 323 | }, 324 | { 325 | id: 47, 326 | first_name: 'Rachele', 327 | last_name: 'Richly', 328 | email: 'rrichly1a@usgs.gov', 329 | phone: '271-871-7044', 330 | }, 331 | { 332 | id: 48, 333 | first_name: 'Hynda', 334 | last_name: 'Chastey', 335 | email: 'hchastey1b@ning.com', 336 | phone: '418-606-1849', 337 | }, 338 | { 339 | id: 49, 340 | first_name: 'Dorrie', 341 | last_name: 'Bordis', 342 | email: 'dbordis1c@plala.or.jp', 343 | phone: '385-876-4413', 344 | }, 345 | { 346 | id: 50, 347 | first_name: 'Ferguson', 348 | last_name: 'Amiss', 349 | email: 'famiss1d@ox.ac.uk', 350 | phone: '551-597-7681', 351 | }, 352 | { 353 | id: 51, 354 | first_name: 'Suzy', 355 | last_name: 'Lamshead', 356 | email: 'slamshead1e@symantec.com', 357 | phone: '309-129-3187', 358 | }, 359 | { 360 | id: 52, 361 | first_name: 'Jacky', 362 | last_name: 'Blaiklock', 363 | email: 'jblaiklock1f@dagondesign.com', 364 | phone: '657-899-3208', 365 | }, 366 | { 367 | id: 53, 368 | first_name: 'Nicholle', 369 | last_name: 'Yakunin', 370 | email: 'nyakunin1g@deliciousdays.com', 371 | phone: '173-758-2439', 372 | }, 373 | { 374 | id: 54, 375 | first_name: 'Lloyd', 376 | last_name: 'Kirrens', 377 | email: 'lkirrens1h@amazonaws.com', 378 | phone: '221-656-9230', 379 | }, 380 | { 381 | id: 55, 382 | first_name: 'Ingmar', 383 | last_name: 'Monelli', 384 | email: 'imonelli1i@slideshare.net', 385 | phone: '260-824-0080', 386 | }, 387 | { 388 | id: 56, 389 | first_name: 'Olimpia', 390 | last_name: 'Popov', 391 | email: 'opopov1j@squidoo.com', 392 | phone: '300-983-1242', 393 | }, 394 | { 395 | id: 57, 396 | first_name: 'Monroe', 397 | last_name: 'Seater', 398 | email: 'mseater1k@bbb.org', 399 | phone: '187-539-3134', 400 | }, 401 | { 402 | id: 58, 403 | first_name: 'Kippie', 404 | last_name: 'Inseal', 405 | email: 'kinseal1l@drupal.org', 406 | phone: '335-389-8237', 407 | }, 408 | { 409 | id: 59, 410 | first_name: 'Crysta', 411 | last_name: 'Tukesby', 412 | email: 'ctukesby1m@vk.com', 413 | phone: '438-543-3400', 414 | }, 415 | { 416 | id: 60, 417 | first_name: 'Fan', 418 | last_name: 'Connechy', 419 | email: 'fconnechy1n@hp.com', 420 | phone: '591-821-8969', 421 | }, 422 | { 423 | id: 61, 424 | first_name: 'Dulcy', 425 | last_name: 'Cunniff', 426 | email: 'dcunniff1o@smugmug.com', 427 | phone: '504-154-6943', 428 | }, 429 | { 430 | id: 62, 431 | first_name: 'Heida', 432 | last_name: 'Sales', 433 | email: 'hsales1p@google.fr', 434 | phone: '357-164-9163', 435 | }, 436 | { 437 | id: 63, 438 | first_name: 'Dody', 439 | last_name: 'Warbrick', 440 | email: 'dwarbrick1q@mail.ru', 441 | phone: '970-328-3802', 442 | }, 443 | { 444 | id: 64, 445 | first_name: 'Ariadne', 446 | last_name: 'Kyle', 447 | email: 'akyle1r@uiuc.edu', 448 | phone: '652-787-0341', 449 | }, 450 | { 451 | id: 65, 452 | first_name: 'Tuesday', 453 | last_name: 'Quadri', 454 | email: 'tquadri1s@whitehouse.gov', 455 | phone: '612-857-0925', 456 | }, 457 | { 458 | id: 66, 459 | first_name: 'Trefor', 460 | last_name: 'Udall', 461 | email: 'tudall1t@barnesandnoble.com', 462 | phone: '233-328-6209', 463 | }, 464 | { 465 | id: 67, 466 | first_name: 'Erny', 467 | last_name: 'Vasyushkhin', 468 | email: 'evasyushkhin1u@unc.edu', 469 | phone: '889-966-6121', 470 | }, 471 | { 472 | id: 68, 473 | first_name: 'Tabina', 474 | last_name: 'Shacklady', 475 | email: 'tshacklady1v@bloglines.com', 476 | phone: '971-453-4958', 477 | }, 478 | { 479 | id: 69, 480 | first_name: 'Levey', 481 | last_name: 'Rove', 482 | email: 'lrove1w@spotify.com', 483 | phone: '714-704-9602', 484 | }, 485 | { 486 | id: 70, 487 | first_name: 'Jakob', 488 | last_name: 'Pattisson', 489 | email: 'jpattisson1x@nbcnews.com', 490 | phone: '321-282-8298', 491 | }, 492 | { 493 | id: 71, 494 | first_name: 'Scot', 495 | last_name: 'Rodell', 496 | email: 'srodell1y@cdc.gov', 497 | phone: '174-267-5731', 498 | }, 499 | { 500 | id: 72, 501 | first_name: 'Beltran', 502 | last_name: 'Donn', 503 | email: 'bdonn1z@tinypic.com', 504 | phone: '329-608-8118', 505 | }, 506 | { 507 | id: 73, 508 | first_name: 'Gretel', 509 | last_name: 'Gillbe', 510 | email: 'ggillbe20@fastcompany.com', 511 | phone: '712-498-4272', 512 | }, 513 | { 514 | id: 74, 515 | first_name: 'Dominique', 516 | last_name: 'Coger', 517 | email: 'dcoger21@seesaa.net', 518 | phone: '689-240-1256', 519 | }, 520 | { 521 | id: 75, 522 | first_name: 'Deirdre', 523 | last_name: 'Goodee', 524 | email: 'dgoodee22@mail.ru', 525 | phone: '566-203-5825', 526 | }, 527 | { 528 | id: 76, 529 | first_name: 'Odie', 530 | last_name: 'Fynes', 531 | email: 'ofynes23@furl.net', 532 | phone: '670-654-7760', 533 | }, 534 | { 535 | id: 77, 536 | first_name: 'Pauly', 537 | last_name: 'Boyer', 538 | email: 'pboyer24@microsoft.com', 539 | phone: '831-419-3483', 540 | }, 541 | { 542 | id: 78, 543 | first_name: 'Teriann', 544 | last_name: 'Bardsley', 545 | email: 'tbardsley25@indiatimes.com', 546 | phone: '205-682-3849', 547 | }, 548 | { 549 | id: 79, 550 | first_name: 'Krissie', 551 | last_name: 'Birdseye', 552 | email: 'kbirdseye26@yale.edu', 553 | phone: '565-150-4088', 554 | }, 555 | { 556 | id: 80, 557 | first_name: 'Rodger', 558 | last_name: 'Larvor', 559 | email: 'rlarvor27@wiley.com', 560 | phone: '447-709-9192', 561 | }, 562 | { 563 | id: 81, 564 | first_name: 'Gerhard', 565 | last_name: 'Jacobsen', 566 | email: 'gjacobsen28@seesaa.net', 567 | phone: '409-148-9072', 568 | }, 569 | { 570 | id: 82, 571 | first_name: 'Clerc', 572 | last_name: 'McCard', 573 | email: 'cmccard29@biglobe.ne.jp', 574 | phone: '579-699-1526', 575 | }, 576 | { 577 | id: 83, 578 | first_name: 'Danie', 579 | last_name: 'Impey', 580 | email: 'dimpey2a@sogou.com', 581 | phone: '756-156-2642', 582 | }, 583 | { 584 | id: 84, 585 | first_name: 'Ilario', 586 | last_name: 'Fuchs', 587 | email: 'ifuchs2b@phpbb.com', 588 | phone: '439-371-7515', 589 | }, 590 | { 591 | id: 85, 592 | first_name: 'Johna', 593 | last_name: 'Gobbett', 594 | email: 'jgobbett2c@arizona.edu', 595 | phone: '460-700-7536', 596 | }, 597 | { 598 | id: 86, 599 | first_name: 'Mellisa', 600 | last_name: 'Buffey', 601 | email: 'mbuffey2d@stumbleupon.com', 602 | phone: '622-265-1050', 603 | }, 604 | { 605 | id: 87, 606 | first_name: 'Cristie', 607 | last_name: 'Dukelow', 608 | email: 'cdukelow2e@businessweek.com', 609 | phone: '219-638-3422', 610 | }, 611 | { 612 | id: 88, 613 | first_name: 'Crawford', 614 | last_name: 'Cosgrive', 615 | email: 'ccosgrive2f@godaddy.com', 616 | phone: '530-980-0610', 617 | }, 618 | { 619 | id: 89, 620 | first_name: 'Kali', 621 | last_name: 'Besemer', 622 | email: 'kbesemer2g@blogspot.com', 623 | phone: '162-770-9642', 624 | }, 625 | { 626 | id: 90, 627 | first_name: 'Aeriela', 628 | last_name: 'Ussher', 629 | email: 'aussher2h@163.com', 630 | phone: '829-601-2748', 631 | }, 632 | { 633 | id: 91, 634 | first_name: 'George', 635 | last_name: 'Flanaghan', 636 | email: 'gflanaghan2i@illinois.edu', 637 | phone: '363-299-9172', 638 | }, 639 | { 640 | id: 92, 641 | first_name: 'Philippe', 642 | last_name: 'Hacking', 643 | email: 'phacking2j@bizjournals.com', 644 | phone: '313-214-2606', 645 | }, 646 | { 647 | id: 93, 648 | first_name: 'Tommy', 649 | last_name: 'Wakenshaw', 650 | email: 'twakenshaw2k@jugem.jp', 651 | phone: '511-824-3893', 652 | }, 653 | { 654 | id: 94, 655 | first_name: 'Clair', 656 | last_name: 'Bernardotte', 657 | email: 'cbernardotte2l@topsy.com', 658 | phone: '551-247-3400', 659 | }, 660 | { 661 | id: 95, 662 | first_name: 'Blondelle', 663 | last_name: 'Wraggs', 664 | email: 'bwraggs2m@symantec.com', 665 | phone: '768-626-3104', 666 | }, 667 | { 668 | id: 96, 669 | first_name: 'Josie', 670 | last_name: 'Guess', 671 | email: 'jguess2n@smugmug.com', 672 | phone: '285-189-2867', 673 | }, 674 | { 675 | id: 97, 676 | first_name: 'Jorge', 677 | last_name: 'Harpham', 678 | email: 'jharpham2o@wikimedia.org', 679 | phone: '382-887-0560', 680 | }, 681 | { 682 | id: 98, 683 | first_name: 'Deny', 684 | last_name: 'Sillick', 685 | email: 'dsillick2p@bizjournals.com', 686 | phone: '493-294-8194', 687 | }, 688 | { 689 | id: 99, 690 | first_name: 'Erina', 691 | last_name: 'Cleaver', 692 | email: 'ecleaver2q@businesswire.com', 693 | phone: '655-714-1759', 694 | }, 695 | { 696 | id: 100, 697 | first_name: 'Jehanna', 698 | last_name: 'Emeney', 699 | email: 'jemeney2r@ox.ac.uk', 700 | phone: '650-186-3126', 701 | }, 702 | ]; 703 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | 13 | --------------------------------------------------------------------------------