add enable/disable checkbox, and heading modifier

This commit is contained in:
Amruth Pillai
2020-03-25 10:07:09 +05:30
parent 25a6740c24
commit 8521b1125b
17 changed files with 335 additions and 117 deletions

View File

@ -27,7 +27,7 @@ const LeftSidebar = () => {
const { state, dispatch } = context;
const { data } = state;
const [currentTab, setCurrentTab] = useState('Extras');
const [currentTab, setCurrentTab] = useState('Objective');
const onChange = (key, value) => {
dispatch({
type: 'on_input',

View File

@ -4,6 +4,7 @@ import set from 'lodash/set';
import TextField from '../../../shared/TextField';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
const AwardsTab = ({ data, onChange }) => {
const context = useContext(AppContext);
@ -11,6 +12,24 @@ const AwardsTab = ({ data, onChange }) => {
return (
<>
<div className="grid grid-cols-6 items-center">
<div className="col-span-1">
<Checkbox
checked={data.awards.enable}
onChange={v => onChange('data.awards.enable', v)}
/>
</div>
<div className="col-span-5">
<TextField
placeholder="Heading"
value={data.awards.heading}
onChange={v => onChange('data.awards.heading', v)}
/>
</div>
</div>
<hr className="my-6" />
{data.awards.items.map((x, index) => (
<Item
item={x}

View File

@ -4,6 +4,7 @@ import set from 'lodash/set';
import TextField from '../../../shared/TextField';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
const CertificationsTab = ({ data, onChange }) => {
const context = useContext(AppContext);
@ -11,6 +12,24 @@ const CertificationsTab = ({ data, onChange }) => {
return (
<>
<div className="grid grid-cols-6 items-center">
<div className="col-span-1">
<Checkbox
checked={data.certifications.enable}
onChange={v => onChange('data.certifications.enable', v)}
/>
</div>
<div className="col-span-5">
<TextField
placeholder="Heading"
value={data.certifications.heading}
onChange={v => onChange('data.certifications.heading', v)}
/>
</div>
</div>
<hr className="my-6" />
{data.certifications.items.map((x, index) => (
<Item
item={x}

View File

@ -5,6 +5,7 @@ import set from 'lodash/set';
import TextField from '../../../shared/TextField';
import TextArea from '../../../shared/TextArea';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
const EducationTab = ({ data, onChange }) => {
const context = useContext(AppContext);
@ -12,6 +13,24 @@ const EducationTab = ({ data, onChange }) => {
return (
<>
<div className="grid grid-cols-6 items-center">
<div className="col-span-1">
<Checkbox
checked={data.education.enable}
onChange={v => onChange('data.education.enable', v)}
/>
</div>
<div className="col-span-5">
<TextField
placeholder="Heading"
value={data.education.heading}
onChange={v => onChange('data.education.heading', v)}
/>
</div>
</div>
<hr className="my-6" />
{data.education.items.map((x, index) => (
<Item
item={x}

View File

@ -4,6 +4,7 @@ import set from 'lodash/set';
import TextField from '../../../shared/TextField';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
const ExtrasTab = ({ data, onChange }) => {
const context = useContext(AppContext);
@ -11,6 +12,24 @@ const ExtrasTab = ({ data, onChange }) => {
return (
<>
<div className="grid grid-cols-6 items-center">
<div className="col-span-1">
<Checkbox
checked={data.extras.enable}
onChange={v => onChange('data.extras.enable', v)}
/>
</div>
<div className="col-span-5">
<TextField
placeholder="Heading"
value={data.extras.heading}
onChange={v => onChange('data.extras.heading', v)}
/>
</div>
</div>
<hr className="my-6" />
{data.extras.items.map((x, index) => (
<Item
item={x}

View File

@ -1,9 +1,29 @@
import React from 'react';
import TextArea from '../../../shared/TextArea';
import TextField from '../../../shared/TextField';
import Checkbox from '../../../shared/Checkbox';
const ObjectiveTab = ({ data, onChange }) => {
return (
<div>
<div className="grid grid-cols-6 items-center">
<div className="col-span-1">
<Checkbox
checked={data.objective.enable}
onChange={v => onChange('data.objective.enable', v)}
/>
</div>
<div className="col-span-5">
<TextField
placeholder="Heading"
value={data.objective.heading}
onChange={v => onChange('data.objective.heading', v)}
/>
</div>
</div>
<hr className="my-6" />
<TextArea
rows="15"
label="Objective"

View File

@ -4,6 +4,7 @@ import TextField from '../../../shared/TextField';
const ProfileTab = ({ data, onChange }) => (
<div>
<TextField
className="mb-4"
label="Photo URL"
placeholder="https://i.imgur.com/..."
value={data.profile.photo}
@ -12,6 +13,7 @@ const ProfileTab = ({ data, onChange }) => (
<div className="grid grid-cols-2 col-gap-4">
<TextField
className="mb-4"
label="First Name"
placeholder="Jane"
value={data.profile.firstName}
@ -19,6 +21,7 @@ const ProfileTab = ({ data, onChange }) => (
/>
<TextField
className="mb-4"
label="Last Name"
placeholder="Doe"
value={data.profile.lastName}
@ -27,6 +30,7 @@ const ProfileTab = ({ data, onChange }) => (
</div>
<TextField
className="mb-4"
label="Subtitle"
placeholder="Full Stack Web Developer"
value={data.profile.subtitle}
@ -36,6 +40,7 @@ const ProfileTab = ({ data, onChange }) => (
<hr className="my-6" />
<TextField
className="mb-4"
label="Address Line 1"
placeholder="Palladium Complex"
value={data.profile.address.line1}
@ -43,6 +48,7 @@ const ProfileTab = ({ data, onChange }) => (
/>
<TextField
className="mb-4"
label="Address Line 2"
placeholder="140 E 14th St"
value={data.profile.address.line2}
@ -50,6 +56,7 @@ const ProfileTab = ({ data, onChange }) => (
/>
<TextField
className="mb-4"
label="Address Line 3"
placeholder="New York, NY 10003 USA"
value={data.profile.address.line3}
@ -59,6 +66,7 @@ const ProfileTab = ({ data, onChange }) => (
<hr className="my-6" />
<TextField
className="mb-4"
label="Phone Number"
placeholder="+1 541 754 3010"
value={data.profile.phone}
@ -66,6 +74,7 @@ const ProfileTab = ({ data, onChange }) => (
/>
<TextField
className="mb-4"
label="Website"
placeholder="google.com"
value={data.profile.website}
@ -73,6 +82,7 @@ const ProfileTab = ({ data, onChange }) => (
/>
<TextField
className="mb-4"
label="Email Address"
placeholder="john.doe@example.com"
value={data.profile.email}

View File

@ -1,6 +1,8 @@
import React, { useState, useContext } from 'react';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
import TextField from '../../../shared/TextField';
const SkillsTab = ({ data, onChange }) => {
const context = useContext(AppContext);
@ -8,6 +10,24 @@ const SkillsTab = ({ data, onChange }) => {
return (
<>
<div className="grid grid-cols-6 items-center">
<div className="col-span-1">
<Checkbox
checked={data.skills.enable}
onChange={v => onChange('data.skills.enable', v)}
/>
</div>
<div className="col-span-5">
<TextField
placeholder="Heading"
value={data.skills.heading}
onChange={v => onChange('data.skills.heading', v)}
/>
</div>
</div>
<hr className="my-6" />
{data.skills.items.map((x, index) => (
<Item item={x} key={x} index={index} onChange={onChange} dispatch={dispatch} />
))}

View File

@ -5,6 +5,7 @@ import set from 'lodash/set';
import TextField from '../../../shared/TextField';
import TextArea from '../../../shared/TextArea';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
const WorkTab = ({ data, onChange }) => {
const context = useContext(AppContext);
@ -12,6 +13,21 @@ const WorkTab = ({ data, onChange }) => {
return (
<>
<div className="grid grid-cols-6 items-center">
<div className="col-span-1">
<Checkbox checked={data.work.enable} onChange={v => onChange('data.work.enable', v)} />
</div>
<div className="col-span-5">
<TextField
placeholder="Heading"
value={data.work.heading}
onChange={v => onChange('data.work.heading', v)}
/>
</div>
</div>
<hr className="my-6" />
{data.work.items.map((x, index) => (
<Item
item={x}