Minigame Editor Demo 16/10/2024

minigame-editor/src/template/Reward.jsx

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+
+import Editable from "../components/Editable"
+
+const StyledReward = styled.div`
+  ${props => props.$sty}
+`
+
+function Reward({ props }) {
+  const limit = parseInt(props.reward.attributes.limit);
+  const style = props.reward.styles;
+
+  return (
+    <div className="container">
+      <StyledReward id="reward" className="ld-item box reward" $sty={style}>
+        <Editable props={props.reward_heading} />
+
+        <ul className=" list reward-list">
+          {
+            [...Array(limit)].map((item, index) =>
+              <li className="reward-item" key={index}>
+                <div className="reward-top">
+                  <div className="reward-img">
+                    <img src="src/assets/images/hnc-game-2-voucher-1.png" alt="Voucher" width="111" height="111" />
+                  </div>
+                  <div className="flex-1">
+                    <p className="reward-no">1 giải nhất</p>
+                    <p className="reward-name">PC GAMING HACOM HURACAN</p>
+                  </div>
+                </div>
+                <p className="reward-price">Trị giá <b className="reward-bold">59.999.000 đ</b></p>
+              </li>
+            )
+          }
+        </ul>
+      </StyledReward>
+    </div>
+  )
+}
+
+export default Reward