Locofy

import { FunctionComponent } from "react";
import {
  TextField,
  InputAdornment,
  Icon,
  IconButton,
  Button,
} from "@mui/material";

const ProductItem: FunctionComponent = () => {
  return (
    <div className="flex flex-col items-start justify-start text-left text-base text-gray font-text-input">
      <div className="w-[1121px] flex flex-col items-start justify-start gap-[16px]">
        <h4 className="m-0 relative text-inherit font-semibold font-inherit">
          Produkty
        </h4>
        <div className="self-stretch flex flex-row items-center justify-start gap-[16px]">
          <TextField
            className="[border:none] bg-[transparent]"
            color="warning"
            label="Kebab 001"
            placeholder="Produkt"
            sx={{ width: 360 }}
            variant="outlined"
          />
          <TextField
            className="[border:none] bg-[transparent]"
            color="warning"
            label="Domyślny 001"
            placeholder="Szablon etykiety"
            sx={{ width: 220 }}
            variant="outlined"
          />
          <TextField
            className="[border:none] bg-[transparent]"
            color="warning"
            label="35"
            placeholder="Ilość sztuk"
            sx={{ width: 111 }}
            variant="outlined"
            type="number"
          />
          <TextField
            className="[border:none] bg-[transparent]"
            color="warning"
            label="Numer partii"
            placeholder="Numer partii"
            sx={{ width: 140 }}
            variant="outlined"
          />
          <TextField
            className="[border:none] bg-[transparent] flex-1"
            color="warning"
            label="Data przydatności"
            placeholder="Data przydatności"
            variant="outlined"
          />
          <button className="cursor-pointer [border:none] p-0 bg-[transparent] relative w-6 h-6 overflow-hidden shrink-0">
            <img
              className="absolute h-full w-full top-[0%] right-[0%] bottom-[0%] left-[0%] max-w-full overflow-hidden max-h-full"
              alt=""
              src="/vector.svg"
            />
            <img
              className="absolute h-3/4 w-[58.33%] top-[12.5%] right-[20.83%] bottom-[12.5%] left-[20.83%] max-w-full overflow-hidden max-h-full"
              alt=""
              src="/vector1.svg"
            />
          </button>
        </div>
        <Button color="warning" variant="text">
          Dodaj kolejny produkt
        </Button>
      </div>
    </div>
  );
};

export default ProductItem;