Updated the DesignItem.jsx

This commit is contained in:
2023-11-17 06:40:52 +01:00
parent 570669b559
commit 2eb7a544e4

@ -1,12 +1,31 @@
import CoinImage from "@/common/images/coin.png"; import CoinImage from "@/common/images/coin.png";
import DesignImage from "@/common/images/design.png"; import DesignImage from "@/common/images/design.png";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faDroplet, faMessage} from "@fortawesome/free-solid-svg-icons";
import "./styles.sass"; import "./styles.sass";
import {useContext, useEffect, useState} from "react";
import {ChannelContext} from "@/states/Manage/pages/Channels/contexts/ChannelContext";
import {useParams} from "react-router-dom";
import {patchRequest} from "@/common/util/RequestUtil.js";
export const DesignItem = ({id, name, coins, perks = [], active}) => {
const params = useParams();
const {channels, getChannelById, updateChannels} = useContext(ChannelContext);
const [currentChannel, setCurrentChannel] = useState();
const switchChannel = () => {
patchRequest("/channels/" + params.channel, {designId: id})
.then(() => updateChannels());
}
useEffect(() => {
if (channels) setCurrentChannel(getChannelById(params.channel));
}, [channels]);
if (!currentChannel) return;
export const DesignItem = ({name, coins, perks = []}) => {
return ( return (
<div className="design-item"> <div className={"design-item" + (currentChannel.designId === id ? " design-active" : " design-inactive") } onClick={switchChannel}>
<div className="design-info"> <div className="design-info">
<div className="design-title"> <div className="design-title">
<h1>{name}</h1> <h1>{name}</h1>
@ -17,14 +36,11 @@ export const DesignItem = ({name, coins, perks = []}) => {
</div> </div>
<div className="design-perks"> <div className="design-perks">
<div className="design-perk"> {perks.map(perk => (
<FontAwesomeIcon icon={faMessage} /> <div className="design-perk" key={perk.name}>
<h2>Embed-Message</h2> <FontAwesomeIcon icon={perk.icon}/>
</div> <h2>{perk.name}</h2>
<div className="design-perk"> </div>))}
<FontAwesomeIcon icon={faDroplet } />
<h2>Colorful Design</h2>
</div>
</div> </div>
</div> </div>
<img src={DesignImage} alt="Design"/> <img src={DesignImage} alt="Design"/>