Skip to content

Commit b83e5a3

Browse files
realstomanrealstoman
committed
Create all context
1 parent 1ef03b4 commit b83e5a3

10 files changed

+351
-64
lines changed

‎src/components/about/AboutClients.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1+
import { useContext } from 'react';
2+
import AboutMeContext from '../../context/AboutMeContext';
13
import AboutClientSingle from './AboutClientSingle';
2-
import { ClientsData, ClientsHeading } from '../../utils/ClientsData';
34

45
const AboutClients = () => {
6+
const { clientsData, clientsHeading } = useContext(AboutMeContext);
7+
58
return (
69
<div className="mt-10 sm:mt-20">
710
<p className="text-2xl sm:text-4xl text-primary-dark dark:text-primary-light font-sans font-semibold">
8-
{ClientsHeading}
11+
{clientsHeading}
912
</p>
1013
<div className="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-20 gap-2">
11-
{ClientsData.map((client) => (
14+
{clientsData.map((client) => (
1215
<AboutClientSingle
1316
title={client.title}
1417
image={client.img}

‎src/components/about/AboutMeBio.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import profileImage from '../../images/profile.jpeg';
2-
import { AboutMeData } from '../../utils/AboutMeData';
2+
import { useContext } from 'react';
3+
import AboutMeContext from '../../context/AboutMeContext';
34

45
const AboutMeBio = () => {
6+
const { aboutMe } = useContext(AboutMeContext);
7+
58
return (
69
<div className="block sm:flex sm:gap-10 mt-10 sm:mt-20">
710
{/* About me portfolio image start */}
@@ -12,7 +15,7 @@ const AboutMeBio = () => {
1215

1316
{/* About me details start */}
1417
<div className="w-full sm:w-3/4 text-left">
15-
{AboutMeData.map((bio) => (
18+
{aboutMe.map((bio) => (
1619
<p
1720
className="mb-4 text-ternary-dark dark:text-ternary-light text-lg"
1821
key={bio.id}

‎src/components/projects/ProjectGallery.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
import { ProjectImages } from '../../utils/SingleProjectData';
1+
import { useContext } from 'react';
2+
import SingleProjectContext from '../../context/SingleProjectContext';
23

34
const ProjectGallery = () => {
5+
const { singleProjectData } = useContext(SingleProjectContext);
6+
47
return (
58
<div className="grid grid-cols-1 sm:grid-cols-3 sm:gap-10 mt-12">
6-
{ProjectImages.map((project) => {
9+
{singleProjectData.ProjectImages.map((project) => {
710
return (
811
<div className="mb-10 sm:mb-0" key={project.id}>
912
<img

‎src/components/projects/ProjectHeader.js

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,26 @@
1+
import { useContext } from 'react';
12
import { FiClock, FiTag } from 'react-icons/fi';
2-
import { ProjectHeader } from '../../utils/SingleProjectData';
3+
import SingleProjectContext from '../../context/SingleProjectContext';
34

45
const ProjectSingleHeader = () => {
6+
const { singleProjectData } = useContext(SingleProjectContext);
7+
58
return (
69
<div>
710
<p className="text-left text-3xl sm:text-4xl font-bold text-primary-dark dark:text-primary-light mt-7 sm:mt-20 mb-7">
8-
{ProjectHeader.title}
11+
{singleProjectData.ProjectHeader.title}
912
</p>
1013
<div className="flex">
1114
<div className="flex items-center mr-10">
1215
<FiClock className="text-xl text-ternary-dark dark:text-ternary-light" />
1316
<span className="ml-2 leading-none text-primary-dark dark:text-primary-light">
14-
{ProjectHeader.publishDate}
17+
{singleProjectData.ProjectHeader.publishDate}
1518
</span>
1619
</div>
1720
<div className="flex items-center">
1821
<FiTag className="w-4 h-4 text-ternary-dark dark:text-ternary-light" />
1922
<span className="ml-2 leading-none text-primary-dark dark:text-primary-light">
20-
{ProjectHeader.tags}
23+
{singleProjectData.ProjectHeader.tags}
2124
</span>
2225
</div>
2326
</div>

‎src/components/projects/ProjectInfo.js

+54-45
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,94 @@
1+
import { useContext } from 'react';
12
import { Link } from 'react-router-dom';
2-
import { ProjectInfo as ProjectsData } from '../../utils/SingleProjectData';
3+
import SingleProjectContext from '../../context/SingleProjectContext';
34

45
const ProjectInfo = () => {
6+
const { singleProjectData } = useContext(SingleProjectContext);
7+
58
return (
69
<div className="block sm:flex gap-0 sm:gap-10 mt-14">
710
<div className="w-full sm:w-1/3 text-left">
811
{/* Single project client details start */}
912
<div className="mb-7">
1013
<p className="text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-2">
11-
{ProjectsData.ClientHeading}
14+
{singleProjectData.ProjectInfo.ClientHeading}
1215
</p>
1316
<ul className="leading-loose">
14-
{ProjectsData.CompanyInfo.map((info) => {
15-
return (
16-
<li
17-
className="text-ternary-dark dark:text-ternary-light"
18-
key={info.id}
19-
>
20-
<span>{info.title}: </span>
21-
<a
22-
href="https://stoman.me"
23-
className={
24-
info.title === 'Website' ||
25-
info.title === 'Phone'
26-
? 'hover:underline cursor-pointer'
27-
: ''
28-
}
29-
aria-label="Project Website and Phone"
17+
{singleProjectData.ProjectInfo.CompanyInfo.map(
18+
(info) => {
19+
return (
20+
<li
21+
className="text-ternary-dark dark:text-ternary-light"
22+
key={info.id}
3023
>
31-
{info.details}
32-
</a>
33-
</li>
34-
);
35-
})}
24+
<span>{info.title}: </span>
25+
<a
26+
href="https://stoman.me"
27+
className={
28+
info.title === 'Website' ||
29+
info.title === 'Phone'
30+
? 'hover:underline cursor-pointer'
31+
: ''
32+
}
33+
aria-label="Project Website and Phone"
34+
>
35+
{info.details}
36+
</a>
37+
</li>
38+
);
39+
}
40+
)}
3641
</ul>
3742
</div>
3843
{/* Single project client details end */}
3944

4045
{/* Single project objectives start */}
4146
<div className="mb-7">
4247
<p className="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
43-
{ProjectsData.ObjectivesHeading}
48+
{singleProjectData.ProjectInfo.ObjectivesHeading}
4449
</p>
4550
<p className="text-primary-dark dark:text-ternary-light">
46-
{ProjectsData.ObjectivesDetails}
51+
{singleProjectData.ProjectInfo.ObjectivesDetails}
4752
</p>
4853
</div>
4954
{/* Single project objectives end */}
5055

5156
{/* Single project technologies start */}
5257
<div className="mb-7">
5358
<p className="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
54-
{ProjectsData.Technologies[0].title}
59+
{singleProjectData.ProjectInfo.Technologies[0].title}
5560
</p>
5661
<p className="text-primary-dark dark:text-ternary-light">
57-
{ProjectsData.Technologies[0].techs.join(', ')}
62+
{singleProjectData.ProjectInfo.Technologies[0].techs.join(
63+
', '
64+
)}
5865
</p>
5966
</div>
6067
{/* Single project technologies end */}
6168

6269
{/* Single project social sharing start */}
6370
<div>
6471
<p className="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
65-
{ProjectsData.SocialSharingHeading}
72+
{singleProjectData.ProjectInfo.SocialSharingHeading}
6673
</p>
6774
<div className="flex items-center gap-3 mt-5">
68-
{ProjectsData.SocialSharing.map((social) => {
69-
return (
70-
<Link
71-
key={social.id}
72-
to={social.url}
73-
target="__blank"
74-
aria-label="Share Project"
75-
className="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm"
76-
>
77-
<span className="text-lg lg:text-2xl">
78-
{social.icon}
79-
</span>
80-
</Link>
81-
);
82-
})}
75+
{singleProjectData.ProjectInfo.SocialSharing.map(
76+
(social) => {
77+
return (
78+
<Link
79+
key={social.id}
80+
to={social.url}
81+
target="__blank"
82+
aria-label="Share Project"
83+
className="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm"
84+
>
85+
<span className="text-lg lg:text-2xl">
86+
{social.icon}
87+
</span>
88+
</Link>
89+
);
90+
}
91+
)}
8392
</div>
8493
</div>
8594
{/* Single project social sharing end */}
@@ -89,9 +98,9 @@ const ProjectInfo = () => {
8998
{/* Single project right section details start */}
9099
<div className="w-full sm:w-2/3 text-left mt-10 sm:mt-0">
91100
<p className="text-primary-dark dark:text-primary-light text-2xl font-bold mb-7">
92-
{ProjectsData.ProjectDetailsHeading}
101+
{singleProjectData.ProjectInfo.ProjectDetailsHeading}
93102
</p>
94-
{ProjectsData.ProjectDetails.map((details) => {
103+
{singleProjectData.ProjectInfo.ProjectDetails.map((details) => {
95104
return (
96105
<p
97106
key={details.id}

‎src/components/projects/ProjectRelatedProjects.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1-
import { RelatedProject } from '../../utils/SingleProjectData';
1+
import { useContext } from 'react';
2+
import SingleProjectContext from '../../context/SingleProjectContext';
23

34
const ProjectRelatedProjects = () => {
5+
const { singleProjectData } = useContext(SingleProjectContext);
6+
47
return (
58
<div className="mt-10 pt-10 sm:pt-14 sm:mt-20 border-t-2 border-primary-light dark:border-secondary-dark">
69
<p className="text-primary-dark dark:text-primary-light text-3xl font-bold mb-10 sm:mb-14 text-left">
7-
{RelatedProject.title}
10+
{singleProjectData.RelatedProject.title}
811
</p>
912

1013
<div className="grid grid-cols-1 sm:grid-cols-4 gap-10">
11-
{RelatedProject.Projects.map((project) => {
14+
{singleProjectData.RelatedProject.Projects.map((project) => {
1215
return (
1316
<img
1417
src={project.img}

‎src/context/AboutMeContext.js

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { useState, createContext } from 'react';
2+
3+
import AmazonImage from '../images/brands/amazon_gray.png';
4+
import SonyImage from '../images/brands/sony_gray.png';
5+
import AdidasImage from '../images/brands/adidas_gray.png';
6+
import FilaImage from '../images/brands/fila_gray.png';
7+
import NBImage from '../images/brands/nb_gray.png';
8+
import SamsungImage from '../images/brands/samsung_gray.png';
9+
import CanonImage from '../images/brands/canon_gray.png';
10+
import PumaImage from '../images/brands/puma_gray.png';
11+
12+
const AboutMeContext = createContext();
13+
14+
export const AboutMeProvider = ({ children }) => {
15+
const [aboutMe, setAboutMe] = useState([
16+
{
17+
id: 1,
18+
bio: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt totam dolorum, ducimus obcaecati, voluptas facilis molestias nobis ut quam natus similique inventore excepturi optio ipsa deleniti fugit illo. Unde, amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo necessitatibus perspiciatis! Aperiam perferendis labore temporibus, eos culpa corporis recusandae quas, fuga voluptatibus nesciunt odit libero tenetur neque consequatur ea.',
19+
},
20+
{
21+
id: 2,
22+
bio: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta?',
23+
},
24+
]);
25+
26+
const clientsHeading = 'Some of the brands I worked with';
27+
28+
const [clientsData, setClientsData] = useState([
29+
{
30+
id: 1,
31+
title: 'Amazon',
32+
img: AmazonImage,
33+
},
34+
{
35+
id: 2,
36+
title: 'Sony',
37+
img: SonyImage,
38+
},
39+
{
40+
id: 3,
41+
title: 'Adidas',
42+
img: AdidasImage,
43+
},
44+
{
45+
id: 4,
46+
title: 'FILA',
47+
img: FilaImage,
48+
},
49+
{
50+
id: 5,
51+
title: 'NB',
52+
img: NBImage,
53+
},
54+
{
55+
id: 6,
56+
title: 'SAMSUNG',
57+
img: SamsungImage,
58+
},
59+
{
60+
id: 7,
61+
title: 'CANON',
62+
img: CanonImage,
63+
},
64+
{
65+
id: 8,
66+
title: 'PUMA',
67+
img: PumaImage,
68+
},
69+
]);
70+
71+
return (
72+
<AboutMeContext.Provider
73+
value={{
74+
aboutMe,
75+
setAboutMe,
76+
clientsHeading,
77+
clientsData,
78+
setClientsData,
79+
}}
80+
>
81+
{children}
82+
</AboutMeContext.Provider>
83+
);
84+
};
85+
86+
export default AboutMeContext;

0 commit comments

Comments
 (0)