mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-16 09:41:31 +10:00
- run eslint --fix across project
This commit is contained in:
@ -1,14 +1,14 @@
|
||||
import React, { useContext } from "react";
|
||||
import { Helmet } from "react-helmet";
|
||||
import { useSelector } from "../../../contexts/ResumeContext";
|
||||
import TemplateContext from "../../../contexts/TemplateContext";
|
||||
import Onyx from "../../../templates/Onyx";
|
||||
import styles from "./Artboard.module.css";
|
||||
import React, { useContext } from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { useSelector } from '../../../contexts/ResumeContext';
|
||||
import TemplateContext from '../../../contexts/TemplateContext';
|
||||
import Onyx from '../../../templates/Onyx';
|
||||
import styles from './Artboard.module.css';
|
||||
|
||||
const Artboard = () => {
|
||||
const { blocks, colors } = useContext(TemplateContext);
|
||||
const state = useSelector((state) => state),
|
||||
{ id, name } = state;
|
||||
const state = useSelector((s) => s);
|
||||
const { id, name } = state;
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
@ -1,31 +1,29 @@
|
||||
import { Link } from "gatsby";
|
||||
import React from "react";
|
||||
import sections from "../../../data/leftSections";
|
||||
import Avatar from "../../shared/Avatar";
|
||||
import Logo from "../../shared/Logo";
|
||||
import SectionIcon from "../../shared/SectionIcon";
|
||||
import styles from "./LeftNavbar.module.css";
|
||||
import { Link } from 'gatsby';
|
||||
import React from 'react';
|
||||
import sections from '../../../data/leftSections';
|
||||
import Avatar from '../../shared/Avatar';
|
||||
import Logo from '../../shared/Logo';
|
||||
import SectionIcon from '../../shared/SectionIcon';
|
||||
import styles from './LeftNavbar.module.css';
|
||||
|
||||
const LeftNavbar = () => {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Link to="/app/dashboard">
|
||||
<Logo size="40px" />
|
||||
</Link>
|
||||
const LeftNavbar = () => (
|
||||
<div className={styles.container}>
|
||||
<Link to="/app/dashboard">
|
||||
<Logo size="40px" />
|
||||
</Link>
|
||||
|
||||
<hr className="my-6" />
|
||||
<hr className="my-6" />
|
||||
|
||||
<div className="grid grid-cols-1 gap-8">
|
||||
{sections.map((x) => (
|
||||
<SectionIcon key={x.id} section={x} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<hr className="mt-auto my-6" />
|
||||
|
||||
<Avatar />
|
||||
<div className="grid grid-cols-1 gap-8">
|
||||
{sections.map((x) => (
|
||||
<SectionIcon key={x.id} section={x} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
<hr className="mt-auto my-6" />
|
||||
|
||||
<Avatar />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default LeftNavbar;
|
||||
|
||||
@ -1,23 +1,21 @@
|
||||
import React, { Fragment } from "react";
|
||||
import sections from "../../../data/leftSections";
|
||||
import LeftNavbar from "./LeftNavbar";
|
||||
import styles from "./LeftSidebar.module.css";
|
||||
import React, { Fragment } from 'react';
|
||||
import sections from '../../../data/leftSections';
|
||||
import LeftNavbar from './LeftNavbar';
|
||||
import styles from './LeftSidebar.module.css';
|
||||
|
||||
const LeftSidebar = () => {
|
||||
return (
|
||||
<div className="flex">
|
||||
<LeftNavbar />
|
||||
const LeftSidebar = () => (
|
||||
<div className="flex">
|
||||
<LeftNavbar />
|
||||
|
||||
<div className={styles.container}>
|
||||
{sections.map(({ id, name, event, component: Component }) => (
|
||||
<Fragment key={id}>
|
||||
<Component id={id} name={name} event={event} />
|
||||
<hr />
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
<div className={styles.container}>
|
||||
{sections.map(({ id, name, event, component: Component }) => (
|
||||
<Fragment key={id}>
|
||||
<Component id={id} name={name} event={event} />
|
||||
<hr />
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</div>
|
||||
);
|
||||
|
||||
export default LeftSidebar;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React from 'react';
|
||||
|
||||
const EmptyList = () => (
|
||||
<div className="py-6 opacity-75 text-center">This list is empty.</div>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import { get, isEmpty } from "lodash";
|
||||
import moment from "moment";
|
||||
import React, { useContext } from "react";
|
||||
import { MdAdd } from "react-icons/md";
|
||||
import ModalContext from "../../../contexts/ModalContext";
|
||||
import { useSelector } from "../../../contexts/ResumeContext";
|
||||
import Button from "../../shared/Button";
|
||||
import EmptyList from "./EmptyList";
|
||||
import styles from "./List.module.css";
|
||||
import ListItem from "./ListItem";
|
||||
import { get, isEmpty } from 'lodash';
|
||||
import moment from 'moment';
|
||||
import React, { useContext } from 'react';
|
||||
import { MdAdd } from 'react-icons/md';
|
||||
import ModalContext from '../../../contexts/ModalContext';
|
||||
import { useSelector } from '../../../contexts/ResumeContext';
|
||||
import Button from '../../shared/Button';
|
||||
import EmptyList from './EmptyList';
|
||||
import styles from './List.module.css';
|
||||
import ListItem from './ListItem';
|
||||
|
||||
const List = ({
|
||||
path,
|
||||
@ -27,10 +27,10 @@ const List = ({
|
||||
const handleEdit = (data) => emitter.emit(event, data);
|
||||
|
||||
const formatDateRange = (x) =>
|
||||
`${moment(x.startDate).format("MMMM Y")} — ${
|
||||
`${moment(x.startDate).format('MMMM Y')} — ${
|
||||
moment(x.endDate).isValid()
|
||||
? moment(x.endDate).format("MMMM Y")
|
||||
: "Present"
|
||||
? moment(x.endDate).format('MMMM Y')
|
||||
: 'Present'
|
||||
}`;
|
||||
|
||||
return (
|
||||
@ -44,11 +44,11 @@ const List = ({
|
||||
key={x.id}
|
||||
data={x}
|
||||
path={path}
|
||||
title={title || get(x, titlePath, "")}
|
||||
title={title || get(x, titlePath, '')}
|
||||
subtitle={
|
||||
subtitle || get(x, subtitlePath, "") || formatDateRange(x)
|
||||
subtitle || get(x, subtitlePath, '') || formatDateRange(x)
|
||||
}
|
||||
text={text || get(x, textPath, "")}
|
||||
text={text || get(x, textPath, '')}
|
||||
className={styles.listItem}
|
||||
onEdit={() => handleEdit(x)}
|
||||
isFirst={i === 0}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { Menu, MenuItem } from "@material-ui/core";
|
||||
import React, { useState } from "react";
|
||||
import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io";
|
||||
import { MdMoreVert } from "react-icons/md";
|
||||
import { useDispatch } from "../../../contexts/ResumeContext";
|
||||
import styles from "./ListItem.module.css";
|
||||
import { Menu, MenuItem } from '@material-ui/core';
|
||||
import React, { useState } from 'react';
|
||||
import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
|
||||
import { MdMoreVert } from 'react-icons/md';
|
||||
import { useDispatch } from '../../../contexts/ResumeContext';
|
||||
import styles from './ListItem.module.css';
|
||||
|
||||
const ListItem = ({
|
||||
title,
|
||||
@ -29,7 +29,7 @@ const ListItem = ({
|
||||
|
||||
const handleMoveUp = () => {
|
||||
dispatch({
|
||||
type: "on_move_item_up",
|
||||
type: 'on_move_item_up',
|
||||
payload: {
|
||||
path,
|
||||
value: data,
|
||||
@ -41,7 +41,7 @@ const ListItem = ({
|
||||
|
||||
const handleMoveDown = () => {
|
||||
dispatch({
|
||||
type: "on_move_item_down",
|
||||
type: 'on_move_item_down',
|
||||
payload: {
|
||||
path,
|
||||
value: data,
|
||||
@ -53,7 +53,7 @@ const ListItem = ({
|
||||
|
||||
const handleDelete = () => {
|
||||
dispatch({
|
||||
type: "on_delete_item",
|
||||
type: 'on_delete_item',
|
||||
payload: {
|
||||
path,
|
||||
value: data,
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
import cx from "classnames";
|
||||
import React, { useContext } from "react";
|
||||
import { MdPerson, MdSync, MdSyncDisabled } from "react-icons/md";
|
||||
import DatabaseContext from "../../../contexts/DatabaseContext";
|
||||
import styles from "./RightNavbar.module.css";
|
||||
import React from 'react';
|
||||
import { MdPerson } from 'react-icons/md';
|
||||
import styles from './RightNavbar.module.css';
|
||||
import SyncIndicator from './SyncIndicator';
|
||||
|
||||
const RightNavbar = () => {
|
||||
const { isOffline, isUpdating } = useContext(DatabaseContext);
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
@ -16,13 +13,9 @@ const RightNavbar = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-4xl mt-auto">
|
||||
{isOffline ? (
|
||||
<MdSyncDisabled className="text-red-600" />
|
||||
) : (
|
||||
<MdSync className={cx({ spin: isUpdating })} />
|
||||
)}
|
||||
</div>
|
||||
<hr className="mt-auto my-6" />
|
||||
|
||||
<SyncIndicator />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import Layout from "../sections/Layout";
|
||||
import RightNavbar from "./RightNavbar";
|
||||
import styles from "./RightSidebar.module.css";
|
||||
import React from 'react';
|
||||
import Layout from '../sections/Layout';
|
||||
import RightNavbar from './RightNavbar';
|
||||
import styles from './RightSidebar.module.css';
|
||||
|
||||
const RightSidebar = () => {
|
||||
return (
|
||||
|
||||
20
src/components/builder/right/SyncIndicator.js
Normal file
20
src/components/builder/right/SyncIndicator.js
Normal file
@ -0,0 +1,20 @@
|
||||
import cx from 'classnames';
|
||||
import React, { useContext } from 'react';
|
||||
import { MdSync, MdSyncDisabled } from 'react-icons/md';
|
||||
import DatabaseContext from '../../../contexts/DatabaseContext';
|
||||
|
||||
const SyncIndicator = () => {
|
||||
const { isOffline, isUpdating } = useContext(DatabaseContext);
|
||||
|
||||
return (
|
||||
<div className="text-4xl">
|
||||
{isOffline ? (
|
||||
<MdSyncDisabled className="text-red-600" />
|
||||
) : (
|
||||
<MdSync className={cx({ spin: isUpdating })} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyncIndicator;
|
||||
@ -1,8 +1,8 @@
|
||||
import React from "react";
|
||||
import Heading from "../../shared/Heading";
|
||||
import List from "../lists/List";
|
||||
import React from 'react';
|
||||
import Heading from '../../shared/Heading';
|
||||
import List from '../lists/List';
|
||||
|
||||
const Awards = ({ id, name, event, state }) => {
|
||||
const Awards = ({ id, name, event }) => {
|
||||
const path = `${id}.items`;
|
||||
|
||||
return (
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from "react";
|
||||
import Heading from "../../shared/Heading";
|
||||
import List from "../lists/List";
|
||||
import React from 'react';
|
||||
import Heading from '../../shared/Heading';
|
||||
import List from '../lists/List';
|
||||
|
||||
const Certifications = ({ id, name, event, state }) => {
|
||||
const Certifications = ({ id, name, event }) => {
|
||||
const path = `${id}.items`;
|
||||
|
||||
return (
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from "react";
|
||||
import Heading from "../../shared/Heading";
|
||||
import List from "../lists/List";
|
||||
import React from 'react';
|
||||
import Heading from '../../shared/Heading';
|
||||
import List from '../lists/List';
|
||||
|
||||
const Education = ({ id, name, event, state }) => {
|
||||
const Education = ({ id, name, event }) => {
|
||||
const path = `${id}.items`;
|
||||
|
||||
return (
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React, { useContext } from "react";
|
||||
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
|
||||
import TemplateContext from "../../../contexts/TemplateContext";
|
||||
import Heading from "../../shared/Heading";
|
||||
import styles from "./Layout.module.css";
|
||||
import React, { useContext } from 'react';
|
||||
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
|
||||
import TemplateContext from '../../../contexts/TemplateContext';
|
||||
import Heading from '../../shared/Heading';
|
||||
import styles from './Layout.module.css';
|
||||
|
||||
const Layout = () => {
|
||||
const { blocks, onDragEnd } = useContext(TemplateContext);
|
||||
@ -20,11 +20,11 @@ const Layout = () => {
|
||||
<DragDropContext onDragEnd={onDragEnd}>
|
||||
{blocks.map((el, ind) => (
|
||||
<Droppable key={ind} droppableId={`${ind}`}>
|
||||
{(provided) => (
|
||||
{(dropProvided) => (
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
ref={dropProvided.innerRef}
|
||||
className={styles.droppable}
|
||||
{...provided.droppableProps}
|
||||
{...dropProvided.droppableProps}
|
||||
>
|
||||
<div className="grid gap-3">
|
||||
<span className="uppercase font-semibold text-xs">
|
||||
@ -36,12 +36,12 @@ const Layout = () => {
|
||||
draggableId={item.id}
|
||||
index={index}
|
||||
>
|
||||
{(provided) => (
|
||||
{(dragProvided) => (
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
ref={dragProvided.innerRef}
|
||||
className={styles.draggable}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
{...dragProvided.draggableProps}
|
||||
{...dragProvided.dragHandleProps}
|
||||
>
|
||||
{item.name}
|
||||
</div>
|
||||
@ -49,7 +49,7 @@ const Layout = () => {
|
||||
</Draggable>
|
||||
))}
|
||||
</div>
|
||||
{provided.placeholder}
|
||||
{dropProvided.placeholder}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import Heading from "../../shared/Heading";
|
||||
import Input from "../../shared/Input";
|
||||
import React from 'react';
|
||||
import Heading from '../../shared/Heading';
|
||||
import Input from '../../shared/Input';
|
||||
|
||||
const Objective = () => {
|
||||
return (
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import Heading from "../../shared/Heading";
|
||||
import Input from "../../shared/Input";
|
||||
import PhotoUpload from "../../shared/PhotoUpload";
|
||||
import React from 'react';
|
||||
import Heading from '../../shared/Heading';
|
||||
import Input from '../../shared/Input';
|
||||
import PhotoUpload from '../../shared/PhotoUpload';
|
||||
|
||||
const Profile = () => {
|
||||
return (
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import Heading from "../../shared/Heading";
|
||||
import List from "../lists/List";
|
||||
import React from 'react';
|
||||
import Heading from '../../shared/Heading';
|
||||
import List from '../lists/List';
|
||||
|
||||
const Skills = ({ id, name, event }) => {
|
||||
const path = `${id}.items`;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import Heading from "../../shared/Heading";
|
||||
import List from "../lists/List";
|
||||
import React from 'react';
|
||||
import Heading from '../../shared/Heading';
|
||||
import List from '../lists/List';
|
||||
|
||||
const Social = ({ id, name, event }) => {
|
||||
const path = `${id}.items`;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from "react";
|
||||
import Heading from "../../shared/Heading";
|
||||
import List from "../lists/List";
|
||||
import React from 'react';
|
||||
import Heading from '../../shared/Heading';
|
||||
import List from '../lists/List';
|
||||
|
||||
const Work = ({ id, name, event, state }) => {
|
||||
const Work = ({ id, name, event }) => {
|
||||
const path = `${id}.items`;
|
||||
|
||||
return (
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React, { useContext } from "react";
|
||||
import { MdAdd } from "react-icons/md";
|
||||
import ModalContext from "../../contexts/ModalContext";
|
||||
import { handleKeyDown } from "../../utils";
|
||||
import styles from "./CreateResume.module.css";
|
||||
import React, { useContext } from 'react';
|
||||
import { MdAdd } from 'react-icons/md';
|
||||
import ModalContext from '../../contexts/ModalContext';
|
||||
import { handleKeyDown } from '../../utils';
|
||||
import styles from './CreateResume.module.css';
|
||||
|
||||
const CreateResume = () => {
|
||||
const { emitter, events } = useContext(ModalContext);
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { Menu, MenuItem } from "@material-ui/core";
|
||||
import { navigate } from "gatsby";
|
||||
import moment from "moment";
|
||||
import React, { useContext, useState } from "react";
|
||||
import { MdMoreHoriz, MdOpenInNew } from "react-icons/md";
|
||||
import { toast } from "react-toastify";
|
||||
import DatabaseContext from "../../contexts/DatabaseContext";
|
||||
import ModalContext from "../../contexts/ModalContext";
|
||||
import styles from "./ResumePreview.module.css";
|
||||
import { Menu, MenuItem } from '@material-ui/core';
|
||||
import { navigate } from 'gatsby';
|
||||
import moment from 'moment';
|
||||
import React, { useContext, useState } from 'react';
|
||||
import { MdMoreHoriz, MdOpenInNew } from 'react-icons/md';
|
||||
import { toast } from 'react-toastify';
|
||||
import DatabaseContext from '../../contexts/DatabaseContext';
|
||||
import ModalContext from '../../contexts/ModalContext';
|
||||
import styles from './ResumePreview.module.css';
|
||||
|
||||
const ResumePreview = ({ resume }) => {
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
import { Link, navigate } from "gatsby";
|
||||
import React, { useContext } from "react";
|
||||
import UserContext from "../../contexts/UserContext";
|
||||
import Avatar from "../shared/Avatar";
|
||||
import Logo from "../shared/Logo";
|
||||
import styles from "./TopNavbar.module.css";
|
||||
import { Link, navigate } from 'gatsby';
|
||||
import React, { useContext } from 'react';
|
||||
import UserContext from '../../contexts/UserContext';
|
||||
import Avatar from '../shared/Avatar';
|
||||
import Logo from '../shared/Logo';
|
||||
import styles from './TopNavbar.module.css';
|
||||
|
||||
const TopNavbar = () => {
|
||||
const { logout } = useContext(UserContext);
|
||||
|
||||
const handleLogout = async () => {
|
||||
await logout();
|
||||
navigate("/");
|
||||
navigate('/');
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { navigate } from "gatsby";
|
||||
import React, { useContext } from "react";
|
||||
import { FaGithub } from "react-icons/fa";
|
||||
import ModalContext from "../../contexts/ModalContext";
|
||||
import ThemeContext from "../../contexts/ThemeContext";
|
||||
import UserContext from "../../contexts/UserContext";
|
||||
import Button from "../shared/Button";
|
||||
import Logo from "../shared/Logo";
|
||||
import { navigate } from 'gatsby';
|
||||
import React, { useContext } from 'react';
|
||||
import { FaGithub } from 'react-icons/fa';
|
||||
import ModalContext from '../../contexts/ModalContext';
|
||||
import ThemeContext from '../../contexts/ThemeContext';
|
||||
import UserContext from '../../contexts/UserContext';
|
||||
import Button from '../shared/Button';
|
||||
import Logo from '../shared/Logo';
|
||||
|
||||
const Hero = () => {
|
||||
const { emitter, events } = useContext(ModalContext);
|
||||
@ -14,7 +14,7 @@ const Hero = () => {
|
||||
|
||||
const handleLogin = () => emitter.emit(events.AUTH_MODAL);
|
||||
|
||||
const handleGotoApp = () => navigate("/app/dashboard");
|
||||
const handleGotoApp = () => navigate('/app/dashboard');
|
||||
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Fade, Modal } from "@material-ui/core";
|
||||
import React from "react";
|
||||
import { getRandomTip } from "../../data/tips";
|
||||
import Logo from "../shared/Logo";
|
||||
import { Fade, Modal } from '@material-ui/core';
|
||||
import React from 'react';
|
||||
import { getRandomTip } from '../../data/tips';
|
||||
import Logo from '../shared/Logo';
|
||||
|
||||
const LoadingScreen = () => {
|
||||
return (
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { navigate } from "gatsby";
|
||||
import React, { useContext } from "react";
|
||||
import UserContext from "../../contexts/UserContext";
|
||||
import LoadingScreen from "./LoadingScreen";
|
||||
import { navigate } from 'gatsby';
|
||||
import React, { useContext } from 'react';
|
||||
import UserContext from '../../contexts/UserContext';
|
||||
import LoadingScreen from './LoadingScreen';
|
||||
|
||||
const PrivateRoute = ({ component: Component, location, ...props }) => {
|
||||
const { user, loading } = useContext(UserContext);
|
||||
@ -11,7 +11,7 @@ const PrivateRoute = ({ component: Component, location, ...props }) => {
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
navigate("/");
|
||||
navigate('/');
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import cx from "classnames";
|
||||
import { toUrl } from "gatsby-source-gravatar";
|
||||
import React, { useContext, useMemo } from "react";
|
||||
import UserContext from "../../contexts/UserContext";
|
||||
import styles from "./Avatar.module.css";
|
||||
import cx from 'classnames';
|
||||
import { toUrl } from 'gatsby-source-gravatar';
|
||||
import React, { useContext, useMemo } from 'react';
|
||||
import UserContext from '../../contexts/UserContext';
|
||||
import styles from './Avatar.module.css';
|
||||
|
||||
const Avatar = ({ className }) => {
|
||||
const { user } = useContext(UserContext);
|
||||
|
||||
const photoURL = useMemo(() => toUrl(user.email, "size=128"), [user.email]);
|
||||
const photoURL = useMemo(() => toUrl(user.email, 'size=128'), [user.email]);
|
||||
|
||||
return (
|
||||
<img
|
||||
|
||||
@ -1,17 +1,9 @@
|
||||
import classNames from "classnames";
|
||||
import React from "react";
|
||||
import { handleKeyDown } from "../../utils";
|
||||
import styles from "./Button.module.css";
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import { handleKeyDown } from '../../utils';
|
||||
import styles from './Button.module.css';
|
||||
|
||||
const Button = ({
|
||||
icon,
|
||||
title,
|
||||
onClick,
|
||||
outline,
|
||||
className,
|
||||
isLoading,
|
||||
type = "button",
|
||||
}) => {
|
||||
const Button = ({ icon, title, onClick, outline, className, isLoading }) => {
|
||||
const Icon = icon;
|
||||
const classes = classNames(styles.container, className, {
|
||||
[styles.outline]: outline,
|
||||
@ -19,13 +11,12 @@ const Button = ({
|
||||
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
className={classes}
|
||||
onKeyDown={(e) => handleKeyDown(e, onClick)}
|
||||
onClick={isLoading ? undefined : onClick}
|
||||
>
|
||||
{icon && <Icon size="14" className="mr-2" />}
|
||||
{isLoading ? "Loading..." : title}
|
||||
{isLoading ? 'Loading...' : title}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React from 'react';
|
||||
|
||||
const Heading = ({ children }) => {
|
||||
return <h2 className="text-4xl">{children}</h2>;
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import cx from "classnames";
|
||||
import { get, isFunction } from "lodash";
|
||||
import React, { useMemo } from "react";
|
||||
import { MdClose } from "react-icons/md";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { useDispatch, useSelector } from "../../contexts/ResumeContext";
|
||||
import { handleKeyDown } from "../../utils";
|
||||
import styles from "./Input.module.css";
|
||||
import cx from 'classnames';
|
||||
import { get, isFunction } from 'lodash';
|
||||
import React from 'react';
|
||||
import { MdClose } from 'react-icons/md';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { useDispatch, useSelector } from '../../contexts/ResumeContext';
|
||||
import { handleKeyDown } from '../../utils';
|
||||
import styles from './Input.module.css';
|
||||
|
||||
const Input = ({
|
||||
name,
|
||||
@ -22,7 +22,7 @@ const Input = ({
|
||||
placeholder,
|
||||
onDeleteItem,
|
||||
showDeleteItemButton,
|
||||
type = "text",
|
||||
type = 'text',
|
||||
}) => {
|
||||
const uuid = uuidv4();
|
||||
const stateValue = useSelector((state) => get(state, path));
|
||||
@ -33,7 +33,7 @@ const Input = ({
|
||||
? onChange
|
||||
: (e) => {
|
||||
dispatch({
|
||||
type: "on_input",
|
||||
type: 'on_input',
|
||||
payload: {
|
||||
path,
|
||||
value: e.target.value,
|
||||
@ -41,93 +41,72 @@ const Input = ({
|
||||
});
|
||||
};
|
||||
|
||||
return useMemo(
|
||||
() => (
|
||||
<div className={cx(styles.container, className)}>
|
||||
<label htmlFor={uuid}>
|
||||
<span>
|
||||
{label}{" "}
|
||||
{isRequired && (
|
||||
<span className="opacity-75 font-normal lowercase">
|
||||
(Required)
|
||||
</span>
|
||||
return (
|
||||
<div className={cx(styles.container, className)}>
|
||||
<label htmlFor={uuid}>
|
||||
<span>
|
||||
{label}{' '}
|
||||
{isRequired && (
|
||||
<span className="opacity-75 font-normal lowercase">(Required)</span>
|
||||
)}
|
||||
</span>
|
||||
|
||||
{type === 'text' && (
|
||||
<div className="relative grid items-center">
|
||||
<input
|
||||
id={uuid}
|
||||
name={name}
|
||||
type={type}
|
||||
value={value}
|
||||
onBlur={onBlur}
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
|
||||
{showDeleteItemButton && isFunction(onDeleteItem) && (
|
||||
<MdClose
|
||||
size="16px"
|
||||
tabIndex="0"
|
||||
onClick={onDeleteItem}
|
||||
onKeyDown={(e) => handleKeyDown(e, onDeleteItem)}
|
||||
className="absolute right-0 cursor-pointer opacity-50 hover:opacity-75 mx-4"
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{type === "text" && (
|
||||
<div className="relative grid items-center">
|
||||
<input
|
||||
id={uuid}
|
||||
name={name}
|
||||
type={type}
|
||||
value={value}
|
||||
onBlur={onBlur}
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
{type === 'textarea' && (
|
||||
<div className="flex flex-col">
|
||||
<textarea
|
||||
id={uuid}
|
||||
rows="4"
|
||||
name={name}
|
||||
type={type}
|
||||
value={value}
|
||||
onBlur={onBlur}
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
|
||||
{showDeleteItemButton && isFunction(onDeleteItem) && (
|
||||
<MdClose
|
||||
size="16px"
|
||||
tabIndex="0"
|
||||
onClick={onDeleteItem}
|
||||
onKeyDown={(e) => handleKeyDown(e, onDeleteItem)}
|
||||
className="absolute right-0 cursor-pointer opacity-50 hover:opacity-75 mx-4"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<p className="mt-2 text-sm opacity-75">
|
||||
This text block supports{' '}
|
||||
<a
|
||||
href="https://www.markdownguide.org/basic-syntax/"
|
||||
className="text-blue-600"
|
||||
target="blank"
|
||||
>
|
||||
markdown
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{type === "textarea" && (
|
||||
<div className="flex flex-col">
|
||||
<textarea
|
||||
id={uuid}
|
||||
rows="4"
|
||||
name={name}
|
||||
type={type}
|
||||
value={value}
|
||||
onBlur={onBlur}
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
|
||||
<p className="mt-2 text-sm opacity-75">
|
||||
This text block supports{" "}
|
||||
<a
|
||||
href="https://www.markdownguide.org/basic-syntax/"
|
||||
className="text-blue-600"
|
||||
target="blank"
|
||||
>
|
||||
markdown
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && touched && <p>{error}</p>}
|
||||
</label>
|
||||
</div>
|
||||
),
|
||||
[
|
||||
checked,
|
||||
className,
|
||||
error,
|
||||
isRequired,
|
||||
label,
|
||||
name,
|
||||
onBlur,
|
||||
onChange,
|
||||
onDeleteItem,
|
||||
placeholder,
|
||||
showDeleteItemButton,
|
||||
touched,
|
||||
type,
|
||||
uuid,
|
||||
value,
|
||||
]
|
||||
{error && touched && <p>{error}</p>}
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import cx from "classnames";
|
||||
import { graphql, useStaticQuery } from "gatsby";
|
||||
import GatsbyImage from "gatsby-image";
|
||||
import React from "react";
|
||||
import styles from "./Logo.module.css";
|
||||
import cx from 'classnames';
|
||||
import { graphql, useStaticQuery } from 'gatsby';
|
||||
import GatsbyImage from 'gatsby-image';
|
||||
import React from 'react';
|
||||
import styles from './Logo.module.css';
|
||||
|
||||
const Logo = ({ size = "256px", className }) => {
|
||||
const Logo = ({ size = '256px', className }) => {
|
||||
const { file } = useStaticQuery(graphql`
|
||||
query {
|
||||
file(relativePath: { eq: "logo.png" }) {
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React, { useContext, useRef } from "react";
|
||||
import { MdFileUpload } from "react-icons/md";
|
||||
import StorageContext from "../../contexts/StorageContext";
|
||||
import { handleKeyDown } from "../../utils";
|
||||
import Input from "./Input";
|
||||
import styles from "./PhotoUpload.module.css";
|
||||
import React, { useContext, useRef } from 'react';
|
||||
import { MdFileUpload } from 'react-icons/md';
|
||||
import StorageContext from '../../contexts/StorageContext';
|
||||
import { handleKeyDown } from '../../utils';
|
||||
import Input from './Input';
|
||||
import styles from './PhotoUpload.module.css';
|
||||
|
||||
const PhotoUpload = () => {
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Tooltip } from "@material-ui/core";
|
||||
import React from "react";
|
||||
import { Tooltip } from '@material-ui/core';
|
||||
import React from 'react';
|
||||
|
||||
const SectionIcon = ({ section, placement = "right" }) => {
|
||||
const SectionIcon = ({ section, placement = 'right' }) => {
|
||||
const { icon: Icon, name } = section;
|
||||
|
||||
return (
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
import React, { Fragment, useEffect } from "react";
|
||||
import { Slide, toast } from "react-toastify";
|
||||
import ModalRegistrar from "../../modals/ModalRegistrar";
|
||||
import React, { useEffect } from 'react';
|
||||
import { Slide, toast } from 'react-toastify';
|
||||
import ModalRegistrar from '../../modals/ModalRegistrar';
|
||||
|
||||
const Wrapper = ({ children }) => {
|
||||
useEffect(() => {
|
||||
toast.configure({
|
||||
role: "alert",
|
||||
role: 'alert',
|
||||
hideProgressBar: true,
|
||||
transition: Slide,
|
||||
closeButton: false,
|
||||
position: "bottom-right",
|
||||
position: 'bottom-right',
|
||||
pauseOnFocusLoss: false,
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<>
|
||||
{children}
|
||||
|
||||
<ModalRegistrar />
|
||||
</Fragment>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user