mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-14 16:51:33 +10:00
styling, formatting, validation
This commit is contained in:
Amruth Pillai
@ -27,7 +27,7 @@ const LeftSidebar = () => {
|
||||
const { state, dispatch } = context;
|
||||
const { data } = state;
|
||||
|
||||
const [currentTab, setCurrentTab] = useState('Objective');
|
||||
const [currentTab, setCurrentTab] = useState('Profile');
|
||||
const onChange = (key, value) => {
|
||||
dispatch({
|
||||
type: 'on_input',
|
||||
|
||||
@ -12,7 +12,7 @@ const AwardsTab = ({ data, onChange }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-6 items-center">
|
||||
<div className="mb-6 grid grid-cols-6 items-center">
|
||||
<div className="col-span-1">
|
||||
<Checkbox
|
||||
checked={data.awards.enable}
|
||||
@ -57,6 +57,8 @@ const AddItem = ({ dispatch }) => {
|
||||
const onChange = (key, value) => setItem(set({ ...item }, key, value));
|
||||
|
||||
const addItem = () => {
|
||||
if (item.title === '') return;
|
||||
|
||||
dispatch({
|
||||
type: 'add_item',
|
||||
payload: {
|
||||
@ -75,7 +77,7 @@ const AddItem = ({ dispatch }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border border-gray-200 rounded p-5">
|
||||
<div className="my-4 border border-gray-200 rounded p-5">
|
||||
<div
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() => setOpen(!isOpen)}
|
||||
@ -87,6 +89,7 @@ const AddItem = ({ dispatch }) => {
|
||||
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
|
||||
<TextField
|
||||
label="Title"
|
||||
className="mb-6"
|
||||
placeholder="Math & Science Olympiad"
|
||||
value={item.title}
|
||||
onChange={v => onChange('title', v)}
|
||||
@ -94,6 +97,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
<TextField
|
||||
label="Subtitle"
|
||||
className="mb-6"
|
||||
placeholder="First Place, International Level"
|
||||
value={item.subtitle}
|
||||
onChange={v => onChange('subtitle', v)}
|
||||
@ -102,7 +106,7 @@ const AddItem = ({ dispatch }) => {
|
||||
<button
|
||||
type="button"
|
||||
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">
|
||||
<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'}`}>
|
||||
<TextField
|
||||
label="Title"
|
||||
className="mb-6"
|
||||
placeholder="Math & Science Olympiad"
|
||||
value={item.title}
|
||||
onChange={v => onChange(`${identifier}.title`, v)}
|
||||
@ -165,12 +170,13 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
|
||||
<TextField
|
||||
label="Subtitle"
|
||||
className="mb-6"
|
||||
placeholder="First Place, International Level"
|
||||
value={item.subtitle}
|
||||
onChange={v => onChange(`${identifier}.subtitle`, v)}
|
||||
/>
|
||||
|
||||
<div className="mt-6 flex justify-between">
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={deleteItem}
|
||||
|
||||
@ -12,7 +12,7 @@ const CertificationsTab = ({ data, onChange }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-6 items-center">
|
||||
<div className="my-6 grid grid-cols-6 items-center">
|
||||
<div className="col-span-1">
|
||||
<Checkbox
|
||||
checked={data.certifications.enable}
|
||||
@ -41,6 +41,7 @@ const CertificationsTab = ({ data, onChange }) => {
|
||||
last={index === data.certifications.items.length - 1}
|
||||
/>
|
||||
))}
|
||||
|
||||
<AddItem dispatch={dispatch} />
|
||||
</>
|
||||
);
|
||||
@ -57,6 +58,8 @@ const AddItem = ({ dispatch }) => {
|
||||
const onChange = (key, value) => setItem(set({ ...item }, key, value));
|
||||
|
||||
const addItem = () => {
|
||||
if (item.title === '') return;
|
||||
|
||||
dispatch({
|
||||
type: 'add_item',
|
||||
payload: {
|
||||
@ -75,7 +78,7 @@ const AddItem = ({ dispatch }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border border-gray-200 rounded p-5">
|
||||
<div className="my-4 border border-gray-200 rounded p-5">
|
||||
<div
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() => setOpen(!isOpen)}
|
||||
@ -87,6 +90,7 @@ const AddItem = ({ dispatch }) => {
|
||||
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
|
||||
<TextField
|
||||
label="Title"
|
||||
className="mb-6"
|
||||
placeholder="Android Development Nanodegree"
|
||||
value={item.title}
|
||||
onChange={v => onChange('title', v)}
|
||||
@ -94,6 +98,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
<TextField
|
||||
label="Subtitle"
|
||||
className="mb-6"
|
||||
placeholder="Udacity"
|
||||
value={item.subtitle}
|
||||
onChange={v => onChange('subtitle', v)}
|
||||
@ -102,7 +107,7 @@ const AddItem = ({ dispatch }) => {
|
||||
<button
|
||||
type="button"
|
||||
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">
|
||||
<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'}`}>
|
||||
<TextField
|
||||
label="Title"
|
||||
className="mb-6"
|
||||
placeholder="Android Development Nanodegree"
|
||||
value={item.title}
|
||||
onChange={v => onChange(`${identifier}.title`, v)}
|
||||
@ -165,12 +171,13 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
|
||||
<TextField
|
||||
label="Subtitle"
|
||||
className="mb-6"
|
||||
placeholder="Udacity"
|
||||
value={item.subtitle}
|
||||
onChange={v => onChange(`${identifier}.subtitle`, v)}
|
||||
/>
|
||||
|
||||
<div className="mt-6 flex justify-between">
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={deleteItem}
|
||||
|
||||
@ -13,7 +13,7 @@ const EducationTab = ({ data, onChange }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-6 items-center">
|
||||
<div className="mb-6 grid grid-cols-6 items-center">
|
||||
<div className="col-span-1">
|
||||
<Checkbox
|
||||
checked={data.education.enable}
|
||||
@ -62,6 +62,8 @@ const AddItem = ({ dispatch }) => {
|
||||
const onChange = (key, value) => setItem(set({ ...item }, key, value));
|
||||
|
||||
const addItem = () => {
|
||||
if (item.name === '' || item.major === '') return;
|
||||
|
||||
dispatch({
|
||||
type: 'add_item',
|
||||
payload: {
|
||||
@ -84,7 +86,7 @@ const AddItem = ({ dispatch }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border border-gray-200 rounded p-5">
|
||||
<div className="my-4 border border-gray-200 rounded p-5">
|
||||
<div
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() => setOpen(!isOpen)}
|
||||
@ -96,6 +98,7 @@ const AddItem = ({ dispatch }) => {
|
||||
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
|
||||
<TextField
|
||||
label="Name"
|
||||
className="mb-6"
|
||||
placeholder="Harvard University"
|
||||
value={item.name}
|
||||
onChange={v => onChange('name', v)}
|
||||
@ -103,6 +106,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
<TextField
|
||||
label="Major"
|
||||
className="mb-6"
|
||||
placeholder="Masters in Computer Science"
|
||||
value={item.major}
|
||||
onChange={v => onChange('major', v)}
|
||||
@ -110,6 +114,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
<TextField
|
||||
label="Grade"
|
||||
className="mb-6"
|
||||
placeholder="7.2 CGPA"
|
||||
value={item.grade}
|
||||
onChange={v => onChange('grade', v)}
|
||||
@ -118,6 +123,7 @@ const AddItem = ({ dispatch }) => {
|
||||
<div className="grid grid-cols-2 col-gap-4">
|
||||
<TextField
|
||||
label="Start Date"
|
||||
className="mb-6"
|
||||
placeholder="March 2018"
|
||||
value={item.start}
|
||||
onChange={v => onChange('start', v)}
|
||||
@ -125,6 +131,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
<TextField
|
||||
label="End Date"
|
||||
className="mb-6"
|
||||
placeholder="May 2020"
|
||||
value={item.end}
|
||||
onChange={v => onChange('end', v)}
|
||||
@ -133,6 +140,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
<TextArea
|
||||
rows="5"
|
||||
className="mb-6"
|
||||
label="Description"
|
||||
placeholder="You can write about projects or special credit classes that you took while studying at this school."
|
||||
value={item.description}
|
||||
@ -142,7 +150,7 @@ const AddItem = ({ dispatch }) => {
|
||||
<button
|
||||
type="button"
|
||||
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">
|
||||
<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'}`}>
|
||||
<TextField
|
||||
label="Name"
|
||||
className="mb-6"
|
||||
placeholder="Harvard University"
|
||||
value={item.name}
|
||||
onChange={v => onChange(`${identifier}.name`, v)}
|
||||
@ -205,6 +214,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
|
||||
<TextField
|
||||
label="Major"
|
||||
className="mb-6"
|
||||
placeholder="Masters in Computer Science"
|
||||
value={item.major}
|
||||
onChange={v => onChange(`${identifier}.major`, v)}
|
||||
@ -212,6 +222,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
|
||||
<TextField
|
||||
label="Grade"
|
||||
className="mb-6"
|
||||
placeholder="7.2 CGPA"
|
||||
value={item.grade}
|
||||
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">
|
||||
<TextField
|
||||
label="Start Date"
|
||||
className="mb-6"
|
||||
placeholder="March 2018"
|
||||
value={item.start}
|
||||
onChange={v => onChange(`${identifier}.start`, v)}
|
||||
@ -227,6 +239,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
|
||||
<TextField
|
||||
label="End Date"
|
||||
className="mb-6"
|
||||
placeholder="May 2020"
|
||||
value={item.end}
|
||||
onChange={v => onChange(`${identifier}.end`, v)}
|
||||
@ -235,13 +248,14 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
|
||||
<TextArea
|
||||
rows="5"
|
||||
className="mb-6"
|
||||
label="Description"
|
||||
placeholder="You can write about projects or special credit classes that you took while studying at this school."
|
||||
value={item.description}
|
||||
onChange={v => onChange(`${identifier}.description`, v)}
|
||||
/>
|
||||
|
||||
<div className="mt-6 flex justify-between">
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={deleteItem}
|
||||
|
||||
@ -12,7 +12,7 @@ const ExtrasTab = ({ data, onChange }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-6 items-center">
|
||||
<div className="mb-6 grid grid-cols-6 items-center">
|
||||
<div className="col-span-1">
|
||||
<Checkbox
|
||||
checked={data.extras.enable}
|
||||
@ -41,6 +41,7 @@ const ExtrasTab = ({ data, onChange }) => {
|
||||
last={index === data.extras.items.length - 1}
|
||||
/>
|
||||
))}
|
||||
|
||||
<AddItem dispatch={dispatch} />
|
||||
</>
|
||||
);
|
||||
@ -57,6 +58,8 @@ const AddItem = ({ dispatch }) => {
|
||||
const onChange = (key, value) => setItem(items => set({ ...items }, key, value));
|
||||
|
||||
const addItem = () => {
|
||||
if (item.key === '' || item.value === '') return;
|
||||
|
||||
dispatch({
|
||||
type: 'add_item',
|
||||
payload: {
|
||||
@ -75,7 +78,7 @@ const AddItem = ({ dispatch }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border border-gray-200 rounded p-5">
|
||||
<div className="my-4 border border-gray-200 rounded p-5">
|
||||
<div
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() => setOpen(!isOpen)}
|
||||
@ -87,6 +90,7 @@ const AddItem = ({ dispatch }) => {
|
||||
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
|
||||
<TextField
|
||||
label="Key"
|
||||
className="mb-6"
|
||||
placeholder="Date of Birth"
|
||||
value={item.key}
|
||||
onChange={v => onChange('key', v)}
|
||||
@ -94,6 +98,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
<TextField
|
||||
label="Value"
|
||||
className="mb-6"
|
||||
placeholder="6th August 1995"
|
||||
value={item.value}
|
||||
onChange={v => onChange('value', v)}
|
||||
@ -102,7 +107,7 @@ const AddItem = ({ dispatch }) => {
|
||||
<button
|
||||
type="button"
|
||||
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">
|
||||
<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'}`}>
|
||||
<TextField
|
||||
label="Key"
|
||||
className="mb-6"
|
||||
placeholder="Date of Birth"
|
||||
value={item.key}
|
||||
onChange={v => onChange(`${identifier}.key`, v)}
|
||||
@ -165,6 +171,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
|
||||
<TextField
|
||||
label="Value"
|
||||
className="mb-6"
|
||||
placeholder="6th August 1995"
|
||||
value={item.value}
|
||||
onChange={v => onChange(`${identifier}.value`, v)}
|
||||
|
||||
@ -6,7 +6,7 @@ import Checkbox from '../../../shared/Checkbox';
|
||||
const ObjectiveTab = ({ data, onChange }) => {
|
||||
return (
|
||||
<div>
|
||||
<div className="grid grid-cols-6 items-center">
|
||||
<div className="mb-6 grid grid-cols-6 items-center">
|
||||
<div className="col-span-1">
|
||||
<Checkbox
|
||||
checked={data.objective.enable}
|
||||
@ -26,6 +26,7 @@ const ObjectiveTab = ({ data, onChange }) => {
|
||||
|
||||
<TextArea
|
||||
rows="15"
|
||||
className="mb-6"
|
||||
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."
|
||||
value={data.objective.body}
|
||||
|
||||
@ -4,7 +4,7 @@ import TextField from '../../../shared/TextField';
|
||||
const ProfileTab = ({ data, onChange }) => (
|
||||
<div>
|
||||
<TextField
|
||||
className="mb-4"
|
||||
className="mb-6"
|
||||
label="Photo URL"
|
||||
placeholder="https://i.imgur.com/..."
|
||||
value={data.profile.photo}
|
||||
@ -13,7 +13,7 @@ const ProfileTab = ({ data, onChange }) => (
|
||||
|
||||
<div className="grid grid-cols-2 col-gap-4">
|
||||
<TextField
|
||||
className="mb-4"
|
||||
className="mb-6"
|
||||
label="First Name"
|
||||
placeholder="Jane"
|
||||
value={data.profile.firstName}
|
||||
@ -21,7 +21,7 @@ const ProfileTab = ({ data, onChange }) => (
|
||||
/>
|
||||
|
||||
<TextField
|
||||
className="mb-4"
|
||||
className="mb-6"
|
||||
label="Last Name"
|
||||
placeholder="Doe"
|
||||
value={data.profile.lastName}
|
||||
@ -30,7 +30,7 @@ const ProfileTab = ({ data, onChange }) => (
|
||||
</div>
|
||||
|
||||
<TextField
|
||||
className="mb-4"
|
||||
className="mb-6"
|
||||
label="Subtitle"
|
||||
placeholder="Full Stack Web Developer"
|
||||
value={data.profile.subtitle}
|
||||
@ -40,7 +40,7 @@ const ProfileTab = ({ data, onChange }) => (
|
||||
<hr className="my-6" />
|
||||
|
||||
<TextField
|
||||
className="mb-4"
|
||||
className="mb-6"
|
||||
label="Address Line 1"
|
||||
placeholder="Palladium Complex"
|
||||
value={data.profile.address.line1}
|
||||
@ -48,7 +48,7 @@ const ProfileTab = ({ data, onChange }) => (
|
||||
/>
|
||||
|
||||
<TextField
|
||||
className="mb-4"
|
||||
className="mb-6"
|
||||
label="Address Line 2"
|
||||
placeholder="140 E 14th St"
|
||||
value={data.profile.address.line2}
|
||||
@ -56,7 +56,7 @@ const ProfileTab = ({ data, onChange }) => (
|
||||
/>
|
||||
|
||||
<TextField
|
||||
className="mb-4"
|
||||
className="mb-6"
|
||||
label="Address Line 3"
|
||||
placeholder="New York, NY 10003 USA"
|
||||
value={data.profile.address.line3}
|
||||
@ -66,7 +66,7 @@ const ProfileTab = ({ data, onChange }) => (
|
||||
<hr className="my-6" />
|
||||
|
||||
<TextField
|
||||
className="mb-4"
|
||||
className="mb-6"
|
||||
label="Phone Number"
|
||||
placeholder="+1 541 754 3010"
|
||||
value={data.profile.phone}
|
||||
@ -74,7 +74,7 @@ const ProfileTab = ({ data, onChange }) => (
|
||||
/>
|
||||
|
||||
<TextField
|
||||
className="mb-4"
|
||||
className="mb-6"
|
||||
label="Website"
|
||||
placeholder="google.com"
|
||||
value={data.profile.website}
|
||||
@ -82,7 +82,7 @@ const ProfileTab = ({ data, onChange }) => (
|
||||
/>
|
||||
|
||||
<TextField
|
||||
className="mb-4"
|
||||
className="mb-6"
|
||||
label="Email Address"
|
||||
placeholder="john.doe@example.com"
|
||||
value={data.profile.email}
|
||||
|
||||
@ -10,7 +10,7 @@ const SkillsTab = ({ data, onChange }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-6 items-center">
|
||||
<div className="my-6 grid grid-cols-6 items-center">
|
||||
<div className="col-span-1">
|
||||
<Checkbox
|
||||
checked={data.skills.enable}
|
||||
@ -31,6 +31,7 @@ const SkillsTab = ({ data, onChange }) => {
|
||||
{data.skills.items.map((x, index) => (
|
||||
<Item item={x} key={x} index={index} onChange={onChange} dispatch={dispatch} />
|
||||
))}
|
||||
|
||||
<AddItem dispatch={dispatch} />
|
||||
</>
|
||||
);
|
||||
@ -41,6 +42,8 @@ const AddItem = ({ dispatch }) => {
|
||||
const [item, setItem] = useState('');
|
||||
|
||||
const addItem = () => {
|
||||
if (item === '') return;
|
||||
|
||||
dispatch({
|
||||
type: 'add_item',
|
||||
payload: {
|
||||
@ -54,7 +57,7 @@ const AddItem = ({ dispatch }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-4 border border-gray-200 rounded p-5">
|
||||
<div className="my-4 border border-gray-200 rounded p-5">
|
||||
<div
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() => setOpen(!isOpen)}
|
||||
@ -64,7 +67,7 @@ const AddItem = ({ dispatch }) => {
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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"
|
||||
@ -103,7 +106,7 @@ const Item = ({ item, index, onChange, dispatch }) => {
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="mt-4 grid grid-cols-6">
|
||||
<div className="my-4 grid grid-cols-6">
|
||||
<div className="col-span-5">
|
||||
<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"
|
||||
|
||||
@ -13,7 +13,7 @@ const WorkTab = ({ data, onChange }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-6 items-center">
|
||||
<div className="mb-6 grid grid-cols-6 items-center">
|
||||
<div className="col-span-1">
|
||||
<Checkbox checked={data.work.enable} onChange={v => onChange('data.work.enable', v)} />
|
||||
</div>
|
||||
@ -39,6 +39,7 @@ const WorkTab = ({ data, onChange }) => {
|
||||
last={index === data.work.items.length - 1}
|
||||
/>
|
||||
))}
|
||||
|
||||
<AddItem dispatch={dispatch} />
|
||||
</>
|
||||
);
|
||||
@ -58,6 +59,8 @@ const AddItem = ({ dispatch }) => {
|
||||
const onChange = (key, value) => setItem(set({ ...item }, key, value));
|
||||
|
||||
const addItem = () => {
|
||||
if (item.title === '' || item.role === '') return;
|
||||
|
||||
dispatch({
|
||||
type: 'add_item',
|
||||
payload: {
|
||||
@ -79,7 +82,7 @@ const AddItem = ({ dispatch }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border border-gray-200 rounded p-5">
|
||||
<div className="my-4 border border-gray-200 rounded p-5">
|
||||
<div
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() => setOpen(!isOpen)}
|
||||
@ -91,6 +94,7 @@ const AddItem = ({ dispatch }) => {
|
||||
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
|
||||
<TextField
|
||||
label="Name"
|
||||
className="mb-6"
|
||||
placeholder="Amazon US"
|
||||
value={item.title}
|
||||
onChange={v => onChange('title', v)}
|
||||
@ -98,6 +102,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
<TextField
|
||||
label="Role"
|
||||
className="mb-6"
|
||||
placeholder="Frontend Web Developer"
|
||||
value={item.role}
|
||||
onChange={v => onChange('role', v)}
|
||||
@ -106,6 +111,7 @@ const AddItem = ({ dispatch }) => {
|
||||
<div className="grid grid-cols-2 col-gap-4">
|
||||
<TextField
|
||||
label="Start Date"
|
||||
className="mb-6"
|
||||
placeholder="March 2018"
|
||||
value={item.start}
|
||||
onChange={v => onChange('start', v)}
|
||||
@ -113,6 +119,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
<TextField
|
||||
label="End Date"
|
||||
className="mb-6"
|
||||
placeholder="current"
|
||||
value={item.end}
|
||||
onChange={v => onChange('end', v)}
|
||||
@ -121,6 +128,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
<TextArea
|
||||
rows="5"
|
||||
className="mb-6"
|
||||
label="Description"
|
||||
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}
|
||||
@ -130,7 +138,7 @@ const AddItem = ({ dispatch }) => {
|
||||
<button
|
||||
type="button"
|
||||
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">
|
||||
<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'}`}>
|
||||
<TextField
|
||||
label="Name"
|
||||
className="mb-6"
|
||||
placeholder="Amazon US"
|
||||
value={item.title}
|
||||
onChange={v => onChange(`${identifier}.title`, v)}
|
||||
@ -193,6 +202,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
|
||||
<TextField
|
||||
label="Role"
|
||||
className="mb-6"
|
||||
placeholder="Frontend Web Developer"
|
||||
value={item.role}
|
||||
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">
|
||||
<TextField
|
||||
label="Start Date"
|
||||
className="mb-6"
|
||||
placeholder="March 2018"
|
||||
value={item.start}
|
||||
onChange={v => onChange(`${identifier}.start`, v)}
|
||||
@ -208,6 +219,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
|
||||
<TextField
|
||||
label="End Date"
|
||||
className="mb-6"
|
||||
placeholder="current"
|
||||
value={item.end}
|
||||
onChange={v => onChange(`${identifier}.end`, v)}
|
||||
@ -216,13 +228,14 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
|
||||
<TextArea
|
||||
rows="5"
|
||||
className="mb-6"
|
||||
label="Description"
|
||||
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}
|
||||
onChange={v => onChange(`${identifier}.description`, v)}
|
||||
/>
|
||||
|
||||
<div className="mt-6 flex justify-between">
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={deleteItem}
|
||||
|
||||
@ -18,19 +18,16 @@ body {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
#tabs::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
background: transparent; /* make scrollbar transparent */
|
||||
}
|
||||
|
||||
#tabs li:first-child {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
#tabs li:last-child {
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
#page {
|
||||
width: 21cm;
|
||||
height: 29.7cm;
|
||||
|
||||
@ -1,27 +1,58 @@
|
||||
import React from 'react';
|
||||
import React, { useRef } from 'react';
|
||||
|
||||
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 (
|
||||
<ul id="tabs" className="my-4 flex items-center overflow-x-scroll">
|
||||
{tabs.map(tab =>
|
||||
currentTab === tab ? (
|
||||
<li key={tab} className="mx-1">
|
||||
<div className="whitespace-no-wrap bg-gray-700 text-white rounded-md text-sm py-2 px-6 font-medium">
|
||||
{tab}
|
||||
</div>
|
||||
</li>
|
||||
) : (
|
||||
<li key={tab} className="mx-1">
|
||||
<div
|
||||
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="my-6 mx-4 flex items-center">
|
||||
<div
|
||||
className="flex mr-1 cursor-pointer select-none text-gray-600 hover:text-gray-800"
|
||||
onClick={() => scrollBy(-100)}
|
||||
>
|
||||
<i className="material-icons">chevron_left</i>
|
||||
</div>
|
||||
|
||||
<ul id="tabs" ref={tabsRef} className="flex overflow-x-scroll">
|
||||
{tabs.map(tab =>
|
||||
currentTab === tab ? (
|
||||
<li key={tab} className="mx-1">
|
||||
<div className="whitespace-no-wrap bg-gray-700 text-white rounded-md text-sm py-2 px-6 font-medium">
|
||||
{tab}
|
||||
</div>
|
||||
</li>
|
||||
) : (
|
||||
<li key={tab} className="mx-1">
|
||||
<div
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user