Merge pull request #129 from EnigmaVSSUT/fix/garbage-code

fix: code refactoring and cherry-pick

package.json

@@ -11,7 +11,7 @@
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react-dom": "^17.0.0 || ^yarn18.0.0"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",

src/app/blogs/Blogs.jsx

@@ -4,64 +4,77 @@ import AnimatePage from "../../ui/AnimatePage";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import { IconButton } from "@mui/material";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+// import img1 from "/assets/blog-1.jpg?url"
+// import img2 from "/assets/blog-2.jpg?url"
+// import img3 from "/assets/blog-3.jpg?url"
+// import img4 from "/assets/blog-4.jpg?url"
+// import img5 from "/assets/blog-5.jpg?url"
+import blogs from "../blogs/blogsdata.js";
+// import { useEffect } from "react";
 
-const blogs = [
-	{
-		id: 1,
-		title: "Blog 1",
-		reference: "AI, Midjourney",
-		description:
-			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.",
-		date: "15 Mar 2023",
-		img: "https://images.unsplash.com/photo-1680459575585-390ed5cfcae0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
-		author: "Rohit Kumar",
-	},
-	{
-		id: 2,
-		title: "Blog 2",
-		reference: "Devops, Midjourney",
-		description:
-			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.",
-		date: "7 Mar 2023",
-		img: "https://images.unsplash.com/photo-1593508512255-86ab42a8e620?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=578&q=80",
-		author: "Donald Duck",
-	},
-	{
-		id: 3,
-		title: "Blog 3",
-		reference: "UI/UX, designing",
-		description:
-			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.",
-		date: "21 Feb 2023",
-		img: "https://images.unsplash.com/photo-1602576666092-bf6447a729fc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1032&q=80",
-		author: "Soumya Sagar",
-	},
-	{
-		id: 4,
-		title: "Blog 4",
-		reference: "AI, Midjourney",
-		description:
-			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.",
-		date: "2 Jan 2023",
-		img: "https://images.unsplash.com/photo-1680459575585-390ed5cfcae0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
-		author: "Anya ",
-	},
-	{
-		id: 5,
-		title: "Blog 5",
-		reference: "Web Dev, Designing",
-		description:
-			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.",
-		date: "1 Jan 2023",
-		img: "https://images.unsplash.com/photo-1609921212029-bb5a28e60960?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1152&q=80",
-		author: "Loid",
-	},
-];
+
+// const blogs = [
+// 	{
+// 		id: 1,
+// 		title: "Explore the exhilarating voyage into the future with the Language Model Showdown Let's delve into the clash of titans: Google's Gemini and OpenAI's ChatGPT.",
+// 		reference: "AI, Midjourney",
+// 		description:
+// 			"Explore the exhilarating voyage into the future with the Language Model Showdown Let's delve into the clash of titans: Google's Gemini and OpenAI's ChatGPT. Discover the core differences, from Gemini's native multimodality to ChatGPT's versatile adaptations. Embark on Gemini's trio of options and the unparalleled data advantage it gains from Google's vast empire. Uncover the benchmarks where Gemini Ultra shines and anticipate the game-changing GPT-5 from OpenAI. The future is bright as both models evolve, promising groundbreaking innovations. Join the conversation and share your insights on this epic face-off!",
+// 		date: "15 Mar 2023",
+// 		img: img1,
+// 		author: "Rohit Kumar",
+// 	},
+// 	{
+// 		id: 2,
+// 		title: "Encapsule the future of security with Quantum Cryptography! This technology harnesses the principles of quantum mechanics to create codes that can safeguard sensitive information",
+// 		reference: "Devops, Midjourney",
+// 		description:
+// 			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.",
+// 		date: "7 Mar 2023",
+// 		img: img2,
+// 		author: "Donald Duck",
+// 	},
+// 	{
+// 		id: 3,
+// 		title: "App development with Project IDX! This cloud-based IDE harnesses AI for code completion, chatbot assistance, and effortless local-to-cloud transitions.",
+// 		reference: "UI/UX, designing",
+// 		description:
+// 			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.",
+// 		date: "21 Feb 2023",
+// 		img: img3,
+// 		author: "Soumya Sagar",
+// 	},
+// 	{
+// 		id: 4,
+// 		title: "Bun.sh is a modern javascript runtime developed to improve the speed, compatibility and overall user experience.",
+// 		reference: "AI, Midjourney",
+// 		description:
+// 			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.",
+// 		date: "2 Jan 2023",
+// 		img: img4,
+// 		author: "Anya ",
+// 	},
+// 	{
+// 		id: 5,
+// 		title: "Empower your AI and data projects with Paperspace's cloud solutions - where innovation meets accessibility!",
+// 		reference: "Web Dev, Designing",
+// 		description:
+// 			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.",
+// 		date: "1 Jan 2023",
+// 		img: img5,
+// 		author: "Loid",
+// 	},
+// ];
+
+
+// useEffect(() => {
+// 	console.log("ok "+blogs)
+// }, [])
 
 export default function Blogs() {
 	const openBlog = (id) => {
 		// console.log("id",id);
-		window.open(`/blogs/${id}`, "_blank");
+	    window.open(`/blogs/${id}`, "_blank");
 	};
 
 	return (
@@ -91,7 +104,7 @@ export default function Blogs() {
 							key={index}
 							minHeight="300px"
 							minWidth="400px"
-							borderRadius="20px"
+							borderRadius="10px"
 							position="relative"
 						>
 							<img
@@ -111,7 +124,7 @@ export default function Blogs() {
 								alignItems="self-start"
 								justifyContent="space-between"
 							>
-								<Typography variant="h5">{blog.title}</Typography>
+								<Typography className={blogStyles.titleHeading} variant="h6" sx={{width:'300px'}}>{blog.title}</Typography>
 								<Typography variant="caption">{blog.date}</Typography>
 							</Stack>
 							<Stack
@@ -121,7 +134,7 @@ export default function Blogs() {
 								right="20px"
 								bottom="30px"
 							>
-								<OpenInNewIcon style={{ color: "white", fontSize: "25px" }} />
+								<OpenInNewIcon style={{ color: "white", fontSize: "20px" }} />
 							</Stack>
 						</Stack>
 					))}
@@ -144,4 +157,4 @@ export default function Blogs() {
 			</Stack>
 		</AnimatePage>
 	);
-}
+}

