React Styled Components

by jagreehal

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>React Styled Components</title>

    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.production.min.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/[email protected]/babel.min.js"
    ></script>
    <script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>

    <link rel="stylesheet" href="https://jagreehal.github.io/styling-web-component-examples/styling-examples/todo.css">
    <script type="module" src="https://jagreehal.github.io/styling-web-component-examples/styling-examples/css-gremlins.js"></script>
  </head>

  <body style="max-width:800px">
    <css-gremlins></css-gremlins>
    <div id="root"></div>

    <script type="text/babel">
      const View = styled.div`
        color: #4d4d4d;
      `;

      const Destroy = styled.button`
        background: none;
        display: none;
        position: absolute;
        top: 0;
        right: 10px;
        bottom: 0;
        width: 40px;
        height: 40px;
        margin: auto 0;
        font-size: 30px;
        color: #cc9a9a;
        margin-bottom: 11px;
        transition: color 0.2s ease-out;
        :hover {
          color: #af5b5e;
        }
        :after {
          content: 'Ă—';
        }
      `;

      const ListItem = styled.li`
        &:hover ${Destroy} {
          display: block;
        }
      `;

      const Label = styled.label`
        word-break: break-all;
        padding: 15px 15px 15px 60px;
        display: block;
        line-height: 1.2;
        transition: color 0.4s;
      `;

      const { useState } = React;

      const TodoItem = ({ title, completed = false }) => {
        const [_completed, setCompleted] = React.useState(completed);

        return (
          <ListItem className={`todo...