Building Dynamic Web Applications with Next.js/

...

/

Building an Employee Directory with Chakra UI and Next.js

Building an Employee Directory with Chakra UI and Next.js

Learn to create an employee directory using Chakra UI and Next.js.

We'll cover the following...

We can reuse the project we already set up in the previous lesson for Chakra UI and Next.js to build our employee directory. Still, we’ll need to make some minor changes to the code we have already written.

Employee data

First of all, we’ll need the employee data. The employee data contains the following properties:

  • id

  • username

  • first_name

  • last_name

  • description

  • job_title

  • avatar

  • cover_image

Now, a new directory called /data is created and a JavaScript file users.js, where we’ll place our employee data:

Press + to interact
export default [
    {
      id: 'QW3xhqQmTI4',
      username: 'elegrice5',
      first_name: 'Edi',
      last_name: 'Le Grice',
      description:'Aenean lectus. Pellentesque eget nunc. Donec quis orci eget orci vehicula condimentum.\n\nCurabitur in libero ut massa volutpat convallis. Morbi odio odio, elementum eu, interdum eu, tincidunt in, leo. Maecenas pulvinar lobortis est.\n\nPhasellus sit amet erat. Nulla tempus. Vivamus in felis eu sapien cursus vestibulum.\n\nProin eu mi. Nulla ac enim. In tempor, turpis nec euismod scelerisque, quam turpis adipiscing lorem, vitae mattis nibh ligula nec sem.\n\nDuis aliquam convallis nunc. Proin at turpis a pede posuere nonummy. Integer non velit.\n\nDonec diam neque, vestibulum eget, vulputate ut, ultrices vel, augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pharetra, magna vestibulum aliquet ultrices, erat tortor sollicitudin mi, sit amet lobortis sapien sapien non mi. Integer ac neque.\n\nDuis bibendum. Morbi non quam nec dui luctus rutrum. Nulla tellus.',
      job_title: 'Marketing Assistant',
      avatar: 'https://robohash.org/elegrice5.jpg?size=350x350&set=set1',
      cover_image: `https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI`,
    },
    {
      id: 'jAlfGBY',
      username: 'agrout1',
      first_name: 'Annalee',
      last_name: 'Grout',
      description:'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin risus. Praesent lectus.\n\nVestibulum quam sapien, varius ut, blandit non, interdum in, ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis faucibus accumsan odio. Curabitur convallis.\n\nDuis consequat dui nec nisi volutpat eleifend. Donec ut dolor. Morbi vel lectus in quam fringilla rhoncus.\n\nMauris enim leo, rhoncus sed, vestibulum sit amet, cursus id, turpis. Integer aliquet, massa id lobortis convallis, tortor risus dapibus augue, vel accumsan tellus nisi eu orci. Mauris lacinia sapien quis libero.\n\nNullam sit amet turpis elementum ligula vehicula consequat. Morbi a ipsum. Integer a nibh.',
      job_title: 'Human Resources Assistant II',
      avatar: 'https://robohash.org/agrout1.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'K8JPgppa85',
      username: 'lconers2',
      first_name: 'Lainey',
      last_name: 'Coners',
      description:'Duis consequat dui nec nisi volutpat eleifend. Donec ut dolor. Morbi vel lectus in quam fringilla rhoncus.\n\nMauris enim leo, rhoncus sed, vestibulum sit amet, cursus id, turpis. Integer aliquet, massa id lobortis convallis, tortor risus dapibus augue, vel accumsan tellus nisi eu orci. Mauris lacinia sapien quis libero.\n\nNullam sit amet turpis elementum ligula vehicula consequat. Morbi a ipsum. Integer a nibh.\n\nIn quis justo. Maecenas rhoncus aliquam lacus. Morbi quis tortor id nulla ultrices aliquet.\n\nMaecenas leo odio, condimentum id, luctus nec, molestie sed, justo. Pellentesque viverra pede ac diam. Cras pellentesque volutpat dui.\n\nMaecenas tristique, est et tempus semper, est quam pharetra magna, ac consequat metus sapien ut nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris viverra diam vitae quam. Suspendisse potenti.',
      job_title: 'Structural Analysis Engineer',
      avatar: 'https://robohash.org/lconers2.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'ZJSEltk0ex',
      username: 'paspy3',
      first_name: 'Philis',
      last_name: 'Aspy',
      description:'Fusce posuere felis sed lacus. Morbi sem mauris, laoreet ut, rhoncus aliquet, pulvinar sed, nisl. Nunc rhoncus dui vel sem.\n\nSed sagittis. Nam congue, risus semper porta volutpat, quam pede lobortis ligula, sit amet eleifend pede libero quis orci. Nullam molestie nibh in lectus.\n\nPellentesque at nulla. Suspendisse potenti. Cras in purus eu magna vulputate luctus.\n\nCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vestibulum sagittis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n\nEtiam vel augue. Vestibulum rutrum rutrum neque. Aenean auctor gravida sem.',
      job_title: 'Food Chemist',
      avatar: 'https://robohash.org/paspy3.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'kLxnNG',
      username: 'btraynor4',
      first_name: 'Bartolemo',
      last_name: 'Traynor',
      description: 'Integer tincidunt ante vel ipsum. Praesent blandit lacinia erat. Vestibulum sed magna at nunc commodo placerat.\n\nPraesent blandit. Nam nulla. Integer pede justo, lacinia eget, tincidunt eget, tempus vel, pede.\n\nMorbi porttitor lorem id ligula. Suspendisse ornare consequat lectus. In est risus, auctor sed, tristique in, tempus sit amet, sem.\n\nFusce consequat. Nulla nisl. Nunc nisl.\n\nDuis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.',
      job_title: 'Librarian',
      avatar: 'https://robohash.org/btraynor4.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'dklHbQ0',
      username: 'pbassett5',
      first_name: 'Patty',
      last_name: 'Bassett',
      description:'Cras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque.\n\nQuisque porta volutpat erat. Quisque erat eros, viverra eget, congue eget, semper rutrum, nulla. Nunc purus.\n\nPhasellus in felis. Donec semper sapien a libero. Nam dui.\n\nProin leo odio, porttitor id, consequat in, consequat ut, nulla. Sed accumsan felis. Ut at dolor quis odio consequat varius.\n\nInteger ac leo. Pellentesque ultrices mattis odio. Donec vitae nisi.\n\nNam ultrices, libero non mattis pulvinar, nulla pede ullamcorper augue, a suscipit nulla elit ac nulla. Sed vel enim sit amet nunc viverra dapibus. Nulla suscipit ligula in lacus.',
      job_title: 'Chief Design Engineer',
      avatar: 'https://robohash.org/pbassett5.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'IZmCjXFyT3Fa',
      username: 'bbockman6',
      first_name: 'Barr',
      last_name: 'Bockman',
      description:'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin risus. Praesent lectus.\n\nVestibulum quam sapien, varius ut, blandit non, interdum in, ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis faucibus accumsan odio. Curabitur convallis.\n\nDuis consequat dui nec nisi volutpat eleifend. Donec ut dolor. Morbi vel lectus in quam fringilla rhoncus.\n\nMauris enim leo, rhoncus sed, vestibulum sit amet, cursus id, turpis. Integer aliquet, massa id lobortis convallis, tortor risus dapibus augue, vel accumsan tellus nisi eu orci. Mauris lacinia sapien quis libero.\n\nNullam sit amet turpis elementum ligula vehicula consequat. Morbi a ipsum. Integer a nibh.\n\nIn quis justo. Maecenas rhoncus aliquam lacus. Morbi quis tortor id nulla ultrices aliquet.\n\nMaecenas leo odio, condimentum id, luctus nec, molestie sed, justo. Pellentesque viverra pede ac diam. Cras pellentesque volutpat dui.',
      job_title: 'Account Executive',
      avatar: 'https://robohash.org/bbockman6.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'uz0FGAonGCph',
      username: 'dbernardy7',
      first_name: 'Dmitri',
      last_name: 'Bernardy',
      description:'Vestibulum ac est lacinia nisi venenatis tristique. Fusce congue, diam id ornare imperdiet, sapien urna pretium nisl, ut volutpat sapien arcu sed augue. Aliquam erat volutpat.\n\nIn congue. Etiam justo. Etiam pretium iaculis justo.\n\nIn hac habitasse platea dictumst. Etiam faucibus cursus urna. Ut tellus.\n\nNulla ut erat id mauris vulputate elementum. Nullam varius. Nulla facilisi.\n\nCras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque.\n\nQuisque porta volutpat erat. Quisque erat eros, viverra eget, congue eget, semper rutrum, nulla. Nunc purus.\n\nPhasellus in felis. Donec semper sapien a libero. Nam dui.\n\nProin leo odio, porttitor id, consequat in, consequat ut, nulla. Sed accumsan felis. Ut at dolor quis odio consequat varius.',
      job_title: 'Nurse',
      avatar: 'https://robohash.org/dbernardy7.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'KheFp88oV',
      username: 'pmaycey8',
      first_name: 'Philis',
      last_name: 'Maycey',
      description:'Donec diam neque, vestibulum eget, vulputate ut, ultrices vel, augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pharetra, magna vestibulum aliquet ultrices, erat tortor sollicitudin mi, sit amet lobortis sapien sapien non mi. Integer ac neque.\n\nDuis bibendum. Morbi non quam nec dui luctus rutrum. Nulla tellus.\n\nIn sagittis dui vel nisl. Duis ac nibh. Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus.\n\nSuspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst.\n\nMaecenas ut massa quis augue luctus tincidunt. Nulla mollis molestie lorem. Quisque ut erat.\n\nCurabitur gravida nisi at nibh. In hac habitasse platea dictumst. Aliquam augue quam, sollicitudin vitae, consectetuer eget, rutrum at, lorem.\n\nInteger tincidunt ante vel ipsum. Praesent blandit lacinia erat. Vestibulum sed magna at nunc commodo placerat.\n\nPraesent blandit. Nam nulla. Integer pede justo, lacinia eget, tincidunt eget, tempus vel, pede.',
      job_title: 'Sales Associate',
      avatar: 'https://robohash.org/pmaycey8.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'uBs5mK',
      username: 'gsambles9',
      first_name: 'Goldie',
      last_name: 'Sambles',
      description: 'In congue. Etiam justo. Etiam pretium iaculis justo.\n\nIn hac habitasse platea dictumst. Etiam faucibus cursus urna. Ut tellus.\n\nNulla ut erat id mauris vulputate elementum. Nullam varius. Nulla facilisi.\n\nCras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque.\n\nQuisque porta volutpat erat. Quisque erat eros, viverra eget, congue eget, semper rutrum, nulla. Nunc purus.\n\nPhasellus in felis. Donec semper sapien a libero. Nam dui.\n\nProin leo odio, porttitor id, consequat in, consequat ut, nulla. Sed accumsan felis. Ut at dolor quis odio consequat varius.\n\nInteger ac leo. Pellentesque ultrices mattis odio. Donec vitae nisi.',
      job_title: 'Environmental Specialist',
      avatar: 'https://robohash.org/gsambles9.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'ah8PxuB',
      username: 'cfidiana',
      first_name: 'Colan',
      last_name: 'Fidian',
      description:'Fusce posuere felis sed lacus. Morbi sem mauris, laoreet ut, rhoncus aliquet, pulvinar sed, nisl. Nunc rhoncus dui vel sem.\n\nSed sagittis. Nam congue, risus semper porta volutpat, quam pede lobortis ligula, sit amet eleifend pede libero quis orci. Nullam molestie nibh in lectus.\n\nPellentesque at nulla. Suspendisse potenti. Cras in purus eu magna vulputate luctus.\n\nCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vestibulum sagittis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n\nEtiam vel augue. Vestibulum rutrum rutrum neque. Aenean auctor gravida sem.\n\nPraesent id massa id nisl venenatis lacinia. Aenean sit amet justo. Morbi ut odio.\n\nCras mi pede, malesuada in, imperdiet et, commodo vulputate, justo. In blandit ultrices enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
      job_title: 'Cost Accountant',
      avatar: 'https://robohash.org/cfidiana.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: '7j2EGmuavO5e',
      username: 'mhartzogb',
      first_name: 'Marc',
      last_name: 'Hartzog',
      description:'Duis aliquam convallis nunc. Proin at turpis a pede posuere nonummy. Integer non velit.\n\nDonec diam neque, vestibulum eget, vulputate ut, ultrices vel, augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pharetra, magna vestibulum aliquet ultrices, erat tortor sollicitudin mi, sit amet lobortis sapien sapien non mi. Integer ac neque.\n\nDuis bibendum. Morbi non quam nec dui luctus rutrum. Nulla tellus.\n\nIn sagittis dui vel nisl. Duis ac nibh. Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus.\n\nSuspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst.\n\nMaecenas ut massa quis augue luctus tincidunt. Nulla mollis molestie lorem. Quisque ut erat.',
      job_title: 'GIS Technical Architect',
      avatar: 'https://robohash.org/mhartzogb.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'fM6wrvUqRO',
      username: 'rduferc',
      first_name: 'Randee',
      last_name: 'Dufer',
      description:'Etiam vel augue. Vestibulum rutrum rutrum neque. Aenean auctor gravida sem.\n\nPraesent id massa id nisl venenatis lacinia. Aenean sit amet justo. Morbi ut odio.\n\nCras mi pede, malesuada in, imperdiet et, commodo vulputate, justo. In blandit ultrices enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\n\nProin interdum mauris non ligula pellentesque ultrices. Phasellus id sapien in sapien iaculis congue. Vivamus metus arcu, adipiscing molestie, hendrerit at, vulputate vitae, nisl.\n\nAenean lectus. Pellentesque eget nunc. Donec quis orci eget orci vehicula condimentum.\n\nCurabitur in libero ut massa volutpat convallis. Morbi odio odio, elementum eu, interdum eu, tincidunt in, leo. Maecenas pulvinar lobortis est.\n\nPhasellus sit amet erat. Nulla tempus. Vivamus in felis eu sapien cursus vestibulum.\n\nProin eu mi. Nulla ac enim. In tempor, turpis nec euismod scelerisque, quam turpis adipiscing lorem, vitae mattis nibh ligula nec sem.',
      job_title: 'Cost Accountant',
      avatar: 'https://robohash.org/rduferc.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'y1jwxy',
      username: 'dhearseyd',
      first_name: 'Dahlia',
      last_name: 'Hearsey',
      description:'Fusce posuere felis sed lacus. Morbi sem mauris, laoreet ut, rhoncus aliquet, pulvinar sed, nisl. Nunc rhoncus dui vel sem.\n\nSed sagittis. Nam congue, risus semper porta volutpat, quam pede lobortis ligula, sit amet eleifend pede libero quis orci. Nullam molestie nibh in lectus.\n\nPellentesque at nulla. Suspendisse potenti. Cras in purus eu magna vulputate luctus.\n\nCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vestibulum sagittis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n\nEtiam vel augue. Vestibulum rutrum rutrum neque. Aenean auctor gravida sem.\n\nPraesent id massa id nisl venenatis lacinia. Aenean sit amet justo. Morbi ut odio.\n\nCras mi pede, malesuada in, imperdiet et, commodo vulputate, justo. In blandit ultrices enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\n\nProin interdum mauris non ligula pellentesque ultrices. Phasellus id sapien in sapien iaculis congue. Vivamus metus arcu, adipiscing molestie, hendrerit at, vulputate vitae, nisl.',
      job_title: 'Dental Hygienist',
      avatar: 'https://robohash.org/dhearseyd.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'NSD0d1Fw5',
      username: 'ngeorgele',
      first_name: 'Nessy',
      last_name: 'Georgel',
      description:'Aliquam quis turpis eget elit sodales scelerisque. Mauris sit amet eros. Suspendisse accumsan tortor quis turpis.\n\nSed ante. Vivamus tortor. Duis mattis egestas metus.\n\nAenean fermentum. Donec ut mauris eget massa tempor convallis. Nulla neque libero, convallis eget, eleifend luctus, ultricies eu, nibh.\n\nQuisque id justo sit amet sapien dignissim vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla dapibus dolor vel est. Donec odio justo, sollicitudin ut, suscipit a, feugiat et, eros.\n\nVestibulum ac est lacinia nisi venenatis tristique. Fusce congue, diam id ornare imperdiet, sapien urna pretium nisl, ut volutpat sapien arcu sed augue. Aliquam erat volutpat.',
      job_title: 'Executive Secretary',
      avatar: 'https://robohash.org/ngeorgele.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'Eg2JED',
      username: 'mbrethertonf',
      first_name: 'Melissa',
      last_name: 'Bretherton',
      description: 'Nullam sit amet turpis elementum ligula vehicula consequat. Morbi a ipsum. Integer a nibh.\n\nIn quis justo. Maecenas rhoncus aliquam lacus. Morbi quis tortor id nulla ultrices aliquet.\n\nMaecenas leo odio, condimentum id, luctus nec, molestie sed, justo. Pellentesque viverra pede ac diam. Cras pellentesque volutpat dui.\n\nMaecenas tristique, est et tempus semper, est quam pharetra magna, ac consequat metus sapien ut nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris viverra diam vitae quam. Suspendisse potenti.\n\nNullam porttitor lacus at turpis. Donec posuere metus vitae ipsum. Aliquam non mauris.\n\nMorbi non lectus. Aliquam sit amet diam in magna bibendum imperdiet. Nullam orci pede, venenatis non, sodales sed, tincidunt eu, felis.\n\nFusce posuere felis sed lacus. Morbi sem mauris, laoreet ut, rhoncus aliquet, pulvinar sed, nisl. Nunc rhoncus dui vel sem.\n\nSed sagittis. Nam congue, risus semper porta volutpat, quam pede lobortis ligula, sit amet eleifend pede libero quis orci. Nullam molestie nibh in lectus.',
      job_title: 'Payment Adjustment Coordinator',
      avatar: 'https://robohash.org/mbrethertonf.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'NyXlWie',
      username: 'nwanklyng',
      first_name: 'Nicole',
      last_name: 'Wanklyn',
      description: 'Praesent id massa id nisl venenatis lacinia. Aenean sit amet justo. Morbi ut odio.\n\nCras mi pede, malesuada in, imperdiet et, commodo vulputate, justo. In blandit ultrices enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\n\nProin interdum mauris non ligula pellentesque ultrices. Phasellus id sapien in sapien iaculis congue. Vivamus metus arcu, adipiscing molestie, hendrerit at, vulputate vitae, nisl.\n\nAenean lectus. Pellentesque eget nunc. Donec quis orci eget orci vehicula condimentum.\n\nCurabitur in libero ut massa volutpat convallis. Morbi odio odio, elementum eu, interdum eu, tincidunt in, leo. Maecenas pulvinar lobortis est.\n\nPhasellus sit amet erat. Nulla tempus. Vivamus in felis eu sapien cursus vestibulum.',
      job_title: 'Quality Engineer',
      avatar: 'https://robohash.org/nwanklyng.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'W5uPxSQhHSp',
      username: 'hcasirolih',
      first_name: 'Harcourt',
      last_name: 'Casiroli',
      description: 'Aliquam quis turpis eget elit sodales scelerisque. Mauris sit amet eros. Suspendisse accumsan tortor quis turpis.\n\nSed ante. Vivamus tortor. Duis mattis egestas metus.\n\nAenean fermentum. Donec ut mauris eget massa tempor convallis. Nulla neque libero, convallis eget, eleifend luctus, ultricies eu, nibh.\n\nQuisque id justo sit amet sapien dignissim vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla dapibus dolor vel est. Donec odio justo, sollicitudin ut, suscipit a, feugiat et, eros.\n\nVestibulum ac est lacinia nisi venenatis tristique. Fusce congue, diam id ornare imperdiet, sapien urna pretium nisl, ut volutpat sapien arcu sed augue. Aliquam erat volutpat.',
      job_title: 'Office Assistant III',
      avatar: 'https://robohash.org/hcasirolih.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'tijtzal',
      username: 'rliasi',
      first_name: 'Ragnar',
      last_name: 'Lias',
      description: 'In congue. Etiam justo. Etiam pretium iaculis justo.\n\nIn hac habitasse platea dictumst. Etiam faucibus cursus urna. Ut tellus.\n\nNulla ut erat id mauris vulputate elementum. Nullam varius. Nulla facilisi.\n\nCras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque.\n\nQuisque porta volutpat erat. Quisque erat eros, viverra eget, congue eget, semper rutrum, nulla. Nunc purus.\n\nPhasellus in felis. Donec semper sapien a libero. Nam dui.\n\nProin leo odio, porttitor id, consequat in, consequat ut, nulla. Sed accumsan felis. Ut at dolor quis odio consequat varius.\n\nInteger ac leo. Pellentesque ultrices mattis odio. Donec vitae nisi.',
      job_title: 'Senior Editor',
      avatar: 'https://robohash.org/rliasi.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'zpttNnB',
      username: 'lebyj',
      first_name: 'Loydie',
      last_name: 'Eby',
      description: 'In sagittis dui vel nisl. Duis ac nibh. Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus.\n\nSuspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst.\n\nMaecenas ut massa quis augue luctus tincidunt. Nulla mollis molestie lorem. Quisque ut erat.\n\nCurabitur gravida nisi at nibh. In hac habitasse platea dictumst. Aliquam augue quam, sollicitudin vitae, consectetuer eget, rutrum at, lorem.\n\nInteger tincidunt ante vel ipsum. Praesent blandit lacinia erat. Vestibulum sed magna at nunc commodo placerat.\n\nPraesent blandit. Nam nulla. Integer pede justo, lacinia eget, tincidunt eget, tempus vel, pede.',
      job_title: 'Web Designer III',
      avatar: 'https://robohash.org/lebyj.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'RJp7RxO6',
      username: 'gcasewellk',
      first_name: 'Georgine',
      last_name: 'Casewell',
      description:'In congue. Etiam justo. Etiam pretium iaculis justo.\n\nIn hac habitasse platea dictumst. Etiam faucibus cursus urna. Ut tellus.\n\nNulla ut erat id mauris vulputate elementum. Nullam varius. Nulla facilisi.\n\nCras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque.\n\nQuisque porta volutpat erat. Quisque erat eros, viverra eget, congue eget, semper rutrum, nulla. Nunc purus.\n\nPhasellus in felis. Donec semper sapien a libero. Nam dui.\n\nProin leo odio, porttitor id, consequat in, consequat ut, nulla. Sed accumsan felis. Ut at dolor quis odio consequat varius.\n\nInteger ac leo. Pellentesque ultrices mattis odio. Donec vitae nisi.',
      job_title: 'Operator',
      avatar: 'https://robohash.org/gcasewellk.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'JedNW2T',
      username: 'aburbankl',
      first_name: 'Averill',
      last_name: 'Burbank',
      description: 'Mauris enim leo, rhoncus sed, vestibulum sit amet, cursus id, turpis. Integer aliquet, massa id lobortis convallis, tortor risus dapibus augue, vel accumsan tellus nisi eu orci. Mauris lacinia sapien quis libero.\n\nNullam sit amet turpis elementum ligula vehicula consequat. Morbi a ipsum. Integer a nibh.\n\nIn quis justo. Maecenas rhoncus aliquam lacus. Morbi quis tortor id nulla ultrices aliquet.\n\nMaecenas leo odio, condimentum id, luctus nec, molestie sed, justo. Pellentesque viverra pede ac diam. Cras pellentesque volutpat dui.\n\nMaecenas tristique, est et tempus semper, est quam pharetra magna, ac consequat metus sapien ut nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris viverra diam vitae quam. Suspendisse potenti.',
      job_title: 'Dental Hygienist',
      avatar: 'https://robohash.org/aburbankl.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'PjaO3ClOnJx',
      username: 'eolonem',
      first_name: 'Elia',
      last_name: "O' Lone",
      description:'Curabitur gravida nisi at nibh. In hac habitasse platea dictumst. Aliquam augue quam, sollicitudin vitae, consectetuer eget, rutrum at, lorem.\n\nInteger tincidunt ante vel ipsum. Praesent blandit lacinia erat. Vestibulum sed magna at nunc commodo placerat.\n\nPraesent blandit. Nam nulla. Integer pede justo, lacinia eget, tincidunt eget, tempus vel, pede.\n\nMorbi porttitor lorem id ligula. Suspendisse ornare consequat lectus. In est risus, auctor sed, tristique in, tempus sit amet, sem.\n\nFusce consequat. Nulla nisl. Nunc nisl.\n\nDuis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.\n\nIn hac habitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis, diam erat fermentum justo, nec condimentum neque sapien placerat ante. Nulla justo.\n\nAliquam quis turpis eget elit sodales scelerisque. Mauris sit amet eros. Suspendisse accumsan tortor quis turpis.',
      job_title: 'Librarian',
      avatar: 'https://robohash.org/eolonem.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'H5hWy2dK',
      username: 'bkuppern',
      first_name: 'Brig',
      last_name: 'Kupper',
      description: 'Maecenas tristique, est et tempus semper, est quam pharetra magna, ac consequat metus sapien ut nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris viverra diam vitae quam. Suspendisse potenti.\n\nNullam porttitor lacus at turpis. Donec posuere metus vitae ipsum. Aliquam non mauris.\n\nMorbi non lectus. Aliquam sit amet diam in magna bibendum imperdiet. Nullam orci pede, venenatis non, sodales sed, tincidunt eu, felis.\n\nFusce posuere felis sed lacus. Morbi sem mauris, laoreet ut, rhoncus aliquet, pulvinar sed, nisl. Nunc rhoncus dui vel sem.\n\nSed sagittis. Nam congue, risus semper porta volutpat, quam pede lobortis ligula, sit amet eleifend pede libero quis orci. Nullam molestie nibh in lectus.\n\nPellentesque at nulla. Suspendisse potenti. Cras in purus eu magna vulputate luctus.',
      job_title: 'Programmer Analyst IV',
      avatar: 'https://robohash.org/bkuppern.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: '4FQxWietGM4',
      username: 'rnowakowskao',
      first_name: 'Robinette',
      last_name: 'Nowakowska',
      description:'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin risus. Praesent lectus.\n\nVestibulum quam sapien, varius ut, blandit non, interdum in, ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis faucibus accumsan odio. Curabitur convallis.\n\nDuis consequat dui nec nisi volutpat eleifend. Donec ut dolor. Morbi vel lectus in quam fringilla rhoncus.\n\nMauris enim leo, rhoncus sed, vestibulum sit amet, cursus id, turpis. Integer aliquet, massa id lobortis convallis, tortor risus dapibus augue, vel accumsan tellus nisi eu orci. Mauris lacinia sapien quis libero.\n\nNullam sit amet turpis elementum ligula vehicula consequat. Morbi a ipsum. Integer a nibh.',
      job_title: 'Statistician IV',
      avatar: 'https://robohash.org/rnowakowskao.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'Uf7Wde0VzP',
      username: 'mkeavep',
      first_name: 'Marcela',
      last_name: 'Keave',
      description: 'Praesent blandit. Nam nulla. Integer pede justo, lacinia eget, tincidunt eget, tempus vel, pede.\n\nMorbi porttitor lorem id ligula. Suspendisse ornare consequat lectus. In est risus, auctor sed, tristique in, tempus sit amet, sem.\n\nFusce consequat. Nulla nisl. Nunc nisl.\n\nDuis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.\n\nIn hac habitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis, diam erat fermentum justo, nec condimentum neque sapien placerat ante. Nulla justo.',
      job_title: 'Database Administrator II',
      avatar: 'https://robohash.org/mkeavep.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'aI1vg6CDU3w',
      username: 'wchelsomq',
      first_name: 'Werner',
      last_name: 'Chelsom',
      description:'Proin interdum mauris non ligula pellentesque ultrices. Phasellus id sapien in sapien iaculis congue. Vivamus metus arcu, adipiscing molestie, hendrerit at, vulputate vitae, nisl.\n\nAenean lectus. Pellentesque eget nunc. Donec quis orci eget orci vehicula condimentum.\n\nCurabitur in libero ut massa volutpat convallis. Morbi odio odio, elementum eu, interdum eu, tincidunt in, leo. Maecenas pulvinar lobortis est.\n\nPhasellus sit amet erat. Nulla tempus. Vivamus in felis eu sapien cursus vestibulum.\n\nProin eu mi. Nulla ac enim. In tempor, turpis nec euismod scelerisque, quam turpis adipiscing lorem, vitae mattis nibh ligula nec sem.\n\nDuis aliquam convallis nunc. Proin at turpis a pede posuere nonummy. Integer non velit.\n\nDonec diam neque, vestibulum eget, vulputate ut, ultrices vel, augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pharetra, magna vestibulum aliquet ultrices, erat tortor sollicitudin mi, sit amet lobortis sapien sapien non mi. Integer ac neque.\n\nDuis bibendum. Morbi non quam nec dui luctus rutrum. Nulla tellus.',
      job_title: 'Senior Quality Engineer',
      avatar: 'https://robohash.org/wchelsomq.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'ZevsxseRV',
      username: 'jmalehamr',
      first_name: 'Jewell',
      last_name: 'Maleham',
      description: 'Duis bibendum. Morbi non quam nec dui luctus rutrum. Nulla tellus.\n\nIn sagittis dui vel nisl. Duis ac nibh. Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus.\n\nSuspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst.\n\nMaecenas ut massa quis augue luctus tincidunt. Nulla mollis molestie lorem. Quisque ut erat.\n\nCurabitur gravida nisi at nibh. In hac habitasse platea dictumst. Aliquam augue quam, sollicitudin vitae, consectetuer eget, rutrum at, lorem.\n\nInteger tincidunt ante vel ipsum. Praesent blandit lacinia erat. Vestibulum sed magna at nunc commodo placerat.\n\nPraesent blandit. Nam nulla. Integer pede justo, lacinia eget, tincidunt eget, tempus vel, pede.\n\nMorbi porttitor lorem id ligula. Suspendisse ornare consequat lectus. In est risus, auctor sed, tristique in, tempus sit amet, sem.',
      job_title: 'Account Coordinator',
      avatar: 'https://robohash.org/jmalehamr.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'nZ9Hw4l1R5',
      username: 'kbodens',
      first_name: 'Kalle',
      last_name: 'Boden',
      description: 'Morbi porttitor lorem id ligula. Suspendisse ornare consequat lectus. In est risus, auctor sed, tristique in, tempus sit amet, sem.\n\nFusce consequat. Nulla nisl. Nunc nisl.\n\nDuis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.\n\nIn hac habitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis, diam erat fermentum justo, nec condimentum neque sapien placerat ante. Nulla justo.\n\nAliquam quis turpis eget elit sodales scelerisque. Mauris sit amet eros. Suspendisse accumsan tortor quis turpis.\n\nSed ante. Vivamus tortor. Duis mattis egestas metus.',
      job_title: 'Senior Cost Accountant',
      avatar: 'https://robohash.org/nequeutadipisci.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: '7tOcSmvOXHE5',
      username: 'hshubothamt',
      first_name: 'Hakeem',
      last_name: 'Shubotham',
      description:'In hac habitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis, diam erat fermentum justo, nec condimentum neque sapien placerat ante. Nulla justo.\n\nAliquam quis turpis eget elit sodales scelerisque. Mauris sit amet eros. Suspendisse accumsan tortor quis turpis.\n\nSed ante. Vivamus tortor. Duis mattis egestas metus.\n\nAenean fermentum. Donec ut mauris eget massa tempor convallis. Nulla neque libero, convallis eget, eleifend luctus, ultricies eu, nibh.\n\nQuisque id justo sit amet sapien dignissim vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla dapibus dolor vel est. Donec odio justo, sollicitudin ut, suscipit a, feugiat et, eros.\n\nVestibulum ac est lacinia nisi venenatis tristique. Fusce congue, diam id ornare imperdiet, sapien urna pretium nisl, ut volutpat sapien arcu sed augue. Aliquam erat volutpat.',
      job_title: 'Nurse Practicioner',
      avatar: 'https://robohash.org/hshubothamt.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'VkzHsvBy5',
      username: 'tgilburtu',
      first_name: 'Thorny',
      last_name: 'Gilburt',
      description:'Aliquam quis turpis eget elit sodales scelerisque. Mauris sit amet eros. Suspendisse accumsan tortor quis turpis.\n\nSed ante. Vivamus tortor. Duis mattis egestas metus.\n\nAenean fermentum. Donec ut mauris eget massa tempor convallis. Nulla neque libero, convallis eget, eleifend luctus, ultricies eu, nibh.\n\nQuisque id justo sit amet sapien dignissim vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla dapibus dolor vel est. Donec odio justo, sollicitudin ut, suscipit a, feugiat et, eros.\n\nVestibulum ac est lacinia nisi venenatis tristique. Fusce congue, diam id ornare imperdiet, sapien urna pretium nisl, ut volutpat sapien arcu sed augue. Aliquam erat volutpat.',
      job_title: 'Financial Analyst',
      avatar: 'https://robohash.org/tgilburtu.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'B07R0mR3E',
      username: 'rdorganv',
      first_name: 'Raquela',
      last_name: 'Dorgan',
      description: 'Sed ante. Vivamus tortor. Duis mattis egestas metus.\n\nAenean fermentum. Donec ut mauris eget massa tempor convallis. Nulla neque libero, convallis eget, eleifend luctus, ultricies eu, nibh.\n\nQuisque id justo sit amet sapien dignissim vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla dapibus dolor vel est. Donec odio justo, sollicitudin ut, suscipit a, feugiat et, eros.\n\nVestibulum ac est lacinia nisi venenatis tristique. Fusce congue, diam id ornare imperdiet, sapien urna pretium nisl, ut volutpat sapien arcu sed augue. Aliquam erat volutpat.\n\nIn congue. Etiam justo. Etiam pretium iaculis justo.',
      job_title: 'Accountant IV',
      avatar: 'https://robohash.org/rdorganv.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'DUGGqeIAE',
      username: 'ccicculiniw',
      first_name: 'Caro',
      last_name: 'Cicculini',
      description:'Morbi porttitor lorem id ligula. Suspendisse ornare consequat lectus. In est risus, auctor sed, tristique in, tempus sit amet, sem.\n\nFusce consequat. Nulla nisl. Nunc nisl.\n\nDuis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.\n\nIn hac habitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis, diam erat fermentum justo, nec condimentum neque sapien placerat ante. Nulla justo.\n\nAliquam quis turpis eget elit sodales scelerisque. Mauris sit amet eros. Suspendisse accumsan tortor quis turpis.\n\nSed ante. Vivamus tortor. Duis mattis egestas metus.\n\nAenean fermentum. Donec ut mauris eget massa tempor convallis. Nulla neque libero, convallis eget, eleifend luctus, ultricies eu, nibh.\n\nQuisque id justo sit amet sapien dignissim vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla dapibus dolor vel est. Donec odio justo, sollicitudin ut, suscipit a, feugiat et, eros.',
      job_title: 'Database Administrator II',
      avatar: 'https://robohash.org/ccicculiniw.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'Fc2mHWDjiF',
      username: 'bmapholmx',
      first_name: 'Babb',
      last_name: 'Mapholm',
      description: 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vestibulum sagittis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n\nEtiam vel augue. Vestibulum rutrum rutrum neque. Aenean auctor gravida sem.\n\nPraesent id massa id nisl venenatis lacinia. Aenean sit amet justo. Morbi ut odio.\n\nCras mi pede, malesuada in, imperdiet et, commodo vulputate, justo. In blandit ultrices enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\n\nProin interdum mauris non ligula pellentesque ultrices. Phasellus id sapien in sapien iaculis congue. Vivamus metus arcu, adipiscing molestie, hendrerit at, vulputate vitae, nisl.',
      job_title: 'Administrative Officer',
      avatar: 'https://robohash.org/bmapholmx.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
    {
      id: 'qqbjXLqpt8',
      username: 'dkeechy',
      first_name: 'Dory',
      last_name: 'Keech',
      description:  'In hac habitasse platea dictumst. Etiam faucibus cursus urna. Ut tellus.\n\nNulla ut erat id mauris vulputate elementum. Nullam varius. Nulla facilisi.\n\nCras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque.\n\nQuisque porta volutpat erat. Quisque erat eros, viverra eget, congue eget, semper rutrum, nulla. Nunc purus.\n\nPhasellus in felis. Donec semper sapien a libero. Nam dui.\n\nProin leo odio, porttitor id, consequat in, consequat ut, nulla. Sed accumsan felis. Ut at dolor quis odio consequat varius.\n\nInteger ac leo. Pellentesque ultrices mattis odio. Donec vitae nisi.',
      job_title: 'Design Engineer',
      avatar: 'https://robohash.org/dkeechy.jpg?size=350x350&set=set1',
      cover_image: 'https://fastly.picsum.photos/id/1070/1920/1080.jpg?hmac=cBwZaxhps3hCEHr55RslLYzRB7eWE7z8D7J3g7AyNOI',
    },
  ];

We can leave the pages/_document.js file untouched from the previous lesson. This way, we’ll have access to the dark/light theme switch for our website.

Custom app

Going to the pages/_app.js page, we can modify its content by including a new TopBar component (which we’ll create in just a moment) and removing the custom theme because we don’t need it for the moment:

Press + to interact
import { ChakraProvider, Box } from '@chakra-ui/react';
import TopBar from '../components/TopBar';
function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <TopBar />
      <Box maxW="container.xl" margin="auto">
        <Component {...pageProps} />
      </Box>
    </ChakraProvider>
  );
}
export default MyApp;

As we can see in the previous code block, we’ve wrapped our <Component /> component in a Chakra UI Box component. ...