Created the DesignItem.jsx

src/states/Manage/pages/ManageChannel/components/DesignItem/DesignItem.jsx

@@ -0,0 +1,33 @@
+import CoinImage from "@/common/images/coin.png";
+import DesignImage from "@/common/images/design.png";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faDroplet, faMessage} from "@fortawesome/free-solid-svg-icons";
+import "./styles.sass";
+
+export const DesignItem = ({name, coins, perks = []}) => {
+    return (
+        <div className="design-item">
+            <div className="design-info">
+                <div className="design-title">
+                    <h1>{name}</h1>
+                    <div className="required-coins">
+                        <img src={CoinImage} alt="StarCoins" />
+                        <p>{coins}</p>
+                    </div>
+                </div>
+
+                <div className="design-perks">
+                    <div className="design-perk">
+                        <FontAwesomeIcon icon={faMessage} />
+                        <h2>Embed-Message</h2>
+                    </div>
+                    <div className="design-perk">
+                        <FontAwesomeIcon icon={faDroplet } />
+                        <h2>Colorful Design</h2>
+                    </div>
+                </div>
+            </div>
+            <img src={DesignImage} alt="Design" />
+        </div>
+    )
+}