diff options
Diffstat (limited to 'public/projects/react-small-apps/apps/todos/src/components')
15 files changed, 443 insertions, 0 deletions
diff --git a/public/projects/react-small-apps/apps/todos/src/components/forms/Button/Button.js b/public/projects/react-small-apps/apps/todos/src/components/forms/Button/Button.js new file mode 100644 index 0000000..f9c7956 --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/forms/Button/Button.js @@ -0,0 +1,17 @@ +function Button({ children, modifiers, onClickHandler, type = "button" }) { + let classNames = "btn"; + + if (modifiers && modifiers.length > 0) { + for (let i = 0; i < modifiers.length; i++) { + classNames += ` btn--${modifiers[i]}`; + } + } + + return ( + <button type={type} className={classNames} onClick={onClickHandler}> + {children} + </button> + ); +} + +export default Button; diff --git a/public/projects/react-small-apps/apps/todos/src/components/forms/Fieldset/Fieldset.js b/public/projects/react-small-apps/apps/todos/src/components/forms/Fieldset/Fieldset.js new file mode 100644 index 0000000..53dafd4 --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/forms/Fieldset/Fieldset.js @@ -0,0 +1,10 @@ +function Fieldset({ children, legend }) { + return ( + <fieldset className="form__fieldset"> + <legend className="form__legend">{legend}</legend> + {children} + </fieldset> + ); +} + +export default Fieldset; diff --git a/public/projects/react-small-apps/apps/todos/src/components/forms/Form.scss b/public/projects/react-small-apps/apps/todos/src/components/forms/Form.scss new file mode 100644 index 0000000..1b07c07 --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/forms/Form.scss @@ -0,0 +1,163 @@ +@use "../../sass/abstracts/variables" as var; + +.form { + &__fieldset { + border: 2px solid var.$primary-color; + padding: 1rem 1rem 2rem; + width: max-content; + } + + &--login & { + &__fieldset { + margin: auto; + } + } + + &--todo { + margin-top: 1rem; + } +} + +.form__legend { + color: var.$primary-color; + font-size: 1.1rem; + font-weight: 600; + padding: 0 1rem; +} + +.form__label { + display: block; + margin-bottom: 0.5rem; + color: var.$primary-color-dark; + font-size: 0.9rem; + font-weight: 600; + letter-spacing: 1px; + text-transform: uppercase; + cursor: pointer; +} + +.form__field { + border: 2px solid var.$primary-color; + transition: all 0.3s ease-in-out 0s; + + &:not([type="checkbox"]) { + width: 100%; + padding: 0.5rem; + + &:focus { + box-shadow: 2px 2px 2px var.$shadow-color; + outline: none; + transform: translateY(-2px) translateX(-2px); + } + + & + * { + margin-top: 1rem; + } + } + + &--textarea { + min-height: 10rem; + min-width: 20rem; + } +} + +.btn { + display: block; + padding: clamp(0.5rem, 3vw, 0.8rem) clamp(0.5rem, 3vw, 1rem); + border: none; + border-radius: 3px; + font-weight: 600; + cursor: pointer; +} + +.btn--submit { + background: var.$primary-color; + color: hsl(0, 0%, 100%); + margin-left: auto; + margin-right: auto; + transition: all 0.3s ease-in-out 0s; + + &:hover { + background-color: var.$primary-color-light; + transform: scale(1.1); + } + + &:active { + background-color: var.$primary-color-dark; + transform: scale(1); + } +} + +.btn--user { + background: var.$secondary-color; + border: 2px solid var.$primary-color; + border-radius: 50%; + width: 5rem; + height: 5rem; + padding: 1rem; + + &:hover { + background: var.$secondary-color-light; + border-color: var.$primary-color-light; + } + + &:active { + background: var.$secondary-color-dark; + border-color: var.$primary-color-dark; + } +} + +.btn--action { + background-image: linear-gradient( + to left, + var.$background-color, + var.$background-color 50%, + var.$primary-color 50% + ); + background-size: 201% 100%; + background-position: 100% 0; + background-repeat: no-repeat; + border: 3px solid var.$primary-color; + border-radius: 6px; + color: var.$primary-color; + transition: all 0.3s ease-in-out 0s; + + &:hover { + background-position: 0 0; + color: var.$foreground-color-alt; + } + + &:active { + background-position: 100% 0; + color: var.$primary-color-dark; + text-decoration: underline 1px; + } +} + +.btn--delete { + background-image: linear-gradient( + to left, + var.$background-color, + var.$background-color 50%, + var.$delete-color 50% + ); + border-color: var.$delete-color; + color: var.$delete-color; + + &:hover { + color: var.$foreground-color-alt; + } + + &:active { + color: var.$delete-color; + } +} + +.btn--filters { + background: var.$background-color; + border: 1px solid #666; + + &.btn--current { + background: #ededed; + } +} diff --git a/public/projects/react-small-apps/apps/todos/src/components/forms/Input/Input.js b/public/projects/react-small-apps/apps/todos/src/components/forms/Input/Input.js new file mode 100644 index 0000000..86e660c --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/forms/Input/Input.js @@ -0,0 +1,39 @@ +function Input({ + label, + id, + name, + value, + updateValue, + onBlurHandler, + required, + type = "text", +}) { + const handleChange = (e) => { + e.target.type === "checkbox" + ? updateValue(e.target.checked) + : updateValue(e.target.value); + }; + + return ( + <> + {label && ( + <label htmlFor={id} className="form__label"> + {label} + </label> + )} + <input + type={type} + id={id} + name={name} + value={type === "checkbox" ? undefined : value} + checked={type === "checkbox" ? value : null} + required={required ? "required" : false} + onChange={handleChange} + onBlur={onBlurHandler} + className="form__field" + /> + </> + ); +} + +export default Input; diff --git a/public/projects/react-small-apps/apps/todos/src/components/forms/TextArea/TextArea.js b/public/projects/react-small-apps/apps/todos/src/components/forms/TextArea/TextArea.js new file mode 100644 index 0000000..78a10b6 --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/forms/TextArea/TextArea.js @@ -0,0 +1,24 @@ +function TextArea({ label, id, value, updateValue }) { + const handleChange = (e) => { + updateValue(e.target.value); + }; + + return ( + <> + {label ? ( + <label htmlFor={id} className="form__label"> + {label} + </label> + ) : ( + "" + )} + <textarea + value={value} + onChange={handleChange} + className="form__field form__field--textarea" + /> + </> + ); +} + +export default TextArea; diff --git a/public/projects/react-small-apps/apps/todos/src/components/forms/index.js b/public/projects/react-small-apps/apps/todos/src/components/forms/index.js new file mode 100644 index 0000000..76cc2c4 --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/forms/index.js @@ -0,0 +1,7 @@ +import Button from "./Button/Button"; +import Fieldset from "./Fieldset/Fieldset"; +import Input from "./Input/Input"; +import TextArea from "./TextArea/TextArea"; +import "./Form.scss"; + +export { Button, Fieldset, Input, TextArea }; diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/Footer/Footer.js b/public/projects/react-small-apps/apps/todos/src/components/layout/Footer/Footer.js new file mode 100644 index 0000000..8e5dc73 --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/layout/Footer/Footer.js @@ -0,0 +1,15 @@ +import "./Footer.scss"; + +function Footer() { + return ( + <footer className="footer"> + <div className="container"> + <p className="copyright"> + React Redux ToDos. MIT 2021. Armand Philippot. + </p> + </div> + </footer> + ); +} + +export default Footer; diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/Footer/Footer.scss b/public/projects/react-small-apps/apps/todos/src/components/layout/Footer/Footer.scss new file mode 100644 index 0000000..eb34fd9 --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/layout/Footer/Footer.scss @@ -0,0 +1,8 @@ +.footer { + text-align: center; + padding: 1rem 0; +} + +.copyright { + font-size: 0.9rem; +} diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.js b/public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.js new file mode 100644 index 0000000..75ecf8b --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.js @@ -0,0 +1,39 @@ +import { useSelector } from "react-redux"; +import UserOptions from "./UserOptions/UserOptions"; +import "./Header.scss"; +import { useEffect, useRef, useState } from "react"; +import { useLocation } from "react-router"; + +function Header() { + const [isExpanded, setIsExpanded] = useState(false); + const currentUser = useSelector((state) => state.auth.currentUser); + const headerRef = useRef(null); + const location = useLocation(); + + useEffect(() => { + setIsExpanded(false); + }, [location.pathname]); + + const closeModal = (e) => { + if (!headerRef.current.contains(e.relatedTarget)) setIsExpanded(false); + }; + + return ( + <header ref={headerRef} className="header" onBlur={closeModal}> + <div className="container"> + <h1 className="branding">ToDos App</h1> + {currentUser ? ( + <UserOptions + username={currentUser.username} + isExpanded={isExpanded} + setIsExpanded={setIsExpanded} + /> + ) : ( + "" + )} + </div> + </header> + ); +} + +export default Header; diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.scss b/public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.scss new file mode 100644 index 0000000..e1b0b27 --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.scss @@ -0,0 +1,18 @@ +@use "../../../sass/abstracts/variables" as var; + +.header { + border-bottom: 1px solid var.$primary-color; + + .container { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-between; + padding: 1rem 0; + position: relative; + } +} + +.branding { + color: var.$primary-color; +} diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/Header/UserOptions/UserOptions.js b/public/projects/react-small-apps/apps/todos/src/components/layout/Header/UserOptions/UserOptions.js new file mode 100644 index 0000000..92e8687 --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/layout/Header/UserOptions/UserOptions.js @@ -0,0 +1,38 @@ +import { Link } from "react-router-dom"; +import { Button } from "../../../forms"; +import "./UserOptions.scss"; + +function UserOptions({ username, isExpanded, setIsExpanded }) { + const displayUserOptions = () => { + return ( + <nav className="nav nav--user"> + <ul className="nav__list"> + <li className="nav__item"> + <Link to="/account" className="nav__link"> + Account + </Link> + </li> + <li className="nav__item"> + <Link to="/logout" className="nav__link"> + Logout + </Link> + </li> + </ul> + </nav> + ); + }; + + return ( + <> + <Button + modifiers={["user"]} + onClickHandler={() => setIsExpanded(!isExpanded)} + > + {username} + </Button> + {isExpanded ? displayUserOptions() : ""} + </> + ); +} + +export default UserOptions; diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/Header/UserOptions/UserOptions.scss b/public/projects/react-small-apps/apps/todos/src/components/layout/Header/UserOptions/UserOptions.scss new file mode 100644 index 0000000..bb98c6a --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/layout/Header/UserOptions/UserOptions.scss @@ -0,0 +1,50 @@ +@use "../../../../sass/abstracts/mixins" as mix; +@use "../../../../sass/abstracts/placeholders"; +@use "../../../../sass/abstracts/variables" as var; + +.nav { + &__list { + @extend %list-reset; + } + + &--user { + border: 1px solid var.$primary-color; + box-shadow: 0 2px 3px 0 var.$shadow-color; + position: absolute; + top: 100%; + right: 0; + + &::before { + content: ""; + display: block; + position: absolute; + top: -1.15rem; + left: calc(50% - 1.15rem / 2); + @include mix.triangle(1.2rem, var.$primary-color, up); + } + + &::after { + content: ""; + display: block; + position: absolute; + top: -1rem; + left: calc(50% - 1rem / 2); + @include mix.triangle(1rem, var.$background-color, up); + } + } + + &--user & { + &__link { + display: block; + padding: 0.5rem 1rem; + background: var.$background-color; + + &:focus { + background: var.$primary-color; + color: var.$foreground-color-alt; + outline: none; + transition: none; + } + } + } +} diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/Main/Main.js b/public/projects/react-small-apps/apps/todos/src/components/layout/Main/Main.js new file mode 100644 index 0000000..7a9cb2d --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/layout/Main/Main.js @@ -0,0 +1,7 @@ +import "./Main.scss"; + +function Main({ children }) { + return <main className="main container">{children}</main>; +} + +export default Main; diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/Main/Main.scss b/public/projects/react-small-apps/apps/todos/src/components/layout/Main/Main.scss new file mode 100644 index 0000000..42c950f --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/layout/Main/Main.scss @@ -0,0 +1,3 @@ +.main { + padding: 3rem 0; +} diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/index.js b/public/projects/react-small-apps/apps/todos/src/components/layout/index.js new file mode 100644 index 0000000..1e1af4c --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/layout/index.js @@ -0,0 +1,5 @@ +import Footer from "./Footer/Footer"; +import Header from "./Header/Header"; +import Main from "./Main/Main"; + +export { Footer, Header, Main }; |