ອະທິບາຍ UI

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>ນັກວິທະຍາສາດທີ່ໜ້າປະຫຼາດໃຈ</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

export default function TodoList() {
  return (
    // ນີ້ມັນບໍ່ສາມາດເຮັດວຽກໄດ້ເລີຍ!
    <h1>Todos ຂອງ Hedy Lamarr</h1>
    <img
      src="https://i.imgur.com/yXOvdOSs.jpg"
      alt="Hedy Lamarr"
      class="photo"
    >
    <ul>
      <li>ປະດິດໄຟສັນຍານຈາລະຈອນ
      <li>ຊ້ອມສາກໜັງ
      <li>ປັບປຸງເຕັກໂນໂລຊີ spectrum
    </ul>

export default function TodoList() {
  return (
    <>
      <h1>Todos ຂອງ Hedy Lamarr</h1>
      <img
        src="https://i.imgur.com/yXOvdOSs.jpg"
        alt="Hedy Lamarr"
        className="photo"
      />
      <ul>
        <li>ປະດິດໄຟສັນຍານຈາລະຈອນ</li>
        <li>ຊ້ອມສາກໜັງ</li>
        <li>ປັບປຸງເຕັກໂນໂລຊີ spectrum</li>
      </ul>
    </>
  );
}

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>Todos ຂອງ {person.name} </h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>ປັບປຸງວີດີໂອໂຟນ</li>
        <li>ກຽມບັນຍາຍການບິນ</li>
        <li>ເຮັດວຽກກັບເຄື່ອງຈັກທີ່ໃຊ້ແອວກໍຮໍເປັນເຊື້ອໄຟ</li>
      </ul>
    </div>
  );
}

import { getImageUrl } from './utils.js'

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✔'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>ລາຍການຂອງ Sally Ride</h1>
      <ul>
        <Item
          isPacked={true}
          name="ຊຸດອາວະກາດ"
        />
        <Item
          isPacked={true}
          name="ໝວກກັນກະທົບທີ່ມີໃບສີທອງ"
        />
        <Item
          isPacked={false}
          name="ຮູບຂອງແທັມ"
        />
      </ul>
    </section>
  );
}

import { people } from './data.js';
import { getImageUrl } from './utils.js';

export default function List() {
  const listItems = people.map(person =>
    <li key={person.id}>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}:</b>
        {' ' + person.profession + ' '}
        ເປັນທີ່ຮູ້ຈັກສຳຫຼັບ {person.accomplishment}
      </p>
    </li>
  );
  return (
    <article>
      <h1>ນັກວິທະຍາສາດ</h1>
      <ul>{listItems}</ul>
    </article>
  );
}

let guest = 0;

function Cup() {
  // ບໍ່ດິ: ປ່ຽນຄ່າຕົວແປທີ່ມີຢູ່ກ່ອນ!
  guest = guest + 1;
  return <h2>ຊາສຳລັບແຂກ  #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}