React

by Balázs Baumgartner

HTML

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

SCSS

@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap');

body {
  font-family: 'Ubuntu Mono', monospace;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

pre {
  font-family: 'Ubuntu Mono', monospace;
}

.blokk {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  width: 414px;
  box-sizing: border-box;
  padding: 36px 12px;
}

.logo {
  text-align: center;

  img {
    width: 120px;
    margin: 0 auto;
  }
}

.company-details {
  text-align: center;
  padding-bottom: 24px;
}

.header pre {
  font-weight: 700;
}

.item-row {
  padding-bottom: 12px;
  
  .item-name {
    padding-bottom: 6px;
  }
}

.total {
  font-weight: 700;
  font-size: 24px;
}

.footer {
  text-align: center;
  padding-top: 24px;
}

React

const imageUrl = 'https://image.spreadshirtmedia.com/image-server/v1/mp/compositions/T210A1MPA3176PT17X90Y39D1001721295FS2801/views/1,width=550,height=650,appearanceId=1,backgroundColor=FFFFFF,noPt=true,version=1572033001/ratatouille-french-restaurant-mens-t-shirt.jpg';
const sumLabel = 'Fizetendő:';

const columns = [13, 13, 11, 11];
const items = [
	{ name: 'Sólet Neolog libamájjal adag', quantity: 1, price: 2100 },
  { name: 'Békebeli lecsókolbász, Globus mustáros gyöngyhagymával',  quantity: 2, price: 1750 },
  { name: 'Hortobágyi palacsinta japán csirkecombbal',  quantity: 2, price: 1750 },
];

const renderPadStart = (item, padIndex) => (
	item.padStart(padIndex, ' ')
);

const renderPadEnd = (item, padIndex) => (
	item.padEnd(padIndex, ' ')
);

const renderSummary = (label, total) => (
	`${label}${renderPadStart(`${total} Ft`, 32 - label.length)}`
);

const getTotalPrice = (itemList) => {
  let total = 0;
  itemList.forEach((posProduct) => {
    total += (posProduct.price * posProduct.quantity);
  });
  return total;
};

class TodoApp extends React.Component {
  render() {
    return (
      <div className="blokk">
        {/*
        	<pre>         10        20        30        40       </pre>
	        <div>123456789X123456789X123456789X123456789X12345678</div>
        */}
        <div className="logo">
          <img src={imageUrl} />
        </div>
        <div className="company-details">
          <div className="detail-row">7630 Pécs, Feketerigó utca 17</div>
          <div className="detail-row">Adószám: 27284450-1-02</div>
        </div>
        <div className="header">
          <pre>Tétel        Mennyiség    Ár              Összeg</pre>
          <div>------------------------------------------------</div>
        </div>
        <div className="items">
          {
          	items.map(({ name, quantity, price}) => (
              <div className="item-row">
                <div className="item-name">{name}</div>
                <pre...