refactor: further break code down into components

js/src/forum/components/Poll.tsx

@@ -3,59 +3,27 @@ import Component from 'flarum/common/Component';
 
 import PollTitle from './Poll/PollTitle';
 import PollDescription from './Poll/PollDescription';
-import PollOption from './Poll/PollOption';
+import PollOptions from './Poll/PollOptions';
 import PollSubmitButton from './Poll/PollSubmitButton';
+import PollImage from './Poll/PollImage';
 export default class IndexPolls extends Component {
   view(): Mithril.Children {
     return (
       <div className="Index-poll">
-        <PollTitle />
-        <PollDescription />
-        <form>
-          <fieldset>
-            <legend className="sr-only">Privacy setting</legend>
-            <div className="aaa">
-              <label className="ba bbb">
-                <input
-                  type="radio"
-                  name="privacy-setting"
-                  value="Public access"
-                  className="ccc"
-                  aria-labelledby="privacy-setting-0-label"
-                  aria-describedby="privacy-setting-0-description"
-                />
-                <span className="ddd">
-                  <span id="privacy-setting-0-label" className="fff">
-                    Public access
-                  </span>
-                  <span id="privacy-setting-0-description" className="ggg">
-                    This project would be available to anyone who has the link
-                  </span>
-                </span>
-              </label>
-              <PollOption />
-              <label className="bba bbb">
-                <input
-                  type="radio"
-                  name="privacy-setting"
-                  value="Private to you"
-                  className="ccc"
-                  aria-labelledby="privacy-setting-2-label"
-                  aria-describedby="privacy-setting-2-description"
-                />
-                <span className="ddd">
-                  <span id="privacy-setting-2-label" className="fff">
-                    Private to you
-                  </span>
-                  <span id="privacy-setting-2-description" className="ggg">
-                    You are the only one able to access this project
-                  </span>
-                </span>
-              </label>
-            </div>
-            <PollSubmitButton />
-          </fieldset>
-        </form>
+        <div className="PollImage">
+          <PollImage />
+        </div>
+        <div className="Poll">
+          <PollTitle />
+          <PollDescription />
+          <form>
+            <fieldset>
+              <legend className="sr-only">Privacy setting</legend>
+              <PollOptions />
+              <PollSubmitButton />
+            </fieldset>
+          </form>
+        </div>
       </div>
     );
   }

js/src/forum/components/Poll/PollImage.tsx

@@ -0,0 +1,8 @@
+import * as Mithril from 'mithril';
+import Component from 'flarum/common/Component';
+
+export default class PollImage extends Component {
+  view(): Mithril.Children {
+    return;
+  }
+}

js/src/forum/components/Poll/PollOption.tsx

@@ -15,10 +15,10 @@ export default class PollOption extends Component {
         />
         <span className="ddd">
           <span id="privacy-setting-1-label" className="fff">
-            Private to Project Members test
+            Private to Project Members test 23
           </span>
           <span id="privacy-setting-1-description" className="ggg">
-            Only members of this project would be able to access
+            Only members of this project would be able to access 3
           </span>
         </span>
       </label>

js/src/forum/components/Poll/PollOptions.tsx

@@ -0,0 +1,59 @@
+import * as Mithril from 'mithril';
+import Component from 'flarum/common/Component';
+import PollOption from './PollOption';
+import listItems from 'flarum/common/helpers/listItems';
+import ItemList from 'flarum/common/utils/ItemList';
+
+export default class PollOptions extends Component {
+  view(): Mithril.Children {
+    return (
+      <div className="aaa">
+        <label className="ba bbb">
+          <input
+            type="radio"
+            name="privacy-setting"
+            value="Public access"
+            className="ccc"
+            aria-labelledby="privacy-setting-0-label"
+            aria-describedby="privacy-setting-0-description"
+          />
+          <span className="ddd">
+            <span id="privacy-setting-0-label" className="fff">
+              Public access
+            </span>
+            <span id="privacy-setting-0-description" className="ggg">
+              This project would be available to anyone who has the link
+            </span>
+          </span>
+        </label>
+        {this.pollOptions().toArray()}
+        <label className="bba bbb">
+          <input
+            type="radio"
+            name="privacy-setting"
+            value="Private to you"
+            className="ccc"
+            aria-labelledby="privacy-setting-2-label"
+            aria-describedby="privacy-setting-2-description"
+          />
+          <span className="ddd">
+            <span id="privacy-setting-2-label" className="fff">
+              Private to you
+            </span>
+            <span id="privacy-setting-2-description" className="ggg">
+              You are the only one able to access this project
+            </span>
+          </span>
+        </label>
+      </div>
+    );
+  }
+
+  pollOptions(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add('test', <PollOption />);
+
+    return items;
+  }
+}

resources/less/forum.less

@@ -468,3 +468,15 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
+
+.Index-poll {
+  display: flex;
+  gap: 15px;
+
+  .PollImage {
+  }
+
+  .Poll {
+    flex-grow: 1;
+  }
+}