gistfile1.txt

import "./styles.css";
import styled from "styled-components";


const Product = styled.div`
  display: flex;
  border-style: dotted;
  margin: 5px;
  border: "1px solid black";
  padding: 10px;

  div {
    margin: 5px;
  }

  span {
    color: red;
    font-weight: bold;
  }
`;

export default function App() {

  const array = [
    "1,Adidas, 100, 40",
    "2,Nike, 40, 10",
    "3,Starbucks, 33, 75",
    "4,Disney, 100, 40",
    "5,Logitec, 74, 04",
    "6,Apple, 85, 13"
  ];

  interface ArrayProps {
    id: string;
    name: string;
    promoted: number;
    value: number;
  }

  const parsedItems = array.reduce<ArrayProps[]>((acc, item) => {
    const [id,name,promoted,value] = item.split(",").trim();

    return [
      ...acc,
      {
        id,
        name,
        promoted,
        value
      }
    ];
  }, []);

  console.log(parsedItems);
  return (
    <div className="App">
      {parsedItems
        .sort((a, b) => b.promoted - a.promoted)
        .map(({ id, name, promoted, value }) => (
          <Product key={id}>
            <div>
              <span>Name:</span> {name}
            </div>
            <div>
              <span>Promoted:</span> {promoted}
            </div>
            <div>
              <span>Value:</span> {value}
            </div>
          </Product>
        ))}
    </div>
  );
}