Project header data

Author: realstoman

src/components/ProjectGallery.js

@@ -0,0 +1,15 @@
+const ProjectGallery = () => {
+	return (
+		<div class="grid grid-cols-1 sm:grid-cols-3 sm:gap-10 mt-12">
+			<div class="mb-10 sm:mb-0">
+				<img
+					src=""
+					class="rounded-2xl cursor-pointer shadow-lg sm:shadow-none"
+					alt=""
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default ProjectGallery;

src/components/ProjectSingleHeader.js

@@ -0,0 +1,33 @@
+import { singleProjectHeader } from '../utils/SingleProjectData';
+
+const ProjectSingleHeader = () => {
+	return (
+		<div>
+			<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">
+				{singleProjectHeader.title}
+			</p>
+			<div className="flex">
+				<div className="flex items-center mr-10">
+					<i
+						data-feather="clock"
+						className="w-4 h-4 text-ternary-dark dark:text-ternary-light"
+					></i>
+					<span className="ml-2 leading-none text-primary-dark dark:text-primary-light">
+						{singleProjectHeader.publishDate}
+					</span>
+				</div>
+				<div className="flex items-center">
+					<i
+						data-feather="tag"
+						className="w-4 h-4 text-ternary-dark dark:text-ternary-light"
+					></i>
+					<span className="ml-2 leading-none text-primary-dark dark:text-primary-light">
+						{singleProjectHeader.tags}
+					</span>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default ProjectSingleHeader;

src/pages/ProjectSingle.js

@@ -1,7 +1,9 @@
+import ProjectSingleHeader from '../components/ProjectSingleHeader';
+
 const ProjectSingle = () => {
 	return (
-		<div className="container mx-auto sm:flex py-5 sm:py-10 mt-5 sm:mt-10">
-			<h1>This is the single page</h1>
+		<div className="container mx-auto mt-5 sm:mt-10">
+			<ProjectSingleHeader />
 		</div>
 	);
 };

src/utils/ProjectsData.js

@@ -32,7 +32,7 @@ export const ProjectsData = [
 	},
 	{
 		id: 5,
-		title: 'Kabul Social App',
+		title: 'React Social App',
 		category: 'Mobile Application',
 		img: MobileImage1,
 	},

src/utils/SingleProjectData.js

@@ -6,9 +6,9 @@ import Image5 from '../images/web-project-1.jpg';
 import Image6 from '../images/ui-project-2.jpg';
 
 export const singleProjectHeader = {
-	singleProjectTitle: 'Kabul Project Management UI',
-	singleProjectDate: 'Jul 26, 2021',
-	singleProjectTag: 'UI / Frontend',
+	title: 'Project Management UI',
+	publishDate: 'Jul 26, 2021',
+	tags: 'UI / Frontend',
 };
 
 export const projectImages = [