SheepstarStudio/Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added the default designs to the ManageChannel.jsx

Browse Source
This commit is contained in:
Mathias Wagner 2023-11-17 06:44:17 +01:00
parent 70c3e9bc38
commit 78e9758be2
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 40 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/states/Manage/pages/ManageChannel/ManageChannel.jsx
View File

@ -1,9 +1,24 @@
import "./styles.sass"; import "./styles.sass";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faGear, faPalette} from "@fortawesome/free-solid-svg-icons"; import {faDroplet, faGear, faMessage, faPalette} from "@fortawesome/free-solid-svg-icons";
import DesignItem from "@/states/Manage/pages/ManageChannel/components/DesignItem/index.js"; 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 = () => { 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 ( return (
<div className="manage-channel"> <div className="manage-channel">
<div className="manage-section"> <div className="manage-section">
@ -12,29 +27,12 @@ export const ManageChannel = () => {
<h1>Settings</h1> <h1>Settings</h1>
</div> </div>
<div className="settings-box"> <SettingsItem name="Language" description="Which language should be chosen for this channel?" type="langCode"
<div className="setting-info"> options={[{id: "en", value: "English"}, {id: "de", value: "Deutsch"}]} current={currentChannel.langCode} />
<h2>Language</h2>
<p>Which language should be chosen for this channel?</p>
</div>
<select>
<option>English</option>
<option>Deutsch</option>
</select>
</div>
<div className="settings-box"> <SettingsItem name="Topic" description="What is this channel about?" type="topic"
<div className="setting-info"> options={[{id: "1", value: "General"}, {id: "2", value: "Gaming"},
<h2>Topic</h2> {id: "3", value: "Coding"}, {id: "4", value: "Anime"}]} current={currentChannel.topic} />
<p>What is this channel about?</p>
</div>
<select>
<option>Just Chatting</option>
<option>Gaming</option>
<option>Coding</option>
<option>Anime</option>
</select>
</div>
<div className="manage-section"> <div className="manage-section">
<FontAwesomeIcon icon={faPalette} /> <FontAwesomeIcon icon={faPalette} />
@ -43,8 +41,25 @@ export const ManageChannel = () => {
<div className="design-container"> <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>
</div> </div>
); );