diff --git a/public/images/blogcommentsection/image 10.png b/public/images/blogcommentsection/image 10.png new file mode 100644 index 000000000..c7e059b0a Binary files /dev/null and b/public/images/blogcommentsection/image 10.png differ diff --git a/src/app/(auth-routes)/login/magic-link/link-sent/page.tsx b/src/app/(auth-routes)/login/magic-link/link-sent/page.tsx index d74a74405..093c06ea5 100644 --- a/src/app/(auth-routes)/login/magic-link/link-sent/page.tsx +++ b/src/app/(auth-routes)/login/magic-link/link-sent/page.tsx @@ -9,7 +9,7 @@ const handleOpenEmail = () => { }; const MagicLinkSuccess = () => { return ( -
+

diff --git a/src/app/(auth-routes)/login/magic-link/page.tsx b/src/app/(auth-routes)/login/magic-link/page.tsx index c2353533e..ae9305d6b 100644 --- a/src/app/(auth-routes)/login/magic-link/page.tsx +++ b/src/app/(auth-routes)/login/magic-link/page.tsx @@ -3,10 +3,11 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { ShieldCheck } from "lucide-react"; import { useRouter } from "next/navigation"; -import React from "react"; +import React, { useState } from "react"; import { useForm } from "react-hook-form"; import { z } from "zod"; +import LoadingSpinner from "~/components/miscellaneous/loading-spinner"; import { Button } from "~/components/ui/button"; import { Form, @@ -27,7 +28,7 @@ type FormValues = z.infer; const getInputClassName = (hasError: boolean, isValid: boolean) => { const baseClasses = - "font-inter w-full rounded-md border px-3 py-3 text-sm font-normal leading-[21.78px] transition duration-150 ease-in-out focus:outline-none focus:ring-1 focus:ring-opacity-50"; + "font-inter w-full rounded-md border px-3 py-6 text-sm font-normal leading-[21.78px] transition duration-150 ease-in-out focus:outline-none focus:ring-1 focus:ring-opacity-50"; if (hasError) { return `${baseClasses} border-red-500 focus:border-red-500 focus:ring-red-500 text-red-900`; @@ -40,6 +41,7 @@ const getInputClassName = (hasError: boolean, isValid: boolean) => { const LoginMagicLink: React.FC = () => { const router = useRouter(); const { toast } = useToast(); + const [isLoading, setIsLoading] = useState(false); const form = useForm({ resolver: zodResolver(formSchema), defaultValues: { @@ -48,8 +50,9 @@ const LoginMagicLink: React.FC = () => { }); const onSubmit = async () => { + setIsLoading(true); try { - await new Promise((resolve) => setTimeout(resolve, 1000)); + await new Promise((resolve) => setTimeout(resolve, 3000)); router.push("/login/magic-link/link-sent"); } catch (error: unknown) { toast({ @@ -58,11 +61,13 @@ const LoginMagicLink: React.FC = () => { error instanceof Error ? error.message : "An unknown error occurred", variant: "destructive", }); + } finally { + setIsLoading(false); } }; return ( -
+

@@ -80,10 +85,7 @@ const LoginMagicLink: React.FC = () => { name="email" render={({ field }) => ( -

- - diff --git a/src/app/(landing-routes)/(home)/blog/page.tsx b/src/app/(landing-routes)/(home)/blog/page.tsx index e947ef477..4a350b370 100644 --- a/src/app/(landing-routes)/(home)/blog/page.tsx +++ b/src/app/(landing-routes)/(home)/blog/page.tsx @@ -1,3 +1,7 @@ +"use client"; + +import { useRouter } from "next/navigation"; + import CustomButton from "~/components/common/common-button/common-button"; import BlogCard from "~/components/layouts/BlogCards"; import { @@ -10,57 +14,70 @@ import { } from "../../../../../public/images/blogPage/utils"; import HeroSection from "../../../../components/extDynamicPages/blogCollection/BlogPageHero"; +export const blogPosts = [ + { + id: 1, + title: "The Power of Networking: How to Build Meaningful Connections", + date: "Jul 12, 2024", + readTime: "5", + category: "Business", + image: blogCard1, + labelClassName: "bg-primary", + author: "Nora Nora", + }, + { + id: 2, + title: "The Global Impact of Climate Change: A Look at the Evidence", + date: "Jul 12, 2024", + readTime: "5", + category: "World News", + image: blogCard2, + labelClassName: "bg-warning", + author: "Jane Doe", + }, + { + id: 3, + title: "5 Easy and Delicious Recipes for Busy Weeknights", + date: "Jul 12, 2024", + readTime: "5", + category: "Food", + image: blogCard3, + labelClassName: "bg-success", + author: "John Doe", + }, + { + id: 4, + title: "5 Simple Habits to Improve Your Mental Wellbeing", + date: "Jul 12, 2024", + readTime: "5", + category: "Lifestyle", + image: blogCard4, + labelClassName: "bg-primary", + author: "Jane Doe", + }, + { + id: 5, + title: "The Ultimate Guide to Dressing Stylishly with Fewer Clothes", + date: "Jul 12, 2024", + readTime: "5", + category: "Fashion", + image: blogCard5, + labelClassName: "bg-success", + author: "John Doe", + }, + { + id: 6, + title: "The Future of Travel: What Will the World Look Like in 2030?", + date: "Jul 12, 2024", + readTime: "5", + category: "World News", + image: blogCard6, + labelClassName: "bg-warning", + author: "Nora Nora", + }, +]; const BlogHome = () => { - const blogPosts = [ - { - title: "The Power of Networking: How to Build Meaningful Connections", - date: "Jul 12, 2024", - readTime: "5", - category: "Business", - image: blogCard1, - labelClassName: "bg-primary", - }, - { - title: "The Global Impact of Climate Change: A Look at the Evidence", - date: "Jul 12, 2024", - readTime: "5", - category: "World News", - image: blogCard2, - labelClassName: "bg-warning", - }, - { - title: "5 Easy and Delicious Recipes for Busy Weeknights", - date: "Jul 12, 2024", - readTime: "5", - category: "Food", - image: blogCard3, - labelClassName: "bg-success", - }, - { - title: "5 Simple Habits to Improve Your Mental Wellbeing", - date: "Jul 12, 2024", - readTime: "5", - category: "Lifestyle", - image: blogCard4, - labelClassName: "bg-primary", - }, - { - title: "The Ultimate Guide to Dressing Stylishly with Fewer Clothes", - date: "Jul 12, 2024", - readTime: "5", - category: "Fashion", - image: blogCard5, - labelClassName: "bg-success", - }, - { - title: "The Future of Travel: What Will the World Look Like in 2030?", - date: "Jul 12, 2024", - readTime: "5", - category: "World News", - image: blogCard6, - labelClassName: "bg-warning", - }, - ]; + const router = useRouter(); return (
@@ -79,6 +96,10 @@ const BlogHome = () => { category={post.category} image={post.image} labelClassName={post.labelClassName} + onClick={() => { + localStorage.setItem("currentBlogPost", JSON.stringify(post)); + router.push(`/blog/$?id=${post.id}`); + }} /> ))}
diff --git a/src/app/(landing-routes)/blog/[id]/BlogDetailsPage.tsx b/src/app/(landing-routes)/blog/[id]/BlogDetailsPage.tsx index e498834b8..19bd1a2f8 100644 --- a/src/app/(landing-routes)/blog/[id]/BlogDetailsPage.tsx +++ b/src/app/(landing-routes)/blog/[id]/BlogDetailsPage.tsx @@ -1,15 +1,283 @@ "use client"; +import { MessageCircleMore, ThumbsUpIcon } from "lucide-react"; +import { Session } from "next-auth"; +import Image from "next/image"; +import Link from "next/link"; +import { useSearchParams } from "next/navigation"; +import { useEffect, useState } from "react"; + +import Comment, { CommentProperties } from "~/components/common/comment"; +import { sampleComments } from "~/components/common/comment/sample-comments"; +import LoadingSpinner from "~/components/miscellaneous/loading-spinner"; import RelatedArticle from "./RelatedArticle"; +interface BlogPost { + id: number; + title: string; + date: string; + readTime: string; + category: string; + image: string; + labelClassName: string; + author: string; +} +const mockSession: Session = { + user: { + name: "Current User", + email: "user@example.com", + }, + expires: "2100-01-01T00:00:00.000Z", +}; const BlogDetailsPage = () => { + const [post, setPost] = useState(); + const [isLoading, setIsLoading] = useState(true); + const [newComment, setNewComment] = useState(""); + + const [comments, setComments] = + useState[]>(sampleComments); + + const searchParameters = useSearchParams(); + const id = searchParameters.get("id"); + + useEffect(() => { + const fetchPost = () => { + setTimeout(() => { + const storedPost = localStorage.getItem("currentBlogPost"); + if (storedPost) { + try { + const parsedPost = JSON.parse(storedPost) as BlogPost; + if (parsedPost.id === Number.parseInt(id as string, 10)) { + setPost(parsedPost); + } else { + setPost(undefined); + } + } catch (error) { + throw new Error("Error parsing stored blog post", { cause: error }); + } + } else { + setPost(undefined); + } + setIsLoading(false); + }, 1000); + }; + + if (typeof window !== "undefined") { + fetchPost(); + } + }, [id]); + + if (isLoading || !post) { + return ( +
+
+ {isLoading ? ( + <> + Loading ... + + + ) : ( + "Blog post not found" + )} +
+
+ ); + } + + const handleSubmit = () => { + if (newComment.trim()) { + const comment: Omit = { + id: (comments.length + 1).toString(), + avatar: "", + name: mockSession.user?.name || "Anonymous", + username: + mockSession.user?.name?.toLowerCase().replace(" ", "") || "anonymous", + content: newComment, + timestamp: new Date().toISOString(), + likes: 0, + dislikes: 0, + }; + setComments([comment, ...comments]); + setNewComment(""); + } + }; + + const handleKeyDown = (event_: React.KeyboardEvent) => { + if (event_.key === "Enter" && !event_.shiftKey) { + event_.preventDefault(); + handleSubmit(); + } + }; return ( -
-
- Blog Details Section - + <> +
+
+
+ + {post.category} + +
+ +

+ {post.title} +

+ +
+ Nora Nora +
+

+ {post.author} +

+

+ {post.readTime} mins Read • {post.date} +

+
+
+ +
+
+ + 77k +
+
+ + 44 +
+
+
+
+ +
+
+ ENIAC computer, one of the first general-purpose electronic digital computers +
+

+ Image: {post.title} +

+ +
+

+ “In the 1930s, John Atanasoff and Clifford Berry built the + Atanasoff-Berry Computer (ABC), considered the first electronic + digital computer, using vacuum tubes to perform calculations. + “ +

+
+ +
+

+ We often hear about the ENIAC, hailed as the first computer, but its + story is just one thread in a rich tapestry woven by brilliant minds + across generations. The true journey to the digital age is + fascinating, filled with visionaries who dared to dream of machines + that could think and calculate. In the 1830s, Charles Babbage + conceived the Analytical Engine, a mechanical marvel that could + perform complex calculations and even store data. It was a blueprint + for the modern computer, with a central processing unit, memory, and + input/output capabilities. Unfortunately, his vision was ahead of + its time, and the Analytical Engine was never fully built due to + funding constraints and the limitations of the technology at the + time. +
+ But Babbage wasn't alone. Ada Lovelace, a brilliant + mathematician and daughter of Lord Byron, recognized the potential + of his machine. She collaborated with Babbage, writing detailed + notes on the Analytical Engine's capabilities. Her work, + considered the first computer program, demonstrated how the machine + could be used to solve complex mathematical problems, laying the + foundation for the field of software development. +

+

+ {" "} + The world needed a practical solution for data processing, and + Herman Hollerith stepped up. In the late 19th century, he developed + a tabulating machine that used punched cards to store and process + data. This machine was a game-changer, proving crucial in the 1890 + US Census. Hollerith's invention paved the way for the + development of data processing systems, which would later become + essential for modern computing. +
While Babbage's vision was mechanical, the 20th century + saw a shift towards electronic computing. In the 1930s, John + Atanasoff and Clifford Berry built the Atanasoff-Berry Computer + (ABC), considered the first electronic digital computer, using + vacuum tubes to perform calculations. Though not programmable, the + ABC demonstrated the potential of electronics in computing, paving + the way for the ENIAC. +
The Electronic Numerical Integrator and Computer (ENIAC), + built in the 1940s, was a programmable machine designed for military + calculations. It was a massive, room-sized computer that used vacuum + tubes to perform complex operations. The ENIAC marked a significant + milestone in the development of general-purpose computers, but it + was built upon the groundwork laid by Babbage, Lovelace, Hollerith, + and Atanasoff. +

+

+ {" "} + This is just the beginning. There are countless other stories of + pioneers who contributed to the development of the first computers. + Women like Grace Hopper, a pioneer in computer programming and the + development of COBOL, played vital roles, often overlooked in the + history books. The story of the first computer is not a singular + event, but a tapestry woven by brilliant minds across generations. + It's a testament to human ingenuity, perseverance, and the + relentless pursuit of innovation. +

+
+ +
+

+ Add Comments +

+