diff --git a/.eslintcache b/.eslintcache
index 2f6aa6a..77e0101 100644
--- a/.eslintcache
+++ b/.eslintcache
@@ -1 +1 @@
-[{"/Users/user/repos/sort-measurer/src/index.js":"1","/Users/user/repos/sort-measurer/src/App.js":"2","/Users/user/repos/sort-measurer/src/reportWebVitals.js":"3","/Users/user/repos/sort-measurer/src/components/Playground.js":"4","/Users/user/repos/sort-measurer/src/components/Logo.js":"5","/Users/user/repos/sort-measurer/src/components/Workplace.js":"6","/Users/user/repos/sort-measurer/src/components/List.js":"7"},{"size":500,"mtime":1612120197176,"results":"8","hashOfConfig":"9"},{"size":456,"mtime":1612133288528,"results":"10","hashOfConfig":"9"},{"size":362,"mtime":1611856800076,"results":"11","hashOfConfig":"9"},{"size":3727,"mtime":1612122157515,"results":"12","hashOfConfig":"9"},{"size":2938,"mtime":1612132213603,"results":"13","hashOfConfig":"9"},{"size":1035,"mtime":1612134551571,"results":"14","hashOfConfig":"9"},{"size":221,"mtime":1612134394816,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"ff9ndh",{"filePath":"18","messages":"19","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"25","usedDeprecatedRules":"22"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"28","usedDeprecatedRules":"22"},{"filePath":"29","messages":"30","errorCount":1,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"/Users/user/repos/sort-measurer/src/index.js",[],"/Users/user/repos/sort-measurer/src/App.js",["33"],"/Users/user/repos/sort-measurer/src/reportWebVitals.js",[],["34","35"],"/Users/user/repos/sort-measurer/src/components/Playground.js",["36"],"import { useState } from \"react\";\nimport { useTheme } from \"css-vars-hook\";\n\nimport \"./Playground.css\";\n\nclass Rectangle {\n  constructor(height, width) {\n    this.height = height;\n    this.width = width;\n  }\n  get area() {\n    return this.calcArea();\n  }\n  calcArea() {\n    return this.height * this.width;\n  }\n}\n/*\nconst tab = [rect1.area, rect2.area, rect3.area];\nconst sortedtab = tab.sort(function (tab, temp) {\n  return tab - temp;\n});\n*/\n/*\n\n\nThere are a few ways of doing this, so I'll just give an example of a simple to understand (if somewhat inefficient) method that should still give fairly decent results.\n\n    Start by ordering your boxes from largest to smallest.\n    Presume that your first box is going to be square (it won't end up that way, but it will end close). Take sqrt(area[1]) to get the length of its side. Take that width as the width you want for your first column.\n    Given that width, fill as many more rows as you can in that column.\n    Add up how much total area you have put in the column; resize its width to be match that (it will now be a little thinner).\n    Repeat steps 1-3 for the rest of the available boxes. When you get to the point where the target width for your first box in the column is wider than the amount of space you have left, just use that width.\n    The remaining boxes should cleanly fit into that remaining space in that column.\n\nThis will give you aligned columns, with varying height divisions. As an alternative, you can flip \"row\" and \"column\" to get constant row divisions with varying column splits.\n\n\n*/\n\nexport default function Playground(props) {\n  const rectangleMeasures = { boxWidth: \"200px\", boxHeight: \"300px\" };\n  const [sheetWidth, setSheetWidth] = useState(\"\");\n  const [sheetHeight, setSheetHeight] = useState(\"\");\n  const [rectangleWidth, setRectangleWidth] = useState(\n    rectangleMeasures.boxWidth\n  );\n  const [rectangleHeight, setRectangleHeight] = useState(\n    rectangleMeasures.boxHeight\n  );\n\n  const { setRef, setVariable } = useTheme(rectangleMeasures);\n\n  const handleSheetDimensionsSubmit = (e) => {\n    e.preventDefault();\n    alert(`Sheet dimensons: ${sheetWidth} x ${sheetHeight}`);\n  };\n  const handleRectangleDimensionsSubmit = (e) => {\n    e.preventDefault();\n    setVariable(\"boxWidth\", rectangleWidth);\n    setVariable(\"boxHeight\", rectangleHeight);\n  };\n  return (\n    <>\n      <h1>{props.title}</h1>\n      <div ref={setRef}>\n        <form onSubmit={handleSheetDimensionsSubmit}>\n          <label>\n            Sheet dimensons:\n            <input\n              type=\"text\"\n              value={sheetWidth}\n              onChange={(e) => setSheetWidth(e.target.value)}\n            />\n            <input\n              type=\"text\"\n              value={sheetHeight}\n              onChange={(e) => setSheetHeight(e.target.value)}\n            />\n          </label>\n          <input type=\"submit\" value=\"Submit\" />\n        </form>\n        <form onSubmit={handleRectangleDimensionsSubmit}>\n          <label>\n            Rectangle dimensons:\n            <input\n              type=\"text\"\n              value={rectangleWidth}\n              onChange={(e) => setRectangleWidth(e.target.value)}\n            />\n            <input\n              type=\"text\"\n              value={rectangleHeight}\n              onChange={(e) => setRectangleHeight(e.target.value)}\n            />\n          </label>\n          <input type=\"submit\" value=\"+\" />\n        </form>\n        <div className=\"boxes\">\n          <div\n            className=\"demo-box\"\n            style={{\n              background: \"red\",\n              width: rectangleWidth,\n              height: rectangleHeight,\n            }}\n          ></div>\n        </div>\n      </div>\n    </>\n  );\n}\n","/Users/user/repos/sort-measurer/src/components/Logo.js",["37"],"import { logRoles } from \"@testing-library/react\";\n\nexport default function Logo() {\n  var randomColor = Math.floor(Math.random() * 16777215).toString(16);\n  var current = \"#\" + randomColor;\n  return (\n    <>\n      {\" \"}\n      <svg xmlns=\"http://width.w3.org/2000/svg\" viewBox=\"0 0 841.9 595.3\">\n        <g fill={current}>\n          <path d=\"M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z\" />\n          <circle cx=\"420.9\" cy=\"296.5\" r=\"45.7\" />\n          <path d=\"M520.5 78.1z\" />\n        </g>\n      </svg>\n    </>\n  );\n}\n","/Users/user/repos/sort-measurer/src/components/Workplace.js",["38","39","40"],"/Users/user/repos/sort-measurer/src/components/List.js",[],{"ruleId":"41","severity":1,"message":"42","line":2,"column":8,"nodeType":"43","messageId":"44","endLine":2,"endColumn":18},{"ruleId":"45","replacedBy":"46"},{"ruleId":"47","replacedBy":"48"},{"ruleId":"41","severity":1,"message":"49","line":6,"column":7,"nodeType":"43","messageId":"44","endLine":6,"endColumn":16},{"ruleId":"41","severity":1,"message":"50","line":1,"column":10,"nodeType":"43","messageId":"44","endLine":1,"endColumn":18},{"ruleId":"41","severity":1,"message":"51","line":7,"column":10,"nodeType":"43","messageId":"44","endLine":7,"endColumn":24},{"ruleId":"41","severity":1,"message":"52","line":7,"column":26,"nodeType":"43","messageId":"44","endLine":7,"endColumn":43},{"ruleId":"53","severity":2,"message":"54","line":37,"column":25,"nodeType":"43","messageId":"55","endLine":37,"endColumn":35},"no-unused-vars","'Playground' is defined but never used.","Identifier","unusedVar","no-native-reassign",["56"],"no-negated-in-lhs",["57"],"'Rectangle' is defined but never used.","'logRoles' is defined but never used.","'rectangleArray' is assigned a value but never used.","'setRectangleArray' is assigned a value but never used.","no-undef","'rectangles' is not defined.","undef","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
+[{"/Users/user/repos/sort-measurer/src/index.js":"1","/Users/user/repos/sort-measurer/src/App.js":"2","/Users/user/repos/sort-measurer/src/reportWebVitals.js":"3","/Users/user/repos/sort-measurer/src/components/Playground.js":"4","/Users/user/repos/sort-measurer/src/components/Logo.js":"5","/Users/user/repos/sort-measurer/src/components/Workplace.js":"6","/Users/user/repos/sort-measurer/src/components/List.js":"7"},{"size":500,"mtime":1612120197176,"results":"8","hashOfConfig":"9"},{"size":456,"mtime":1612133288528,"results":"10","hashOfConfig":"9"},{"size":362,"mtime":1611856800076,"results":"11","hashOfConfig":"9"},{"size":3727,"mtime":1612122157515,"results":"12","hashOfConfig":"9"},{"size":2938,"mtime":1612132213603,"results":"13","hashOfConfig":"9"},{"size":1047,"mtime":1612134613898,"results":"14","hashOfConfig":"9"},{"size":221,"mtime":1612134394816,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"ff9ndh",{"filePath":"18","messages":"19","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"25","usedDeprecatedRules":"22"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"28","usedDeprecatedRules":"22"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"/Users/user/repos/sort-measurer/src/index.js",[],"/Users/user/repos/sort-measurer/src/App.js",["33"],"/Users/user/repos/sort-measurer/src/reportWebVitals.js",[],["34","35"],"/Users/user/repos/sort-measurer/src/components/Playground.js",["36"],"import { useState } from \"react\";\nimport { useTheme } from \"css-vars-hook\";\n\nimport \"./Playground.css\";\n\nclass Rectangle {\n  constructor(height, width) {\n    this.height = height;\n    this.width = width;\n  }\n  get area() {\n    return this.calcArea();\n  }\n  calcArea() {\n    return this.height * this.width;\n  }\n}\n/*\nconst tab = [rect1.area, rect2.area, rect3.area];\nconst sortedtab = tab.sort(function (tab, temp) {\n  return tab - temp;\n});\n*/\n/*\n\n\nThere are a few ways of doing this, so I'll just give an example of a simple to understand (if somewhat inefficient) method that should still give fairly decent results.\n\n    Start by ordering your boxes from largest to smallest.\n    Presume that your first box is going to be square (it won't end up that way, but it will end close). Take sqrt(area[1]) to get the length of its side. Take that width as the width you want for your first column.\n    Given that width, fill as many more rows as you can in that column.\n    Add up how much total area you have put in the column; resize its width to be match that (it will now be a little thinner).\n    Repeat steps 1-3 for the rest of the available boxes. When you get to the point where the target width for your first box in the column is wider than the amount of space you have left, just use that width.\n    The remaining boxes should cleanly fit into that remaining space in that column.\n\nThis will give you aligned columns, with varying height divisions. As an alternative, you can flip \"row\" and \"column\" to get constant row divisions with varying column splits.\n\n\n*/\n\nexport default function Playground(props) {\n  const rectangleMeasures = { boxWidth: \"200px\", boxHeight: \"300px\" };\n  const [sheetWidth, setSheetWidth] = useState(\"\");\n  const [sheetHeight, setSheetHeight] = useState(\"\");\n  const [rectangleWidth, setRectangleWidth] = useState(\n    rectangleMeasures.boxWidth\n  );\n  const [rectangleHeight, setRectangleHeight] = useState(\n    rectangleMeasures.boxHeight\n  );\n\n  const { setRef, setVariable } = useTheme(rectangleMeasures);\n\n  const handleSheetDimensionsSubmit = (e) => {\n    e.preventDefault();\n    alert(`Sheet dimensons: ${sheetWidth} x ${sheetHeight}`);\n  };\n  const handleRectangleDimensionsSubmit = (e) => {\n    e.preventDefault();\n    setVariable(\"boxWidth\", rectangleWidth);\n    setVariable(\"boxHeight\", rectangleHeight);\n  };\n  return (\n    <>\n      <h1>{props.title}</h1>\n      <div ref={setRef}>\n        <form onSubmit={handleSheetDimensionsSubmit}>\n          <label>\n            Sheet dimensons:\n            <input\n              type=\"text\"\n              value={sheetWidth}\n              onChange={(e) => setSheetWidth(e.target.value)}\n            />\n            <input\n              type=\"text\"\n              value={sheetHeight}\n              onChange={(e) => setSheetHeight(e.target.value)}\n            />\n          </label>\n          <input type=\"submit\" value=\"Submit\" />\n        </form>\n        <form onSubmit={handleRectangleDimensionsSubmit}>\n          <label>\n            Rectangle dimensons:\n            <input\n              type=\"text\"\n              value={rectangleWidth}\n              onChange={(e) => setRectangleWidth(e.target.value)}\n            />\n            <input\n              type=\"text\"\n              value={rectangleHeight}\n              onChange={(e) => setRectangleHeight(e.target.value)}\n            />\n          </label>\n          <input type=\"submit\" value=\"+\" />\n        </form>\n        <div className=\"boxes\">\n          <div\n            className=\"demo-box\"\n            style={{\n              background: \"red\",\n              width: rectangleWidth,\n              height: rectangleHeight,\n            }}\n          ></div>\n        </div>\n      </div>\n    </>\n  );\n}\n","/Users/user/repos/sort-measurer/src/components/Logo.js",["37"],"import { logRoles } from \"@testing-library/react\";\n\nexport default function Logo() {\n  var randomColor = Math.floor(Math.random() * 16777215).toString(16);\n  var current = \"#\" + randomColor;\n  return (\n    <>\n      {\" \"}\n      <svg xmlns=\"http://width.w3.org/2000/svg\" viewBox=\"0 0 841.9 595.3\">\n        <g fill={current}>\n          <path d=\"M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z\" />\n          <circle cx=\"420.9\" cy=\"296.5\" r=\"45.7\" />\n          <path d=\"M520.5 78.1z\" />\n        </g>\n      </svg>\n    </>\n  );\n}\n","/Users/user/repos/sort-measurer/src/components/Workplace.js",["38","39"],"/Users/user/repos/sort-measurer/src/components/List.js",[],{"ruleId":"40","severity":1,"message":"41","line":2,"column":8,"nodeType":"42","messageId":"43","endLine":2,"endColumn":18},{"ruleId":"44","replacedBy":"45"},{"ruleId":"46","replacedBy":"47"},{"ruleId":"40","severity":1,"message":"48","line":6,"column":7,"nodeType":"42","messageId":"43","endLine":6,"endColumn":16},{"ruleId":"40","severity":1,"message":"49","line":1,"column":10,"nodeType":"42","messageId":"43","endLine":1,"endColumn":18},{"ruleId":"40","severity":1,"message":"50","line":7,"column":10,"nodeType":"42","messageId":"43","endLine":7,"endColumn":24},{"ruleId":"40","severity":1,"message":"51","line":7,"column":26,"nodeType":"42","messageId":"43","endLine":7,"endColumn":43},"no-unused-vars","'Playground' is defined but never used.","Identifier","unusedVar","no-native-reassign",["52"],"no-negated-in-lhs",["53"],"'Rectangle' is defined but never used.","'logRoles' is defined but never used.","'rectangleArray' is assigned a value but never used.","'setRectangleArray' is assigned a value but never used.","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
diff --git a/src/components/Workplace.js b/src/components/Workplace.js
index 83ec972..7734505 100644
--- a/src/components/Workplace.js
+++ b/src/components/Workplace.js
@@ -6,13 +6,13 @@ export default function Workplace() {
   const [height, setHeight] = useState("");
   const [rectangleArray, setRectangleArray] = useState("");
 
-  const numbers = [{ w: "100px", h: "100px", c: "red" }];
-  numbers.push({ w: "200px", h: "300px", c: "cyan" });
+  const rectangles = [{ w: "100px", h: "100px", c: "red" }];
+  rectangles.push({ w: "200px", h: "300px", c: "cyan" });
 
   const handleFormSubmit = (e) => {
     e.preventDefault();
-    numbers.push({ w: width + "px", h: height + "px", c: "blue" });
-    console.log(numbers);
+    rectangles.push({ w: width + "px", h: height + "px", c: "blue" });
+    console.log(rectangles);
   };
 
   return (