Skip to content

Commit

Permalink
Merge pull request #25 from 001elijah/dashboard
Browse files Browse the repository at this point in the history 
Dashboard
  • Loading branch information
@001elijah
001elijah authored Jun 26, 2023
2 parents 9c7ae91 + 4ff2c41 commit c9bdefa
Show file tree
Hide file tree
Showing 22 changed files with 504 additions and 91 deletions.
19 changes: 17 additions & 2 deletions src/components/BoardItem/BoardItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,25 @@ import s from './BoardItem.module.scss';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import sprite from 'assets/icons/sprite.svg';
import { NavLink } from 'react-router-dom';

export const BoardItem = ({ boardName, icon, theme, onClick, isCurrent }) => {
export const BoardItem = ({
boardName,
icon,
theme,
onClick,
isCurrent,
id,
}) => {
return (
<li
onClick={onClick}
className={clsx(s.item, s[theme], isCurrent && s.current)}

>
<NavLink
to={`/home/${id}`}
className={clsx(s.item, s[theme], isCurrent && s.current)}
>
<div className={s.projectNameWrapper}>
<svg className={clsx(s.iconProject, s[theme])}>
<use href={icon}></use>
Expand All @@ -27,6 +39,8 @@ export const BoardItem = ({ boardName, icon, theme, onClick, isCurrent }) => {
</svg>
</li>
</ul>

</NavLink>
</li>
);
};
Expand All @@ -37,4 +51,5 @@ BoardItem.propTypes = {
theme: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired,
isCurrent: PropTypes.bool.isRequired,
id: PropTypes.string.isRequired,
};
4 changes: 3 additions & 1 deletion src/components/BoardList/BoardList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,15 @@ export const BoardList = ({ theme, boards }) => {

return (
<ul className={s.list}>
{boards.map(({ title, icon }) => (
{boards.map(({ title, icon, _id}) => (
<BoardItem
key={title}
id={_id}
boardName={title}
icon={`${sprite}#${icon}`}
theme={theme}
onClick={() => setCurrent(title)}
// onClick={getBoard(_id)}
isCurrent={current === title && true}
/>
))}
Expand Down
7 changes: 4 additions & 3 deletions src/components/BoardModalWindow/BoardModalWindow.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,16 @@ export const BoardModalWindow = ({
onClick,
handleToggleModal,
}) => {
const [Background, setBackground] = useState('dark');
const [background, setBackground] = useState('dark');
const [icon, setIcon] = useState('');

const handleAddBoard = value => {
const newCard = {
value,
icon,
Background,
background,
};
console.log(newCard);
console.log(onClick);
// onclick(dispatch(addNewCard());
};

Expand All @@ -33,6 +32,8 @@ export const BoardModalWindow = ({
onSubmit={handleAddBoard}
handleToggleModal={handleToggleModal}
onClick={onClick}
icon={icon}
background={background}
>
<BoxRadioIconGroup valueChange={setIcon} />
<BoxRadioBackgroundGroup valueChange={setBackground} />
Expand Down
32 changes: 16 additions & 16 deletions src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
className={s.radioInput1}
type="radio"
onChange={handleCheked}
value="one"
value="none"
name="background"
id="one"
checked={background === 'one'}
Expand All @@ -40,7 +40,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
className={s.radioInput2}
type="radio"
onChange={handleCheked}
value="two"
value="11.jpg"
name="background"
id="two"
checked={background === 'two'}
Expand All @@ -53,7 +53,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
className={s.radioInput3}
type="radio"
onChange={handleCheked}
value="three"
value="12.jpg"
name="background"
id="three"
checked={background === 'three'}
Expand All @@ -66,7 +66,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
className={s.radioInput4}
type="radio"
onChange={handleCheked}
value="four"
value="13.jpg"
name="background"
id="four"
checked={background === 'four'}
Expand All @@ -79,7 +79,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
className={s.radioInput5}
type="radio"
onChange={handleCheked}
value="five"
value="14.jpg"
name="background"
id="five"
checked={background === 'five'}
Expand All @@ -91,7 +91,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
className={s.radioInput6}
type="radio"
onChange={handleCheked}
value="six"
value="15.jpg"
name="background"
id="six"
checked={background === 'six'}
Expand All @@ -104,7 +104,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
className={s.radioInput7}
type="radio"
onChange={handleCheked}
value="seven"
value="16.jpg"
name="background"
id="seven"
checked={background === 'seven'}
Expand All @@ -116,7 +116,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
className={s.radioInput8}
type="radio"
onChange={handleCheked}
value="eight"
value="17.jpg"
name="background"
id="eight"
checked={background === 'eight'}
Expand All @@ -129,7 +129,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
className={s.radioInput9}
type="radio"
onChange={handleCheked}
value="nine"
value="18.jpg"
name="background"
id="nine"
checked={background === 'nine'}
Expand All @@ -141,7 +141,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
className={s.radioInput10}
type="radio"
onChange={handleCheked}
value="ten"
value="19.jpg"
name="background"
id="ten"
checked={background === 'ten'}
Expand All @@ -153,7 +153,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
className={s.radioInput11}
type="radio"
onChange={handleCheked}
value="eleven"
value="20.jpg"
name="background"
id="eleven"
checked={background === 'eleven'}
Expand All @@ -165,7 +165,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
className={s.radioInput12}
type="radio"
onChange={handleCheked}
value="twelve"
value="21.jpg"
name="background"
id="twelve"
checked={background === 'twelve'}
Expand All @@ -178,7 +178,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
className={s.radioInput13}
type="radio"
onChange={handleCheked}
value="thirteen"
value="22.jpg"
name="background"
id="thirteen"
checked={background === 'thirteen'}
Expand All @@ -190,7 +190,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
className={s.radioInput14}
type="radio"
onChange={handleCheked}
value="fourteen"
value="23.jpg"
name="background"
id="fourteen"
checked={background === 'fourteen'}
Expand All @@ -203,7 +203,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
type="radio"
onChange={handleCheked}
value="fifteen"
name="background"
name="24.jpg"
id="fifteen"
checked={background === 'fifteen'}
/>
Expand All @@ -214,7 +214,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
className={s.radioInput16}
type="radio"
onChange={handleCheked}
value="sixteen"
value="25.jpg"
name="background"
id="sixteen"
checked={background === 'sixteen'}
Expand Down
16 changes: 8 additions & 8 deletions src/components/BoxRadioIconGroup/BoxRadioIconGroup.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const BoxRadioIconGroup = ({ valueChange }) => {
name="rating"
className={s.inputIcon}
id="1"
value="super-1"
value="icon-project"
onChange={handleChange}
checked={icon === '1'}
/>
Expand All @@ -42,7 +42,7 @@ export const BoxRadioIconGroup = ({ valueChange }) => {
name="rating"
className={s.inputIcon}
id="2"
value="2"
value="icon-star"
onChange={handleChange}
checked={icon === '2'}
/>
Expand All @@ -58,7 +58,7 @@ export const BoxRadioIconGroup = ({ valueChange }) => {
name="rating"
className={s.inputIcon}
id="3"
value="3"
value="icon-loading"
onChange={handleChange}
checked={icon === '3'}
/>
Expand All @@ -74,7 +74,7 @@ export const BoxRadioIconGroup = ({ valueChange }) => {
name="rating"
className={s.inputIcon}
id="4"
value="4"
value="icon-puzzle-piece"
onChange={handleChange}
checked={icon === '4'}
/>
Expand All @@ -90,7 +90,7 @@ export const BoxRadioIconGroup = ({ valueChange }) => {
name="rating"
className={s.inputIcon}
id="5"
value="5"
value="icon-container"
onChange={handleChange}
checked={icon === '5'}
/>
Expand All @@ -106,7 +106,7 @@ export const BoxRadioIconGroup = ({ valueChange }) => {
name="rating"
className={s.inputIcon}
id="6"
value="6"
value="icon-lightning"
onChange={handleChange}
checked={icon === '6'}
/>
Expand All @@ -122,7 +122,7 @@ export const BoxRadioIconGroup = ({ valueChange }) => {
name="rating"
className={s.inputIcon}
id="7"
value="7"
value="icon-colors"
onChange={handleChange}
checked={icon === '7'}
/>
Expand All @@ -138,7 +138,7 @@ export const BoxRadioIconGroup = ({ valueChange }) => {
name="rating"
className={s.inputIcon}
id="8"
value="8"
value="icon-hexagon"
onChange={handleChange}
checked={icon === '8'}
/>
Expand Down
6 changes: 4 additions & 2 deletions src/components/ButtonAddColumn/ButtonAddColumn.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,13 @@ import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import clsx from 'clsx';

export const AddButton = ({ title, typeOfButton }) => {
export const AddButton = ({ title, typeOfButton, onClick}) => {
const theme = useSelector(selectorTheme);

return (
<>
<div className={clsx(s.Button, s[typeOfButton], s[theme])}>

<div className={clsx(s.Button, s[typeOfButton], s[theme])} onClick={onClick}>
<div className={clsx(s.BoxPlus, s[typeOfButton], s[theme])}>
<svg width="16" height="16" className={s.Svg}>
<use href={`${svg}#icon-${'plus'}`} />
Expand All @@ -25,4 +26,5 @@ export const AddButton = ({ title, typeOfButton }) => {
AddButton.propTypes = {
title: PropTypes.string,
typeOfButton: PropTypes.string,
onClick:PropTypes.func
};
1 change: 1 addition & 0 deletions src/components/ButtonAddColumn/ButtonAddColumn.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
width: 335px;
height: 56px;
border-radius: 8px;
cursor: pointer;
&.Column {
&.dark {
background: $black-color;
Expand Down
Loading

0 comments on commit c9bdefa

Please sign in to comment.