mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-14 16:51:33 +10:00
add enable/disable checkbox, and heading modifier
This commit is contained in:
@ -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',
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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} />
|
||||
))}
|
||||
|
||||
@ -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}
|
||||
|
||||
Reference in New Issue
Block a user