Fix issue with components

Author: realstoman

src/App.js

@@ -1,20 +1,20 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import './css/App.css';
-import AppHeader from './components/shared/AppHeader';
+import ScrollToTop from './components/ScrollToTop';
 import AppFooter from './components/shared/AppFooter';
-import Home from './pages/Home';
+import AppHeader from './components/shared/AppHeader';
+import './css/App.css';
 import About from './pages/AboutMe';
-import Projects from './pages/Projects';
 import Contact from './pages/Contact';
+import Home from './pages/Home';
+import Projects from './pages/Projects';
 import ProjectSingle from './pages/ProjectSingle';
-import ScrollToTop from './components/ScrollToTop';
 
 function App() {
 	return (
 		<div className=" bg-secondary-light dark:bg-primary-dark transition duration-300">
 			<Router>
 				<ScrollToTop />
-				<AppHeader></AppHeader>
+				<AppHeader />
 				<Routes>
 					<Route path="/" element={<Home />} />
 					<Route path="projects" element={<Projects />} />
@@ -26,7 +26,7 @@ function App() {
 					<Route path="about" element={<About />} />
 					<Route path="contact" element={<Contact />} />
 				</Routes>
-				<AppFooter></AppFooter>
+				<AppFooter />
 			</Router>
 		</div>
 	);

src/components/BackToTop.jsx renamed to src/components/BackToTop.js

@@ -1,4 +1,4 @@
-import profileImage from '../images/profile.jpeg';
+import profileImage from '../../images/profile.jpeg';
 import { AboutMeData } from '../../utils/AboutMeData';
 
 const AboutMeBio = () => {

src/components/HireMeModal.jsx renamed to src/components/HireMeModal.js

@@ -1,4 +1,4 @@
-import { ProjectImages } from '../utils/SingleProjectData';
+import { ProjectImages } from '../../utils/SingleProjectData';
 
 const ProjectGallery = () => {
 	return (

src/components/ScrollToTop.jsx renamed to src/components/ScrollToTop.js

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { ProjectInfo as ProjectsData } from '../utils/SingleProjectData';
+import { ProjectInfo as ProjectsData } from '../../utils/SingleProjectData';
 
 const ProjectInfo = () => {
 	return (

src/components/about/AboutClientSingle.jsx renamed to src/components/about/AboutClientSingle.js

@@ -1,4 +1,4 @@
-import { RelatedProject } from '../utils/SingleProjectData';
+import { RelatedProject } from '../../utils/SingleProjectData';
 
 const ProjectRelatedProjects = () => {
 	return (

src/components/about/AboutClients.jsx renamed to src/components/about/AboutClients.js

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
-import ProjectSingle from './ProjectSingle';
 import { FiSearch } from 'react-icons/fi';
-import { ProjectsContext } from '../context/ProjectsContext';
+import ProjectSingle from './ProjectSingle';
+import { ProjectsContext } from '../../context/ProjectsContext';
 import ProjectsFilter from './ProjectsFilter';
 
 const ProjectsGrid = () => {

src/components/about/AboutCounter.jsx renamed to src/components/about/AboutCounter.js

@@ -1,7 +1,7 @@
 import useThemeSwitcher from '../../hooks/useThemeSwitcher';
 import { FiArrowDownCircle } from 'react-icons/fi';
-import developerLight from '../images/developer.svg';
-import developerDark from '../images/developer-dark.svg';
+import developerLight from '../../images/developer.svg';
+import developerDark from '../../images/developer-dark.svg';
 
 const AppBanner = () => {
 	const [activeTheme] = useThemeSwitcher();

src/components/about/AboutMeBio.jsx renamed to src/components/about/AboutMeBio.js

@@ -3,8 +3,8 @@ import { FiMenu, FiMoon, FiSun, FiX } from 'react-icons/fi';
 import { Link } from 'react-router-dom';
 import useThemeSwitcher from '../../hooks/useThemeSwitcher';
 import HireMeModal from '../HireMeModal';
-import logoLight from '../images/logo-light.svg';
-import logoDark from '../images/logo-dark.svg';
+import logoLight from '../../images/logo-light.svg';
+import logoDark from '../../images/logo-dark.svg';
 
 const AppHeader = () => {
 	const [showMenu, setShowMenu] = useState(false);

src/components/contact/ContactDetails.jsx renamed to src/components/contact/ContactDetails.js

@@ -1,6 +1,6 @@
-import AboutClients from '../components/about/AboutClients';
-import AboutCounter from '../components/about/AboutCounter';
 import AboutMeBio from '../components/about/AboutMeBio';
+import AboutCounter from '../components/about/AboutCounter';
+import AboutClients from '../components/about/AboutClients.js';
 
 const About = () => {
 	return (

src/components/contact/ContactForm.jsx renamed to src/components/contact/ContactForm.js

@@ -1,7 +1,7 @@
 import { Link } from 'react-router-dom';
 import AppBanner from '../components/shared/AppBanner';
-import ProjectsGrid from '../components/ProjectsGrid';
-import { ProjectsProvider } from '../store/ProjectsContext';
+import ProjectsGrid from '../components/projects/ProjectsGrid';
+import { ProjectsProvider } from '../context/ProjectsContext';
 
 const Home = () => {
 	return (

src/components/projects/ProjectGallery.jsx renamed to src/components/projects/ProjectGallery.js

@@ -0,0 +1,20 @@
+import ProjectGallery from '../components/projects/ProjectGallery';
+import ProjectHeader from '../components/projects//ProjectHeader';
+import ProjectInfo from '../components/projects/ProjectInfo';
+import ProjectRelatedProjects from '../components/projects/ProjectRelatedProjects';
+import { ProjectsProvider } from '../context/ProjectsContext';
+
+const ProjectSingle = () => {
+	return (
+		<div className="container mx-auto mt-5 sm:mt-10">
+			<ProjectsProvider>
+				<ProjectHeader />
+				<ProjectGallery />
+				<ProjectInfo />
+				<ProjectRelatedProjects />
+			</ProjectsProvider>
+		</div>
+	);
+};
+
+export default ProjectSingle;

src/components/projects/ProjectHeader.jsx renamed to src/components/projects/ProjectHeader.js

@@ -1,5 +1,5 @@
-import ProjectsGrid from '../components/ProjectsGrid';
-import { ProjectsProvider } from '../store/ProjectsContext';
+import ProjectsGrid from '../components/projects/ProjectsGrid';
+import { ProjectsProvider } from '../context/ProjectsContext';
 
 const Projects = () => {
 	return (