Componentizing the popup window.

Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>

src/TestPanel.js

@@ -127,6 +127,17 @@ function PopupWindow(p) {
 <h1>{p.title}</h1>
 {p.showCloseButton&&<div className="boxExit" onClick={()=>{p.setModalOpen(false)}}></div>}
 </div>
+<PageControl pages={p.pageNames.length} pageNames={p.pageNames}/>
+<div className="itemBar">
+<div className="itemBarSort">
+<select className="itemBarForm">
+  {p.sortItems.map((item)=><option>{item.name}</option>)}
+</select>
+</div>
+<div className="itemBarFilter">
+{p.filter&&<input className="itemBarForm" type="text" placeholder="Filter" />}
+</div>
+</div>
 {p.children}
 </div>
 	</Modal>
@@ -410,26 +421,15 @@ useEffect(()=>{
 </div>
 </div>
 
-<PopupWindow modalOpen={modalOpen} setModalOpen={setModalOpen} showCloseButton={true} title="Modal Title">
-<ul className="boxmenu">
-<li>Rifle</li>
-<li>Launcher</li>
-<li>Rod</li>
-<li>Talis</li>
-</ul>
-<div className="itemBar">
-<div className="itemBarSort">
-<select className="itemBarForm">
-  <option>Standard Sort</option>
-  <option>Rarity</option>
-  <option>Attack</option>
-  <option>Potency</option>
-</select>
-</div>
-<div className="itemBarFilter">
-<input className="itemBarForm" type="text" placeholder="Filter" />
-</div>
-</div>
+<PopupWindow modalOpen={modalOpen} setModalOpen={setModalOpen} showCloseButton={true} title="Modal Title"
+  pageNames={["All","Rifle","Launcher","Rod","Talis"]}
+  sortItems={[
+    {name:"Standard Sort",value:"id"},
+    {name:"Rarity",value:"rarity"},
+    {name:"Attack",value:"atk"},
+    {name:"Potency",value:"potency"}]}
+  filter={true}
+>
   <div className="modalItemListContainer customScrollbar">
   <ul className="itemlist">
   <li className="itemwep r1"><img className="itemimg" alt="" src="64px-NGSUIItemPrimmRifle.png" /><em className="rifle">Primm Rifle</em><br /><span className="atk">177</span>					<span className="pot tooltip">Recycler Unit<span>Lv.4: Potency +24%/<br />20% chance of Restasigne not being consumed on use. Effect starts 10 sec after equip</span></span></li>