So I'm trying to mimic a UI in React. I have been able to implement most of it except the following points:

1. Blue background in Edit Component should cover the whole top. Currently it does not cover the borders. I'm assuming that due to padding this issue occurs, not sure how to fix it though.

2. Delete button should be aligned to the center as in the reference image. Currently it is palced slightly down.

3. I want to display a ' ' symbol at left of Add Button. It is available under /resources/plus.svg but for some reason browser is not rendering it.

The Reference Design is:

This is what I have been able to pull of so far:

My Styled Components are:

const Container = styled("div")`
  border: 1px solid grey;
  padding: 15px;
`;

const AddButton = styled("button")`
  border-radius: 10px;
  background-color: white;
  font-size: 12px;
  width: 110px;
  height: 35px;
`;

const DeleteButton = styled("button")`
  float: right;
  align-items: center;
  border-radius: 10px;
  background-color: white;
  font-size: 12px;
  width: 60px;
  height: 35px;
`;

const BulletEditor = styled("h3")`
  background-color:rgb(6, 8, 100);
  color:white;
  font-size: 14px;
  padding: 10px;
`;

const ComponentPreview = styled("div")`
  word-wrap: break-word;
  border-radius: 10px;
  border-color: white;
  border-style: solid;
  margin: 10px;
  padding: 10px;
  width: 350px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
`;

const BulletInput = styled("input")`
  border-radius: 5px;
  height: 40px;
  padding-left: 10px;
  margin-bottom: 10px;
  margin-top: -10px;
  width: 75%;
`;

const HeadlineInput = styled("input")`
  border-radius: 5px;
  height: 40px;
  padding-left: 10px;
  margin-bottom: 10px;
  margin-top: -10px;
  width: 97%;
`;

const ComponentEditor = styled("div")`
  border-radius: 10px;
  border-style: solid;
  margin: 50px;
  padding: 10px;
  width: 500px;
  border-color: white;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
`;

const EditorColumn = styled("td")`
  border: 5px solid red;
  border-top: 5px solid red;
`;

const AppHeader = styled("th")`
  background-color:black;
  border-bottom: 5px solid red;
  color:white;
`;

They are used this way in a table structure:

const [bullet, setBullet] = useState(["Lorem Ipsum is simply dummy text"]);
  const [headline, setHeadline] = useState("How it works");

  const onChangeHandler = (index: number, value: string) => {
    setBullet((bullets) =>
      bullets.map((bullet, i) => (i === index ? value : bullet))
    );
  };

  // handle click event of the Add button
  const handleAddClick = () => {
    setBullet((bullets) => [...bullets, "Lorem Ipsum is simply dummy text"]);
  };

  function handleRemoveClick(index: number) {
    const list = [...bullet];
    list.splice(index, 1);
    setBullet(list);
  }

  return (
    <Container>
      <table>
        <tr>
          <AppHeader>Bullet Point Component</AppHeader>
          <AppHeader>Bullet Point Editor</AppHeader>
        </tr>
        <tr>
          <EditorColumn>
            <ComponentPreview>
              <strong>{headline}</strong>
              <ul>
                {bullet.map((value) => {
                  return <li>{value}</li>;
                })}
              </ul>
            </ComponentPreview>
          </EditorColumn>
          <EditorColumn>
            <ComponentEditor>
              <BulletEditor>Edit Component</BulletEditor>
              <p>Headline</p>
              <HeadlineInput
                type="text"
                value={headline}
                onChange={(event) => {
                  setHeadline(event.target.value);
                }}
              />
              {bullet.map((text, i) => {
                return (
                  <div>
                    <p>Bullet #{i   1}</p>
                    <BulletInput
                      placeholder="Enter text"
                      value={text}
                      onChange={(e) => onChangeHandler(i, e.target.value)}
                    />
                    <DeleteButton
                      onClick={() => handleRemoveClick(i)}
                    >
                      Delete
                    </DeleteButton>
                  </div>
                );
              })}
              <AddButton onClick={handleAddClick}>
                <img src="../resources/plus.svg" alt="plus"></img> Add Bullet
              </AddButton>
            </ComponentEditor>
          </EditorColumn>
        </tr>
      </table>
    </Container>
  );

Can somebody please help me in fixing the above mentioned 3 issues. I'm stuck at these for quite long now. Thank you in advance!

CodePudding user response：

Check the image path properly. if that's not the problem, try to import it like this

import image from "./resources/plus.svg"
<img src={image} />

CodePudding user response：

I have added and updated the styling as per your requirement, you can play further here and make thing work as your needed, please check.

please check the below reference https://stackblitz.com/edit/react-34zpft?file=src/StackStyled.js