Merge branch 'clean' of https://github.com/hngprojects/hng_boilerplat…

…e_nextjs into Vxrcel-clean
hngprojects · Jul 25, 2024 · c849684 · c849684
2 parents aa814b2 + c2e6569
commit c849684
Show file tree

Hide file tree

Showing 11 changed files with 410 additions and 178 deletions.
diff --git a/public/images/blogcommentsection/image 10.png b/public/images/blogcommentsection/image 10.png
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
@@ -9,7 +9,7 @@ const handleOpenEmail = () => {
 };
 const MagicLinkSuccess = () => {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-0 sm:px-6 lg:px-8">
+    <div className="my-8 flex min-h-full items-center justify-center bg-gray-50 px-0 sm:px-6 lg:px-8">
       <div className="w-full max-w-md space-y-8">
         <div className="text-center">
           <h1 className="font-inter text-neutralColor-dark-2 mb-5 text-center text-2xl font-medium leading-tight">

diff --git 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<typeof formSchema>;
 
 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<FormValues>({
     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 (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-0 sm:px-6 lg:px-8">
+    <div className="my-8 flex min-h-full items-center justify-center bg-gray-50 px-0 sm:px-6 lg:px-8">
       <div className="w-full max-w-md space-y-8">
         <div className="text-center">
           <h1 className="font-inter text-neutralColor-dark-2 mb-5 text-center text-2xl font-semibold leading-tight">
@@ -80,10 +85,7 @@ const LoginMagicLink: React.FC = () => {
               name="email"
               render={({ field }) => (
                 <FormItem>
-                  <Label
-                    htmlFor="email"
-                    className="text-neutralColor-dark-2 sr-only"
-                  >
+                  <Label htmlFor="email" className="text-neutralColor-dark-2">
                     Email
                   </Label>
                   <FormControl>
@@ -110,9 +112,16 @@ const LoginMagicLink: React.FC = () => {
               type="submit"
               variant="default"
               size="default"
-              className="h-12 w-full rounded-md bg-primary px-4 py-3 text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
+              className="h-12 w-full rounded-md bg-primary px-4 py-6 text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
             >
-              Get Magic Link
+              {isLoading ? (
+                <span className="flex items-center gap-x-2">
+                  <span className="animate-pulse">Getting Link...</span>{" "}
+                  <LoadingSpinner className="size-4 animate-spin sm:size-5" />
+                </span>
+              ) : (
+                <span>Get Magic Link</span>
+              )}
             </Button>
           </form>
         </Form>

diff --git a/src/app/(auth-routes)/login/page.tsx b/src/app/(auth-routes)/login/page.tsx
@@ -40,14 +40,14 @@ type LoginFormData = z.infer<typeof loginSchema>;
 
 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";
 
   if (hasError) {
     return `${baseClasses} border-red-500 focus:border-red-500 focus:ring-red-500 text-red-900`;
   } else if (isValid) {
-    return `${baseClasses} border-orange-500 focus:border-orange-500 focus:ring-orange-500 text-neutralColor-dark-2`;
+    return `${baseClasses} border-orange-500 focus:border-orange-500  text-neutralColor-dark-2`;
   }
-  return `${baseClasses} border-gray-300 focus:border-orange-500 focus:ring-orange-500 text-neutralColor-dark-2`;
+  return `${baseClasses} border-gray-300 focus:border-orange-500  text-neutralColor-dark-2`;
 };
 
 const LoginPage = () => {
@@ -100,10 +100,7 @@ const LoginPage = () => {
         </div>
 
         <div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-6 sm:space-y-0">
-          <Button
-            disabled
-            className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50"
-          >
+          <Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
             <Image
               src={Google}
               width={20}
@@ -113,10 +110,7 @@ const LoginPage = () => {
             />
             Sign in with Google
           </Button>
-          <Button
-            disabled
-            className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50"
-          >
+          <Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
             <Image
               src={Facebook}
               width={20}
@@ -143,7 +137,7 @@ const LoginPage = () => {
               name="email"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel className="text-neutralColor-dark-2 sr-only">
+                  <FormLabel className="text-neutralColor-dark-2">
                     Email
                   </FormLabel>
                   <FormControl>
@@ -167,7 +161,9 @@ const LoginPage = () => {
               name="password"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel className="sr-only">Password</FormLabel>
+                  <FormLabel className="text-neutralColor-dark-2">
+                    Password
+                  </FormLabel>
                   <FormControl>
                     <div className="relative">
                       <Input
@@ -235,7 +231,7 @@ const LoginPage = () => {
               type="submit"
               variant="default"
               size="default"
-              className="h-12 w-full rounded-md bg-primary px-4 py-3 text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
+              className="h-12 w-full rounded-md bg-primary px-4 py-6 text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
             >
               {isLoading ? (
                 <span className="flex items-center gap-x-2">
@@ -250,11 +246,10 @@ const LoginPage = () => {
         </Form>
 
         <Button
-          disabled
           type="button"
           variant="outline"
           size="default"
-          className="text-neutralColor-dark-2 hover:bg-gray50 w-full rounded-md border border-stroke-colors-stroke bg-white px-4 py-3 text-sm font-medium focus:outline-none"
+          className="text-neutralColor-dark-2 hover:bg-gray50 w-full rounded-md border border-stroke-colors-stroke bg-white px-4 py-6 text-sm font-medium focus:outline-none"
         >
           <Link href="/login/magic-link">Sign in with magic link</Link>
         </Button>

diff --git 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 (
     <div>
@@ -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}`);
+              }}
             />
           ))}
         </div>