src/app/blogs/[blogid].jsx

@@ -1,27 +1,36 @@
 import { Divider, Stack, Typography } from "@mui/material";
 import AnimatePage from "../../ui/AnimatePage";
+import blogs from "../blogs/blogsdata.js";
+import { useEffect } from "react";
+import { useParams } from "react-router-dom";
 
 export default function SingleBlog() {
+	const {blogid} = useParams()
 	return (
 		<AnimatePage>
-			<Stack justifyContent="center" alignItems="center" paddingY="40px">
+			<Stack justifyContent="center" alignItems="center" paddingY="40px" >
 				<Stack
 					width={"100%"}
-					direction="row-reverse"
+					// direction="row-reverse"
 					justifyContent="center"
 					alignItems="center"
-					padding="30px"
+					padding="50px"
 					paddingX="50px"
+
+					sx={{flexDirection : {sm:"column", md: "column", lg : "row-reverse"}}} 
 				>
-					<Stack className="image container">
+					<Stack className="image container" style={{
+						paddingRight: "5rem"
+
+					}}
+					>
 						<img
-							src={
-								"https://images.unsplash.com/photo-1680459575585-390ed5cfcae0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
-							}
+							src=  {blogs[blogid-1].img} 
 							alt="image"
-							width="600rem"
-							height="600rem"
-							style={{ objectFit: "cover" }}
+							width="400rem"
+							height="400rem" 
+							sx={{ paddingRight: 3}}
+							style={{ objectFit: "cover"}}
 						/>
 					</Stack>
 
@@ -34,35 +43,24 @@ export default function SingleBlog() {
 						marginRight={"50px"}
 						flexGrow={1}
 					>
-						<Stack direction="column" minHeight={"35rem"} flexGrow={1}>
-							<Stack direction="row" gap="20px">
+						<Stack direction="column" minHeight={"35rem"} flexGrow={1} sx={{justifyContent:"center",alignItems:"center"}}>
+							<Stack direction="row" gap="20px" sx={{justifyContent:"center"}}>
 								<Typography variant="h6">AI, Midjourney</Typography>
 
 								<Divider orientation="vertical" flexItem />
 
 								<Typography variant="h6">2 Jan 2023</Typography>
+
 							</Stack>
-
-							<Stack direction="column" flexGrow={1}></Stack>
-
-							<Typography variant="h1">An Article about Mid Journey</Typography>
+							<Stack direction="column" flexGrow={0} ></Stack>
+							<Typography variant="h2" marginTop="50px">{blogs[blogid-1].head}</Typography>
+							<Typography variant="body1" maxWidth="45vw" marginTop="30px">
+				                {blogs[blogid-1].description}
+				            </Typography>
 						</Stack>
 					</Stack>
 				</Stack>
-				<Typography variant="body1" maxWidth="90vw" marginTop="20px">
-					Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor aliquam
-					praesentium porro quae cupiditate officia explicabo esse maxime
-					tempora culpa facere, error nihil dolore, odit adipisci expedita
-					voluptates exercitationem placeat? Lorem, ipsum dolor sit amet
-					consectetur adipisicing elit. Dolor nesciunt, consectetur voluptatibus
-					tenetur possimus repellat laudantium repudiandae earum saepe, non
-					laboriosam ipsa? Quia officia voluptatum dolorem debitis voluptates
-					maxime vel? Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-					Fugiat quisquam, non quidem quod veritatis ea natus accusantium
-					blanditiis praesentium rem iure omnis quomm commodi dolorum nobis
-					provident reiciendis unde nihil!
-				</Typography>
 			</Stack>
 		</AnimatePage>
 	);
-}
+}