mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-07-24 17:03:55 +10:00
feat: adding a toggle switch for left panel items
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import React, { memo, useContext } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import PageContext from '../../../contexts/PageContext';
|
||||
import { formatDate, safetyCheck } from '../../../utils';
|
||||
import { formatDate, safetyCheck, isItemVisible } from '../../../utils';
|
||||
|
||||
const AwardItem = ({ item, language }) => (
|
||||
<div>
|
||||
@@ -29,9 +29,16 @@ const AwardsA = () => {
|
||||
<div>
|
||||
<Heading>{data.awards.heading}</Heading>
|
||||
<div className="grid gap-4">
|
||||
{data.awards.items.map((x) => (
|
||||
<AwardItem key={x.id} item={x} language={data.metadata.language} />
|
||||
))}
|
||||
{data.awards.items.map(
|
||||
(x) =>
|
||||
isItemVisible(x) && (
|
||||
<AwardItem
|
||||
key={x.id}
|
||||
item={x}
|
||||
language={data.metadata.language}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { memo, useContext } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import PageContext from '../../../contexts/PageContext';
|
||||
import { formatDate, safetyCheck } from '../../../utils';
|
||||
import { formatDate, safetyCheck, isItemVisible } from '../../../utils';
|
||||
|
||||
const CertificationItem = ({ item, language }) => (
|
||||
<div>
|
||||
@@ -29,13 +29,16 @@ const CertificationsA = () => {
|
||||
<div>
|
||||
<Heading>{data.certifications.heading}</Heading>
|
||||
<div className="grid gap-4">
|
||||
{data.certifications.items.map((x) => (
|
||||
<CertificationItem
|
||||
key={x.id}
|
||||
item={x}
|
||||
language={data.metadata.language}
|
||||
/>
|
||||
))}
|
||||
{data.certifications.items.map(
|
||||
(x) =>
|
||||
isItemVisible(x) && (
|
||||
<CertificationItem
|
||||
key={x.id}
|
||||
item={x}
|
||||
language={data.metadata.language}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, { memo, useContext } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import PageContext from '../../../contexts/PageContext';
|
||||
import { formatDateRange, safetyCheck } from '../../../utils';
|
||||
import { formatDateRange, safetyCheck, isItemVisible } from '../../../utils';
|
||||
|
||||
const EducationItem = ({ item, language }) => {
|
||||
const { t } = useTranslation();
|
||||
@@ -50,13 +50,16 @@ const EducationA = () => {
|
||||
<div>
|
||||
<Heading>{data.education.heading}</Heading>
|
||||
<div className="grid gap-4">
|
||||
{data.education.items.map((x) => (
|
||||
<EducationItem
|
||||
key={x.id}
|
||||
item={x}
|
||||
language={data.metadata.language}
|
||||
/>
|
||||
))}
|
||||
{data.education.items.map(
|
||||
(x) =>
|
||||
isItemVisible(x) && (
|
||||
<EducationItem
|
||||
key={x.id}
|
||||
item={x}
|
||||
language={data.metadata.language}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { memo, useContext } from 'react';
|
||||
import PageContext from '../../../contexts/PageContext';
|
||||
import { safetyCheck } from '../../../utils';
|
||||
import { safetyCheck, isItemVisible } from '../../../utils';
|
||||
|
||||
const HobbyA = (x) => (
|
||||
<div key={x.id}>
|
||||
@@ -14,7 +14,9 @@ const HobbiesA = () => {
|
||||
return safetyCheck(data.hobbies) ? (
|
||||
<div>
|
||||
<Heading>{data.hobbies.heading}</Heading>
|
||||
<div className="grid gap-2">{data.hobbies.items.map(HobbyA)}</div>
|
||||
<div className="grid gap-2">
|
||||
{data.hobbies.items.map((x) => isItemVisible(x) && HobbyA(x))}
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { memo, useContext } from 'react';
|
||||
import PageContext from '../../../contexts/PageContext';
|
||||
import { safetyCheck } from '../../../utils';
|
||||
import { safetyCheck, isItemVisible } from '../../../utils';
|
||||
|
||||
const LanguageItem = (x) => (
|
||||
<div key={x.id} className="flex flex-col">
|
||||
@@ -16,7 +16,7 @@ const LanguagesA = () => {
|
||||
<div>
|
||||
<Heading>{data.languages.heading}</Heading>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{data.languages.items.map(LanguageItem)}
|
||||
{data.languages.items.map((x) => isItemVisible(x) && LanguageItem(x))}
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { memo, useContext } from 'react';
|
||||
import PageContext from '../../../contexts/PageContext';
|
||||
import { safetyCheck } from '../../../utils';
|
||||
import { safetyCheck, isItemVisible } from '../../../utils';
|
||||
|
||||
const LanguageItem = (x) => (
|
||||
<div key={x.id} className="flex flex-col">
|
||||
@@ -15,7 +15,9 @@ const LanguagesB = () => {
|
||||
return safetyCheck(data.languages) ? (
|
||||
<div>
|
||||
<Heading>{data.languages.heading}</Heading>
|
||||
<div className="grid gap-2">{data.languages.items.map(LanguageItem)}</div>
|
||||
<div className="grid gap-2">
|
||||
{data.languages.items.map((x) => isItemVisible(x) && LanguageItem(x))}
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
};
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, { memo, useContext } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import PageContext from '../../../contexts/PageContext';
|
||||
import { formatDateRange, safetyCheck } from '../../../utils';
|
||||
import { formatDateRange, isItemVisible, safetyCheck } from '../../../utils';
|
||||
|
||||
const ProjectItem = ({ item, language }) => {
|
||||
const { t } = useTranslation();
|
||||
@@ -49,9 +49,16 @@ const ProjectsA = () => {
|
||||
<div>
|
||||
<Heading>{data.projects.heading}</Heading>
|
||||
<div className="grid gap-4">
|
||||
{data.projects.items.map((x) => (
|
||||
<ProjectItem key={x.id} item={x} language={data.metadata.language} />
|
||||
))}
|
||||
{data.projects.items.map(
|
||||
(x) =>
|
||||
isItemVisible(x) && (
|
||||
<ProjectItem
|
||||
key={x.id}
|
||||
item={x}
|
||||
language={data.metadata.language}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { memo, useContext } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import PageContext from '../../../contexts/PageContext';
|
||||
import { safetyCheck } from '../../../utils';
|
||||
import { isItemVisible, safetyCheck } from '../../../utils';
|
||||
|
||||
const ReferenceItem = (x) => (
|
||||
<div key={x.id} className="flex flex-col">
|
||||
@@ -22,7 +22,7 @@ const ReferencesA = () => {
|
||||
<div>
|
||||
<Heading>{data.references.heading}</Heading>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{data.references.items.map(ReferenceItem)}
|
||||
{data.references.items.map((x) => isItemVisible(x) && ReferenceItem(x))}
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { memo, useContext } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import PageContext from '../../../contexts/PageContext';
|
||||
import { safetyCheck } from '../../../utils';
|
||||
import { isItemVisible, safetyCheck } from '../../../utils';
|
||||
|
||||
const ReferenceItem = (x) => (
|
||||
<div key={x.id} className="flex flex-col">
|
||||
@@ -22,7 +22,7 @@ const ReferencesB = () => {
|
||||
<div>
|
||||
<Heading>{data.references.heading}</Heading>
|
||||
<div className="grid gap-4">
|
||||
{data.references.items.map(ReferenceItem)}
|
||||
{data.references.items.map((x) => isItemVisible(x) && ReferenceItem(x))}
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { memo, useContext } from 'react';
|
||||
import PageContext from '../../../contexts/PageContext';
|
||||
import { safetyCheck } from '../../../utils';
|
||||
import { safetyCheck, isItemVisible } from '../../../utils';
|
||||
|
||||
const SkillItem = (x) => (
|
||||
<div key={x.id} className="flex flex-col">
|
||||
@@ -16,7 +16,7 @@ const SkillsA = () => {
|
||||
<div>
|
||||
<Heading>{data.skills.heading}</Heading>
|
||||
<div className="grid grid-cols-2 gap-y-2 gap-x-4">
|
||||
{data.skills.items.map(SkillItem)}
|
||||
{data.skills.items.map((x) => isItemVisible(x) && SkillItem(x))}
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { memo, useContext } from 'react';
|
||||
import PageContext from '../../../contexts/PageContext';
|
||||
import { safetyCheck } from '../../../utils';
|
||||
import { safetyCheck, isItemVisible } from '../../../utils';
|
||||
|
||||
const SkillItem = (x) => (
|
||||
<li key={x.id} className="text-sm py-1">
|
||||
@@ -14,7 +14,7 @@ const SkillsA = () => {
|
||||
return safetyCheck(data.skills) ? (
|
||||
<div>
|
||||
<Heading>{data.skills.heading}</Heading>
|
||||
<ul>{data.skills.items.map(SkillItem)}</ul>
|
||||
<ul>{data.skills.items.map((x) => isItemVisible(x) && SkillItem(x))}</ul>
|
||||
</div>
|
||||
) : null;
|
||||
};
|
||||
|
||||
@@ -2,7 +2,12 @@ import React, { memo, useContext } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import PageContext from '../../../contexts/PageContext';
|
||||
import { formatDateRange, safetyCheck } from '../../../utils';
|
||||
import {
|
||||
formatDateRange,
|
||||
safetyCheck,
|
||||
isItemVisible,
|
||||
genericFilter,
|
||||
} from '../../../utils';
|
||||
|
||||
const WorkItem = ({ item, language }) => {
|
||||
const { t } = useTranslation();
|
||||
@@ -40,14 +45,16 @@ const WorkItem = ({ item, language }) => {
|
||||
|
||||
const WorkA = () => {
|
||||
const { data, heading: Heading } = useContext(PageContext);
|
||||
|
||||
return safetyCheck(data.work) ? (
|
||||
<div>
|
||||
<Heading>{data.work.heading}</Heading>
|
||||
<div className="grid gap-4">
|
||||
{data.work.items.map((x) => (
|
||||
<WorkItem key={x.id} item={x} language={data.metadata.language} />
|
||||
))}
|
||||
{data.work.items.map(
|
||||
(x) =>
|
||||
isItemVisible(x) && (
|
||||
<WorkItem key={x.id} item={x} language={data.metadata.language} />
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
Reference in New Issue
Block a user