README.md

npm install --save-dev gist:8ce270954c48a4092b5dc62a0866792e

date-header.js

const customElementName = 'date-header';

class DateHeader extends HTMLElement {
  get css () {
    return `
      :host {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        background-color: black;
        border-radius: 4px;
        padding: 0.5em 1em;
        color: white;
        position: relative;
        display: flex;
        flex-direction: column;
        text-align: center;
      }

      :host::after {
        content: "";
        width: 30%;
        height: 0.6em;
        background-color: black;
        position: absolute;
        display: block;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
      }

      time {
        text-transform: capitalize;
      }

      time:last-child {
        font-size: 0.8em;
      }
    `;
  }
  connectedCallback () {
    const sDOM = this.attachShadow({ mode: 'closed' });
    
    sDOM.innerHTML = `
      <style>${this.css}</style>
      <time></time>
      <time></time>
    `;
    
    const datetime = this.getAttribute('datetime');
    const date = new Date(datetime);
    const rtf = new Intl.RelativeTimeFormat('en', { numeric: "auto" });
    
    const timeElements = sDOM.querySelectorAll('time');
    
    [...timeElements].forEach(time => {
      time.setAttribute('datetime', datetime);
    });
    
    timeElements[0].textContent = rtf.format(0, 'day');
    timeElements[1].textContent = new Intl.DateTimeFormat('sv-SE', {
      month: 'numeric',
      day: 'numeric',
    }).format(date);
  }
}

customElements.define(customElementName, DateHeader);

// So that it can be imported in React component
export default customElementName;

package.json

{
  "name": "date-header",
  "version": "0.0.3",
  "main": "date-header.js",
  "js:main": "date-header.js"
}

ugly-react-component.js

// How to use in React...

import * as React from 'react';
import DateHeader from 'date-header';

export default function UglyReactComponent () {
  return (
    <DateHeader datetime={new Date(Date.now())} />
  );
}