Staging example:

```jsx
const changelog = {
  _id: '5f3472928fb2420ad512fc44',
  link: 'https://docs.readme.com/guides/changelog/2020-08-17-v3-10-0', // must generate on the backend
  metadata: {
    image: [],
    title: '',
    description: '',
  },
  title: 'Owlet Weekly Update (Week of August 10)',
  slug: '2020-08-10-v3-9-2',
  body:
    "> 📘 What is the **Owlet Weekly Update?**\n>\n> Thanks for tuning in to another edition of our **Owlet Weekly Update** — an *owlet-sized* update (posted every Tuesday to the [ReadMe Changelog](https://docs.readme.com/guides/changelog)) where we provide an overview of the product updates that went out as part of our new Tuesday release cycle. As we refine our format and process for providing these updates, we'd love to hear what you think at [support@readme.io](mailto:support@readme.io)!",
  type: 'improved',
  hidden: true,
  user: '5af39863989da435b05d284d',
  createdAt: new Date('2020-07-01:52:02.292+0000'),
  project: '542334961972e21d7dae4e00',
};

const changelog2 = {
    _id : "5f0cddddc53967004d2fad39",
    link: 'https://docs.readme.com/guides/changelog/2020-07-13-v3-5-0', // must generate on the backend
    metadata : {
        image : [],
        title : "",
        description : ""
    },
    title : "Owlet Weekly Update (Week of July 13)",
    slug : "2020-07-13-v3-5-0",
    body : "> 🎉\n> Welcome to another update!\n> We have exciting news to share.\n> This week, we updated the [ReadMe API](https://docs.readme.com/developers/reference/intro)\n> To include poems with every err'!\n\nAlas, I'm not nearly as good at writing poems as Greg (our CEO) is — who literally wrote over 30 unique poems for each and every error code that is returned from the [ReadMe HTTP API](https://docs.readme.com/developers/reference/intro)! 🖋️\n\nIn other non-poetry-related (but nevertheless exciting) news, we also shipped some exciting updates to our icons, made a ton of usability improvements to our GitHub integration, and lots more. More information below! :owlbert-reading:\n\n## ✨",
    type : "added",
    hidden : false,
    pendingAlgoliaPublish : false,
    user : "560efaf7a8e6680d00b2e3f9",
    createdAt : "2020-07-14T22:19:00.000Z",
    project : "542334961972e21d7dae4e00",
    __v : 0
}

const auditlog = {
    _id : "5f1f1088f335620189768998",
    description : "Edited \n page \"Versions\"",
    project : "guides",
    link : "https://dash.readme.io/project/guides/v2.0/docs/versions",
    filter : {
        project : "Product Guide",
        user : "Andy Trattner\nandy@readme.io",
        page : "Versions",
        version : "2.0",
        action : "EDIT"
    },
    createdAt : "2020-07-27T17:36:29.752+0000",
};

const auditlog2 = {
    _id : "5f07b292712d8002c673aa16",
    description : "Edited \n page \"Page Metadata\"",
    project : "guides",
    link : "https://dash.readme.io/project/guides/v2.0/docs/page-metadata",
    filter : {
        project : "Product Guide",
        user : "Shinae Lee\nshinae@readme.io",
        page : "Page Metadata",
        version : "2.0",
        action : "EDIT"
    },
    createdAt :"2020-07-10T00:13:06.315Z",
    __v : 0
}

const auditlog3 = {
    _id : "randostring",
    description : "Created \n a new version \"v2.1.1\" for \"Project Name\"",
    project : "guides",
    link : "https://dash.readme.io/project/guides/v2.0/docs/page-metadata",
    filter : {
        project : "Product Guide",
        user : "Shinae Lee\nshinae@readme.io",
        page : "Page Metadata",
        version : "2.0",
        action : "EDIT"
    },
    createdAt :"2020-07-10T00:13:06.315Z",
    __v : 0
}

const auditlog4 = {
    _id : "5e21db56a7f6441c0a17ee7a",
    project : "intercom-api-reference",
    createdAt : "2020-01-17T16:05:42.296Z",
    filter : {
        action : "CREATE",
        version : "0",
        page : "List all messages",
        user : "Jean-Pierre Pequito\njp@intercom.io",
        project : "API & Webhooks Reference"
    },
    description : "Created \n a new page \"List all messages\"",
    __v : 0
}

const auditlog5 = {
    _id : "5e21da2127e2fd0481892f16",
    project : "ixon-api",
    createdAt : "2020-01-17T16:00:33.531Z",
    filter : {
        action : "DELETE",
        version : "1.0",
        user : "Willem Hofmans\nsupport@ixon.cloud",
        project : "IXON-API"
    },
    description : "Deleted \n API setting \"5e21da1131b38d0703798495\" for \"IXON-API\"",
    __v : 0
}

const auditlog6 = {
    _id : "5ee91021c918820059fa9a09",
    description : "Deleted \n changelog \"readme-free\" for \"Product Guide\"",
    project : "guides",
    filter : {
        project : "Product Guide",
        user : "Kanad Gupta\nkanad@readme.io",
        version : "2.0",
        action : "DELETE"
    },
    createdAt : "2020-06-16T18:32:01.337Z",
    __v : 0
}

const auditlog7 = {
    _id : "5eced70219cb5b00184bcacc",
    description : "Edited\n javascript for \"Product Guide\"",
    project : "guides",
    filter : {
        user : "Marc Cuva\nmarc@readme.io",
        project : "Product Guide",
        action : "EDIT"
    },
    createdAt : "2020-05-27T21:09:32.220Z",
    __v : 0
}

const auditlog8 = {
    _id : "5e21f21c15146522dcf1e192",
    project : "partnerstack",
    createdAt : "2020-01-17T17:42:52.148Z",
    filter : {
        action : "DELETE",
        version : "1.0",
        user : "Faisal Usmani\nfaisal@partnerstack.com",
        project : "PartnerStack"
    },
    description : "Deleted \n category \"api-endpoints\" for \"PartnerStack\"",
    __v : 0
}

const auditlog9 = {
    _id : "5e224256ee7e170056c98b2d",
    project : "hxroapi",
    createdAt : "2020-01-17T23:25:10.729Z",
    filter : {
        action : "EDIT",
        project : "HXROAPI",
        user : "Jason Ayala\njason.ayala@hxro.io"
    },
    description : "Edited\n glossary for \"HXROAPI\"",
    __v : 0
}

const auditlog10 = {
    _id : "5e224256ee7e170056c98b36",
    project : "hxroapi",
    createdAt : "2020-01-17T23:25:10.730Z",
    filter : {
        action : "EDIT",
        project : "HXROAPI",
        user : "Jason Ayala\njason.ayala@hxro.io"
    },
    description : "Edited\n redirects configuration",
    __v : 0
}

const deploymentAuditlog = {
    _id : "5e224256ee7e170056c98b36",
    project : "parentproject",
    createdAt : "2020-01-17T23:25:10.730Z",
    filter : {
        action : "DEPLOY",
        project : "parentproject",
        user : "adminuser@parent.com"
    },
    description : "Changes Deployed",
    __v : 0
};

const awaiting = [
  {
    date: new Date('2020-07-19'),
    changelogs: [changelog], // can come from multiple projects
    auditlogs: [auditlog, auditlog2],
  },
  {
    date: new Date('2020-07-01'),
    changelogs: [changelog2], // can come from multiple projects
    auditlogs: [auditlog3, auditlog4, auditlog5],
  },
];

const deployed = [
  {
    date: new Date('2020-06-19'),
    changelogs: [changelog], // can come from multiple projects
    auditlogs: [deploymentAuditlog, auditlog6, auditlog7],
  },
  {
    date: new Date('2020-06-01'),
    changelogs: [changelog2], // can come from multiple projects
    auditlogs: [auditlog8, auditlog9, auditlog10],
  },
];
const deployments = [new Date('2020-01-01')];
<Staging
  deploy={() => window.confirm("did we succeed?")}
  loadMore={() => alert("loading")}
  awaiting={awaiting}
  deployed={deployed}
  deployments={deployments}
  previewLink='https://google.com'
/>
```
<div id="modal-target-staging" className="ModalWrapper"></div>