diff --git a/src/states/Manage/pages/ManageChannel/ManageChannel.jsx b/src/states/Manage/pages/ManageChannel/ManageChannel.jsx index 5a0cb21..cca5c41 100644 --- a/src/states/Manage/pages/ManageChannel/ManageChannel.jsx +++ b/src/states/Manage/pages/ManageChannel/ManageChannel.jsx @@ -1,9 +1,24 @@ import "./styles.sass"; import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; -import {faGear, faPalette} from "@fortawesome/free-solid-svg-icons"; -import DesignItem from "@/states/Manage/pages/ManageChannel/components/DesignItem/index.js"; +import {faDroplet, faGear, faMessage, faPalette} from "@fortawesome/free-solid-svg-icons"; +import DesignItem from "@/states/Manage/pages/ManageChannel/components/DesignItem"; +import SettingsItem from "@/states/Manage/pages/ManageChannel/components/SettingsItem"; +import {useContext, useEffect, useState} from "react"; +import {useParams} from "react-router-dom"; +import {ChannelContext} from "@/states/Manage/pages/Channels/contexts/ChannelContext"; export const ManageChannel = () => { + + const params = useParams(); + const {channels, getChannelById} = useContext(ChannelContext); + const [currentChannel, setCurrentChannel] = useState(); + + useEffect(() => { + if (channels) setCurrentChannel(getChannelById(params.channel)); + }, [channels]); + + if (!currentChannel) return; + return ( <div className="manage-channel"> <div className="manage-section"> @@ -12,29 +27,12 @@ export const ManageChannel = () => { <h1>Settings</h1> </div> - <div className="settings-box"> - <div className="setting-info"> - <h2>Language</h2> - <p>Which language should be chosen for this channel?</p> - </div> - <select> - <option>English</option> - <option>Deutsch</option> - </select> - </div> + <SettingsItem name="Language" description="Which language should be chosen for this channel?" type="langCode" + options={[{id: "en", value: "English"}, {id: "de", value: "Deutsch"}]} current={currentChannel.langCode} /> - <div className="settings-box"> - <div className="setting-info"> - <h2>Topic</h2> - <p>What is this channel about?</p> - </div> - <select> - <option>Just Chatting</option> - <option>Gaming</option> - <option>Coding</option> - <option>Anime</option> - </select> - </div> + <SettingsItem name="Topic" description="What is this channel about?" type="topic" + options={[{id: "1", value: "General"}, {id: "2", value: "Gaming"}, + {id: "3", value: "Coding"}, {id: "4", value: "Anime"}]} current={currentChannel.topic} /> <div className="manage-section"> <FontAwesomeIcon icon={faPalette} /> @@ -43,8 +41,25 @@ export const ManageChannel = () => { <div className="design-container"> - <DesignItem name="Default" coins="500" perks={[]} /> + <DesignItem name="Default" coins="500" perks={[ + {icon: faMessage, name: "Embed-Message"}, + {icon: faDroplet, name: "Colorful design"} + ]} id={1} /> + <DesignItem name="Better" coins="500" perks={[ + {icon: faMessage, name: "Embed-Message"}, + {icon: faDroplet, name: "Colorful design"} + ]} id={2} /> + + <DesignItem name="Default" coins="500" perks={[ + {icon: faMessage, name: "Embed-Message"}, + {icon: faDroplet, name: "Colorful design"} + ]} id={3} /> + + <DesignItem name="Better" coins="500" perks={[ + {icon: faMessage, name: "Embed-Message"}, + {icon: faDroplet, name: "Colorful design"} + ]} id={4}/> </div> </div> );