React

by Gabriel Correa

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class TemasIterminal extends React.Component {
  
  constructor(props) {
    super(props);
    
    this.state = {
      title: "👨‍💻 Temas para iTerminal",
      subTitle: "💼 Atuo Innovation",
      darkMode: true,
      themes: [
        {
          id: 1,
          name: "Argonaut",
          image: "https://github.com/lysyi3m/macos-terminal-themes/raw/master/screenshots/argonaut.png",
          download: "https://github.com/lysyi3m/macos-terminal-themes/blob/master/schemes/Argonaut.terminal"
        },
        {
          id: 2,
          name: "Dark Pastel",
          image: "https://github.com/lysyi3m/macos-terminal-themes/raw/master/screenshots/dark_pastel.png",
          download: "https://github.com/lysyi3m/macos-terminal-themes/blob/master/schemes/Dark%20Pastel.terminal"
        },
        {
          id: 3,
          name: "Grape",
          image: "https://github.com/lysyi3m/macos-terminal-themes/raw/master/screenshots/grape.png",
          download: "https://github.com/lysyi3m/macos-terminal-themes/blob/master/schemes/Grape.terminal"
        },
        {
          id: 4,
          name: "Hardcore",
          image: "https://github.com/lysyi3m/macos-terminal-themes/raw/master/screenshots/hardcore.png",
          download: "https://github.com/lysyi3m/macos-terminal-themes/blob/master/schemes/Hardcore.terminal"
        },
        {
          id: 5,
          name: "Mathias",
          image: "https://github.com/lysyi3m/macos-terminal-themes/raw/master/screenshots/mathias.png",
          download: "https://github.com/lysyi3m/macos-terminal-themes/blob/master/schemes/Mathias.terminal"
        },
        {
          id: 6,
          name: "Malokai",
          image: "https://github.com/lysyi3m/macos-terminal-themes/raw/master/screenshots/molokai.png",
          download: "https://github.com/lysyi3m/macos-terminal-themes/blob/master/schemes/Molokai.terminal"
        },
        {
          id: 7,
          name: "Monokai Soda",
          image:...