Untitled

import React, { useState } from "react";
import { Container, Form, Button, Table, Row, Col } from "react-bootstrap";
import "./styles.css"; // Import stylesheet for custom styles

const App = () => {
  const [shoes, setShoes] = useState([]);
  const [shoe, setShoe] = useState({
    merk: "",
    nama: "",
    ukuran: "",
    stok: "",
    harga: "",
  });

  const handleChange = (e) => {
    setShoe({
      ...shoe,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setShoes([...shoes, shoe]);
    setShoe({
      merk: "",
      nama: "",
      ukuran: "",
      stok: "",
      harga: "",
    });
  };

  const deleteShoe = (index) => {
    const newShoes = [...shoes];
    newShoes.splice(index, 1);
    setShoes(newShoes);
  };

  return (
    <Container>
      <h1 className="title">Form Input Stok Sepatu</h1>
      <Row className="justify-content-md-center">
        <Col xs={12} md={6}>
          <Form onSubmit={handleSubmit} className="form">
            <Form.Group controlId="formMerk">
              <Form.Label>Merk Sepatu</Form.Label>
              <Form.Control
                type="text"
                name="merk"
                value={shoe.merk}
                onChange={handleChange}
                required
              />
            </Form.Group>
            <Form.Group controlId="formNama">
              <Form.Label>Nama Sepatu</Form.Label>
              <Form.Control
                type="text"
                name="nama"
                value={shoe.nama}
                onChange={handleChange}
                required
              />
            </Form.Group>
            <Form.Group controlId="formUkuran">
              <Form.Label>Ukuran Sepatu</Form.Label>
              <Form.Control
                type="text"
                name="ukuran"
                value={shoe.ukuran}
                onChange={handleChange}
                required
              />
            </Form.Group>
            <Form.Group controlId="formStok">
              <Form.Label>Stok</Form.Label>
              <Form.Control
                type="text"
                name="stok"
                value={shoe.stok}
                onChange={handleChange}
                required
              />
            </Form.Group>
            <Form.Group controlId="formHarga">
              <Form.Label>Harga</Form.Label>
              <Form.Control
                type="text"
                name="harga"
                value={shoe.harga}
                onChange={handleChange}
                required
              />
            </Form.Group>
            <Button variant="primary" type="submit">
              Tambah
            </Button>
          </Form>
        </Col>
      </Row>
      <Table striped bordered hover className="mt-4">
        <thead>
          <tr className="table-header">
            <th>Merk Sepatu</th>
            <th>Nama Sepatu</th>
            <th>Ukuran Sepatu</th>
            <th>Stok</th>
            <th>Harga</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {shoes.map((shoe, index) => (
            <tr key={index}>
              <td>{shoe.merk}</td>
              <td>{shoe.nama}</td>
              <td>{shoe.ukuran}</td>
              <td>{shoe.stok}</td>
              <td>{shoe.harga}</td>
              <td>
                <Button variant="danger" onClick={() => deleteShoe(index)}>
                  Hapus
                </Button>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </Container>
  );
};

export default App;