Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-14 16:51:33 +10:00
Code Issues Packages Projects Releases Wiki Activity

styling, formatting, validation

Browse Source
This commit is contained in:
Amruth Pillai
2020-03-25 11:39:33 +05:30
parent 8521b1125b
commit 36800a944e
11 changed files with 143 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/LeftSidebar/LeftSidebar.js
View File

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

14
src/components/LeftSidebar/tabs/Awards.js
View File

@ -12,7 +12,7 @@ const AwardsTab = ({ data, onChange }) => {
return ( return (
<> <>
<div className="grid grid-cols-6 items-center"> <div className="mb-6 grid grid-cols-6 items-center">
<div className="col-span-1"> <div className="col-span-1">
<Checkbox <Checkbox
checked={data.awards.enable} checked={data.awards.enable}
@ -57,6 +57,8 @@ const AddItem = ({ dispatch }) => {
const onChange = (key, value) => setItem(set({ ...item }, key, value)); const onChange = (key, value) => setItem(set({ ...item }, key, value));
const addItem = () => { const addItem = () => {
if (item.title === '') return;
dispatch({ dispatch({
type: 'add_item', type: 'add_item',
payload: { payload: {
@ -75,7 +77,7 @@ const AddItem = ({ dispatch }) => {
}; };
return ( return (
<div className="border border-gray-200 rounded p-5"> <div className="my-4 border border-gray-200 rounded p-5">
<div <div
className="flex justify-between items-center cursor-pointer" className="flex justify-between items-center cursor-pointer"
onClick={() => setOpen(!isOpen)} onClick={() => setOpen(!isOpen)}
@ -87,6 +89,7 @@ const AddItem = ({ dispatch }) => {
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}> <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
<TextField <TextField
label="Title" label="Title"
className="mb-6"
placeholder="Math &amp; Science Olympiad" placeholder="Math &amp; Science Olympiad"
value={item.title} value={item.title}
onChange={v => onChange('title', v)} onChange={v => onChange('title', v)}
@ -94,6 +97,7 @@ const AddItem = ({ dispatch }) => {
<TextField <TextField
label="Subtitle" label="Subtitle"
className="mb-6"
placeholder="First Place, International Level" placeholder="First Place, International Level"
value={item.subtitle} value={item.subtitle}
onChange={v => onChange('subtitle', v)} onChange={v => onChange('subtitle', v)}
@ -102,7 +106,7 @@ const AddItem = ({ dispatch }) => {
<button <button
type="button" type="button"
onClick={addItem} onClick={addItem}
className="mt-4 bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded" className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
> >
<div className="flex items-center"> <div className="flex items-center">
<i className="material-icons mr-2 font-bold text-base">add</i> <i className="material-icons mr-2 font-bold text-base">add</i>
@ -158,6 +162,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}> <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
<TextField <TextField
label="Title" label="Title"
className="mb-6"
placeholder="Math &amp; Science Olympiad" placeholder="Math &amp; Science Olympiad"
value={item.title} value={item.title}
onChange={v => onChange(`${identifier}.title`, v)} onChange={v => onChange(`${identifier}.title`, v)}
@ -165,12 +170,13 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<TextField <TextField
label="Subtitle" label="Subtitle"
className="mb-6"
placeholder="First Place, International Level" placeholder="First Place, International Level"
value={item.subtitle} value={item.subtitle}
onChange={v => onChange(`${identifier}.subtitle`, v)} onChange={v => onChange(`${identifier}.subtitle`, v)}
/> />
<div className="mt-6 flex justify-between"> <div className="flex justify-between">
<button <button
type="button" type="button"
onClick={deleteItem} onClick={deleteItem}

15
src/components/LeftSidebar/tabs/Certifications.js
View File

@ -12,7 +12,7 @@ const CertificationsTab = ({ data, onChange }) => {
return ( return (
<> <>
<div className="grid grid-cols-6 items-center"> <div className="my-6 grid grid-cols-6 items-center">
<div className="col-span-1"> <div className="col-span-1">
<Checkbox <Checkbox
checked={data.certifications.enable} checked={data.certifications.enable}
@ -41,6 +41,7 @@ const CertificationsTab = ({ data, onChange }) => {
last={index === data.certifications.items.length - 1} last={index === data.certifications.items.length - 1}
/> />
))} ))}
<AddItem dispatch={dispatch} /> <AddItem dispatch={dispatch} />
</> </>
); );
@ -57,6 +58,8 @@ const AddItem = ({ dispatch }) => {
const onChange = (key, value) => setItem(set({ ...item }, key, value)); const onChange = (key, value) => setItem(set({ ...item }, key, value));
const addItem = () => { const addItem = () => {
if (item.title === '') return;
dispatch({ dispatch({
type: 'add_item', type: 'add_item',
payload: { payload: {
@ -75,7 +78,7 @@ const AddItem = ({ dispatch }) => {
}; };
return ( return (
<div className="border border-gray-200 rounded p-5"> <div className="my-4 border border-gray-200 rounded p-5">
<div <div
className="flex justify-between items-center cursor-pointer" className="flex justify-between items-center cursor-pointer"
onClick={() => setOpen(!isOpen)} onClick={() => setOpen(!isOpen)}
@ -87,6 +90,7 @@ const AddItem = ({ dispatch }) => {
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}> <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
<TextField <TextField
label="Title" label="Title"
className="mb-6"
placeholder="Android Development Nanodegree" placeholder="Android Development Nanodegree"
value={item.title} value={item.title}
onChange={v => onChange('title', v)} onChange={v => onChange('title', v)}
@ -94,6 +98,7 @@ const AddItem = ({ dispatch }) => {
<TextField <TextField
label="Subtitle" label="Subtitle"
className="mb-6"
placeholder="Udacity" placeholder="Udacity"
value={item.subtitle} value={item.subtitle}
onChange={v => onChange('subtitle', v)} onChange={v => onChange('subtitle', v)}
@ -102,7 +107,7 @@ const AddItem = ({ dispatch }) => {
<button <button
type="button" type="button"
onClick={addItem} onClick={addItem}
className="mt-4 bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded" className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
> >
<div className="flex items-center"> <div className="flex items-center">
<i className="material-icons mr-2 font-bold text-base">add</i> <i className="material-icons mr-2 font-bold text-base">add</i>
@ -158,6 +163,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}> <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
<TextField <TextField
label="Title" label="Title"
className="mb-6"
placeholder="Android Development Nanodegree" placeholder="Android Development Nanodegree"
value={item.title} value={item.title}
onChange={v => onChange(`${identifier}.title`, v)} onChange={v => onChange(`${identifier}.title`, v)}
@ -165,12 +171,13 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<TextField <TextField
label="Subtitle" label="Subtitle"
className="mb-6"
placeholder="Udacity" placeholder="Udacity"
value={item.subtitle} value={item.subtitle}
onChange={v => onChange(`${identifier}.subtitle`, v)} onChange={v => onChange(`${identifier}.subtitle`, v)}
/> />
<div className="mt-6 flex justify-between"> <div className="flex justify-between">
<button <button
type="button" type="button"
onClick={deleteItem} onClick={deleteItem}

22
src/components/LeftSidebar/tabs/Education.js
View File

@ -13,7 +13,7 @@ const EducationTab = ({ data, onChange }) => {
return ( return (
<> <>
<div className="grid grid-cols-6 items-center"> <div className="mb-6 grid grid-cols-6 items-center">
<div className="col-span-1"> <div className="col-span-1">
<Checkbox <Checkbox
checked={data.education.enable} checked={data.education.enable}
@ -62,6 +62,8 @@ const AddItem = ({ dispatch }) => {
const onChange = (key, value) => setItem(set({ ...item }, key, value)); const onChange = (key, value) => setItem(set({ ...item }, key, value));
const addItem = () => { const addItem = () => {
if (item.name === '' || item.major === '') return;
dispatch({ dispatch({
type: 'add_item', type: 'add_item',
payload: { payload: {
@ -84,7 +86,7 @@ const AddItem = ({ dispatch }) => {
}; };
return ( return (
<div className="border border-gray-200 rounded p-5"> <div className="my-4 border border-gray-200 rounded p-5">
<div <div
className="flex justify-between items-center cursor-pointer" className="flex justify-between items-center cursor-pointer"
onClick={() => setOpen(!isOpen)} onClick={() => setOpen(!isOpen)}
@ -96,6 +98,7 @@ const AddItem = ({ dispatch }) => {
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}> <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
<TextField <TextField
label="Name" label="Name"
className="mb-6"
placeholder="Harvard University" placeholder="Harvard University"
value={item.name} value={item.name}
onChange={v => onChange('name', v)} onChange={v => onChange('name', v)}
@ -103,6 +106,7 @@ const AddItem = ({ dispatch }) => {
<TextField <TextField
label="Major" label="Major"
className="mb-6"
placeholder="Masters in Computer Science" placeholder="Masters in Computer Science"
value={item.major} value={item.major}
onChange={v => onChange('major', v)} onChange={v => onChange('major', v)}
@ -110,6 +114,7 @@ const AddItem = ({ dispatch }) => {
<TextField <TextField
label="Grade" label="Grade"
className="mb-6"
placeholder="7.2 CGPA" placeholder="7.2 CGPA"
value={item.grade} value={item.grade}
onChange={v => onChange('grade', v)} onChange={v => onChange('grade', v)}
@ -118,6 +123,7 @@ const AddItem = ({ dispatch }) => {
<div className="grid grid-cols-2 col-gap-4"> <div className="grid grid-cols-2 col-gap-4">
<TextField <TextField
label="Start Date" label="Start Date"
className="mb-6"
placeholder="March 2018" placeholder="March 2018"
value={item.start} value={item.start}
onChange={v => onChange('start', v)} onChange={v => onChange('start', v)}
@ -125,6 +131,7 @@ const AddItem = ({ dispatch }) => {
<TextField <TextField
label="End Date" label="End Date"
className="mb-6"
placeholder="May 2020" placeholder="May 2020"
value={item.end} value={item.end}
onChange={v => onChange('end', v)} onChange={v => onChange('end', v)}
@ -133,6 +140,7 @@ const AddItem = ({ dispatch }) => {
<TextArea <TextArea
rows="5" rows="5"
className="mb-6"
label="Description" label="Description"
placeholder="You can write about projects or special credit classes that you took while studying at this school." placeholder="You can write about projects or special credit classes that you took while studying at this school."
value={item.description} value={item.description}
@ -142,7 +150,7 @@ const AddItem = ({ dispatch }) => {
<button <button
type="button" type="button"
onClick={addItem} onClick={addItem}
className="mt-4 bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded" className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
> >
<div className="flex items-center"> <div className="flex items-center">
<i className="material-icons mr-2 font-bold text-base">add</i> <i className="material-icons mr-2 font-bold text-base">add</i>
@ -198,6 +206,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}> <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
<TextField <TextField
label="Name" label="Name"
className="mb-6"
placeholder="Harvard University" placeholder="Harvard University"
value={item.name} value={item.name}
onChange={v => onChange(`${identifier}.name`, v)} onChange={v => onChange(`${identifier}.name`, v)}
@ -205,6 +214,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<TextField <TextField
label="Major" label="Major"
className="mb-6"
placeholder="Masters in Computer Science" placeholder="Masters in Computer Science"
value={item.major} value={item.major}
onChange={v => onChange(`${identifier}.major`, v)} onChange={v => onChange(`${identifier}.major`, v)}
@ -212,6 +222,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<TextField <TextField
label="Grade" label="Grade"
className="mb-6"
placeholder="7.2 CGPA" placeholder="7.2 CGPA"
value={item.grade} value={item.grade}
onChange={v => onChange(`${identifier}.grade`, v)} onChange={v => onChange(`${identifier}.grade`, v)}
@ -220,6 +231,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<div className="grid grid-cols-2 col-gap-4"> <div className="grid grid-cols-2 col-gap-4">
<TextField <TextField
label="Start Date" label="Start Date"
className="mb-6"
placeholder="March 2018" placeholder="March 2018"
value={item.start} value={item.start}
onChange={v => onChange(`${identifier}.start`, v)} onChange={v => onChange(`${identifier}.start`, v)}
@ -227,6 +239,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<TextField <TextField
label="End Date" label="End Date"
className="mb-6"
placeholder="May 2020" placeholder="May 2020"
value={item.end} value={item.end}
onChange={v => onChange(`${identifier}.end`, v)} onChange={v => onChange(`${identifier}.end`, v)}
@ -235,13 +248,14 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<TextArea <TextArea
rows="5" rows="5"
className="mb-6"
label="Description" label="Description"
placeholder="You can write about projects or special credit classes that you took while studying at this school." placeholder="You can write about projects or special credit classes that you took while studying at this school."
value={item.description} value={item.description}
onChange={v => onChange(`${identifier}.description`, v)} onChange={v => onChange(`${identifier}.description`, v)}
/> />
<div className="mt-6 flex justify-between"> <div className="flex justify-between">
<button <button
type="button" type="button"
onClick={deleteItem} onClick={deleteItem}

13
src/components/LeftSidebar/tabs/Extras.js
View File

@ -12,7 +12,7 @@ const ExtrasTab = ({ data, onChange }) => {
return ( return (
<> <>
<div className="grid grid-cols-6 items-center"> <div className="mb-6 grid grid-cols-6 items-center">
<div className="col-span-1"> <div className="col-span-1">
<Checkbox <Checkbox
checked={data.extras.enable} checked={data.extras.enable}
@ -41,6 +41,7 @@ const ExtrasTab = ({ data, onChange }) => {
last={index === data.extras.items.length - 1} last={index === data.extras.items.length - 1}
/> />
))} ))}
<AddItem dispatch={dispatch} /> <AddItem dispatch={dispatch} />
</> </>
); );
@ -57,6 +58,8 @@ const AddItem = ({ dispatch }) => {
const onChange = (key, value) => setItem(items => set({ ...items }, key, value)); const onChange = (key, value) => setItem(items => set({ ...items }, key, value));
const addItem = () => { const addItem = () => {
if (item.key === '' || item.value === '') return;
dispatch({ dispatch({
type: 'add_item', type: 'add_item',
payload: { payload: {
@ -75,7 +78,7 @@ const AddItem = ({ dispatch }) => {
}; };
return ( return (
<div className="border border-gray-200 rounded p-5"> <div className="my-4 border border-gray-200 rounded p-5">
<div <div
className="flex justify-between items-center cursor-pointer" className="flex justify-between items-center cursor-pointer"
onClick={() => setOpen(!isOpen)} onClick={() => setOpen(!isOpen)}
@ -87,6 +90,7 @@ const AddItem = ({ dispatch }) => {
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}> <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
<TextField <TextField
label="Key" label="Key"
className="mb-6"
placeholder="Date of Birth" placeholder="Date of Birth"
value={item.key} value={item.key}
onChange={v => onChange('key', v)} onChange={v => onChange('key', v)}
@ -94,6 +98,7 @@ const AddItem = ({ dispatch }) => {
<TextField <TextField
label="Value" label="Value"
className="mb-6"
placeholder="6th August 1995" placeholder="6th August 1995"
value={item.value} value={item.value}
onChange={v => onChange('value', v)} onChange={v => onChange('value', v)}
@ -102,7 +107,7 @@ const AddItem = ({ dispatch }) => {
<button <button
type="button" type="button"
onClick={addItem} onClick={addItem}
className="mt-4 bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded" className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
> >
<div className="flex items-center"> <div className="flex items-center">
<i className="material-icons mr-2 font-bold text-base">add</i> <i className="material-icons mr-2 font-bold text-base">add</i>
@ -158,6 +163,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}> <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
<TextField <TextField
label="Key" label="Key"
className="mb-6"
placeholder="Date of Birth" placeholder="Date of Birth"
value={item.key} value={item.key}
onChange={v => onChange(`${identifier}.key`, v)} onChange={v => onChange(`${identifier}.key`, v)}
@ -165,6 +171,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<TextField <TextField
label="Value" label="Value"
className="mb-6"
placeholder="6th August 1995" placeholder="6th August 1995"
value={item.value} value={item.value}
onChange={v => onChange(`${identifier}.value`, v)} onChange={v => onChange(`${identifier}.value`, v)}

3
src/components/LeftSidebar/tabs/Objective.js
View File

@ -6,7 +6,7 @@ import Checkbox from '../../../shared/Checkbox';
const ObjectiveTab = ({ data, onChange }) => { const ObjectiveTab = ({ data, onChange }) => {
return ( return (
<div> <div>
<div className="grid grid-cols-6 items-center"> <div className="mb-6 grid grid-cols-6 items-center">
<div className="col-span-1"> <div className="col-span-1">
<Checkbox <Checkbox
checked={data.objective.enable} checked={data.objective.enable}
@ -26,6 +26,7 @@ const ObjectiveTab = ({ data, onChange }) => {
<TextArea <TextArea
rows="15" rows="15"
className="mb-6"
label="Objective" label="Objective"
placeholder="Looking for a challenging role in a reputable organization to utilize my technical, database, and management skills for the growth of the organization as well as to enhance my knowledge about new and emerging trends in the IT sector." placeholder="Looking for a challenging role in a reputable organization to utilize my technical, database, and management skills for the growth of the organization as well as to enhance my knowledge about new and emerging trends in the IT sector."
value={data.objective.body} value={data.objective.body}

20
src/components/LeftSidebar/tabs/Profile.js
View File

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

11
src/components/LeftSidebar/tabs/Skills.js
View File

@ -10,7 +10,7 @@ const SkillsTab = ({ data, onChange }) => {
return ( return (
<> <>
<div className="grid grid-cols-6 items-center"> <div className="my-6 grid grid-cols-6 items-center">
<div className="col-span-1"> <div className="col-span-1">
<Checkbox <Checkbox
checked={data.skills.enable} checked={data.skills.enable}
@ -31,6 +31,7 @@ const SkillsTab = ({ data, onChange }) => {
{data.skills.items.map((x, index) => ( {data.skills.items.map((x, index) => (
<Item item={x} key={x} index={index} onChange={onChange} dispatch={dispatch} /> <Item item={x} key={x} index={index} onChange={onChange} dispatch={dispatch} />
))} ))}
<AddItem dispatch={dispatch} /> <AddItem dispatch={dispatch} />
</> </>
); );
@ -41,6 +42,8 @@ const AddItem = ({ dispatch }) => {
const [item, setItem] = useState(''); const [item, setItem] = useState('');
const addItem = () => { const addItem = () => {
if (item === '') return;
dispatch({ dispatch({
type: 'add_item', type: 'add_item',
payload: { payload: {
@ -54,7 +57,7 @@ const AddItem = ({ dispatch }) => {
}; };
return ( return (
<div className="mt-4 border border-gray-200 rounded p-5"> <div className="my-4 border border-gray-200 rounded p-5">
<div <div
className="flex justify-between items-center cursor-pointer" className="flex justify-between items-center cursor-pointer"
onClick={() => setOpen(!isOpen)} onClick={() => setOpen(!isOpen)}
@ -64,7 +67,7 @@ const AddItem = ({ dispatch }) => {
</div> </div>
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}> <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
<div className="mt-4 grid grid-cols-4 col-gap-4"> <div className="grid grid-cols-4 col-gap-4">
<div className="col-span-3"> <div className="col-span-3">
<input <input
className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
@ -103,7 +106,7 @@ const Item = ({ item, index, onChange, dispatch }) => {
}); });
return ( return (
<div className="mt-4 grid grid-cols-6"> <div className="my-4 grid grid-cols-6">
<div className="col-span-5"> <div className="col-span-5">
<input <input
className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"

21
src/components/LeftSidebar/tabs/Work.js
View File

@ -13,7 +13,7 @@ const WorkTab = ({ data, onChange }) => {
return ( return (
<> <>
<div className="grid grid-cols-6 items-center"> <div className="mb-6 grid grid-cols-6 items-center">
<div className="col-span-1"> <div className="col-span-1">
<Checkbox checked={data.work.enable} onChange={v => onChange('data.work.enable', v)} /> <Checkbox checked={data.work.enable} onChange={v => onChange('data.work.enable', v)} />
</div> </div>
@ -39,6 +39,7 @@ const WorkTab = ({ data, onChange }) => {
last={index === data.work.items.length - 1} last={index === data.work.items.length - 1}
/> />
))} ))}
<AddItem dispatch={dispatch} /> <AddItem dispatch={dispatch} />
</> </>
); );
@ -58,6 +59,8 @@ const AddItem = ({ dispatch }) => {
const onChange = (key, value) => setItem(set({ ...item }, key, value)); const onChange = (key, value) => setItem(set({ ...item }, key, value));
const addItem = () => { const addItem = () => {
if (item.title === '' || item.role === '') return;
dispatch({ dispatch({
type: 'add_item', type: 'add_item',
payload: { payload: {
@ -79,7 +82,7 @@ const AddItem = ({ dispatch }) => {
}; };
return ( return (
<div className="border border-gray-200 rounded p-5"> <div className="my-4 border border-gray-200 rounded p-5">
<div <div
className="flex justify-between items-center cursor-pointer" className="flex justify-between items-center cursor-pointer"
onClick={() => setOpen(!isOpen)} onClick={() => setOpen(!isOpen)}
@ -91,6 +94,7 @@ const AddItem = ({ dispatch }) => {
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}> <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
<TextField <TextField
label="Name" label="Name"
className="mb-6"
placeholder="Amazon US" placeholder="Amazon US"
value={item.title} value={item.title}
onChange={v => onChange('title', v)} onChange={v => onChange('title', v)}
@ -98,6 +102,7 @@ const AddItem = ({ dispatch }) => {
<TextField <TextField
label="Role" label="Role"
className="mb-6"
placeholder="Frontend Web Developer" placeholder="Frontend Web Developer"
value={item.role} value={item.role}
onChange={v => onChange('role', v)} onChange={v => onChange('role', v)}
@ -106,6 +111,7 @@ const AddItem = ({ dispatch }) => {
<div className="grid grid-cols-2 col-gap-4"> <div className="grid grid-cols-2 col-gap-4">
<TextField <TextField
label="Start Date" label="Start Date"
className="mb-6"
placeholder="March 2018" placeholder="March 2018"
value={item.start} value={item.start}
onChange={v => onChange('start', v)} onChange={v => onChange('start', v)}
@ -113,6 +119,7 @@ const AddItem = ({ dispatch }) => {
<TextField <TextField
label="End Date" label="End Date"
className="mb-6"
placeholder="current" placeholder="current"
value={item.end} value={item.end}
onChange={v => onChange('end', v)} onChange={v => onChange('end', v)}
@ -121,6 +128,7 @@ const AddItem = ({ dispatch }) => {
<TextArea <TextArea
rows="5" rows="5"
className="mb-6"
label="Description" label="Description"
placeholder="You can write about what you specialized in while working at the company and what projects you were a part of." placeholder="You can write about what you specialized in while working at the company and what projects you were a part of."
value={item.description} value={item.description}
@ -130,7 +138,7 @@ const AddItem = ({ dispatch }) => {
<button <button
type="button" type="button"
onClick={addItem} onClick={addItem}
className="mt-4 bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded" className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
> >
<div className="flex items-center"> <div className="flex items-center">
<i className="material-icons mr-2 font-bold text-base">add</i> <i className="material-icons mr-2 font-bold text-base">add</i>
@ -186,6 +194,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}> <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
<TextField <TextField
label="Name" label="Name"
className="mb-6"
placeholder="Amazon US" placeholder="Amazon US"
value={item.title} value={item.title}
onChange={v => onChange(`${identifier}.title`, v)} onChange={v => onChange(`${identifier}.title`, v)}
@ -193,6 +202,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<TextField <TextField
label="Role" label="Role"
className="mb-6"
placeholder="Frontend Web Developer" placeholder="Frontend Web Developer"
value={item.role} value={item.role}
onChange={v => onChange(`${identifier}.role`, v)} onChange={v => onChange(`${identifier}.role`, v)}
@ -201,6 +211,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<div className="grid grid-cols-2 col-gap-4"> <div className="grid grid-cols-2 col-gap-4">
<TextField <TextField
label="Start Date" label="Start Date"
className="mb-6"
placeholder="March 2018" placeholder="March 2018"
value={item.start} value={item.start}
onChange={v => onChange(`${identifier}.start`, v)} onChange={v => onChange(`${identifier}.start`, v)}
@ -208,6 +219,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<TextField <TextField
label="End Date" label="End Date"
className="mb-6"
placeholder="current" placeholder="current"
value={item.end} value={item.end}
onChange={v => onChange(`${identifier}.end`, v)} onChange={v => onChange(`${identifier}.end`, v)}
@ -216,13 +228,14 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<TextArea <TextArea
rows="5" rows="5"
className="mb-6"
label="Description" label="Description"
placeholder="You can write about what you specialized in while working at the company and what projects you were a part of." placeholder="You can write about what you specialized in while working at the company and what projects you were a part of."
value={item.description} value={item.description}
onChange={v => onChange(`${identifier}.description`, v)} onChange={v => onChange(`${identifier}.description`, v)}
/> />
<div className="mt-6 flex justify-between"> <div className="flex justify-between">
<button <button
type="button" type="button"
onClick={deleteItem} onClick={deleteItem}

13
src/index.css
View File

@ -18,19 +18,16 @@ body {
bottom: 0; bottom: 0;
} }
#tabs {
scroll-behavior: smooth;
}
#tabs::-webkit-scrollbar { #tabs::-webkit-scrollbar {
width: 0px; width: 0px;
height: 0px;
background: transparent; /* make scrollbar transparent */ background: transparent; /* make scrollbar transparent */
} }
#tabs li:first-child {
padding-left: 1.5em;
}
#tabs li:last-child {
padding-right: 1.5em;
}
#page { #page {
width: 21cm; width: 21cm;
height: 29.7cm; height: 29.7cm;

73
src/shared/TabBar.js
View File

@ -1,27 +1,58 @@
import React from 'react'; import React, { useRef } from 'react';
const TabBar = ({ tabs, currentTab, setCurrentTab }) => { const TabBar = ({ tabs, currentTab, setCurrentTab }) => {
const tabsRef = useRef(null);
const scrollBy = x => {
const index = tabs.indexOf(currentTab);
tabsRef.current.scrollLeft += x;
if (x < 0 && index > 0) {
setCurrentTab(tabs[index - 1]);
}
if (x > 0 && index < tabs.length - 1) {
setCurrentTab(tabs[index + 1]);
}
};
return ( return (
<ul id="tabs" className="my-4 flex items-center overflow-x-scroll"> <div className="my-6 mx-4 flex items-center">
{tabs.map(tab => <div
currentTab === tab ? ( className="flex mr-1 cursor-pointer select-none text-gray-600 hover:text-gray-800"
<li key={tab} className="mx-1"> onClick={() => scrollBy(-100)}
<div className="whitespace-no-wrap bg-gray-700 text-white rounded-md text-sm py-2 px-6 font-medium"> >
{tab} <i className="material-icons">chevron_left</i>
</div> </div>
</li>
) : ( <ul id="tabs" ref={tabsRef} className="flex overflow-x-scroll">
<li key={tab} className="mx-1"> {tabs.map(tab =>
<div currentTab === tab ? (
className="bg-white whitespace-no-wrap rounded-md cursor-pointer text-sm py-2 px-6 font-medium hover:bg-gray-200" <li key={tab} className="mx-1">
onClick={() => setCurrentTab(tab)} <div className="whitespace-no-wrap bg-gray-700 text-white rounded-md text-sm py-2 px-6 font-medium">
> {tab}
{tab} </div>
</div> </li>
</li> ) : (
), <li key={tab} className="mx-1">
)} <div
</ul> className="bg-white whitespace-no-wrap rounded-md cursor-pointer text-sm py-2 px-6 font-medium hover:bg-gray-200"
onClick={() => setCurrentTab(tab)}
>
{tab}
</div>
</li>
),
)}
</ul>
<div
className="flex ml-1 cursor-pointer select-none text-gray-600 hover:text-gray-800"
onClick={() => scrollBy(100)}
>
<i className="material-icons">chevron_right</i>
</div>
</div>
); );
}; };