Merge branch 'Vxrcel-clean' of https://github.com/hngprojects/hng_boi…

…lerplate_nextjs into clean

src/app/(auth-routes)/login/magic-link/link-sent/page.tsx

@@ -4,7 +4,7 @@ import { Check } from "lucide-react";
 
 import { Button } from "~/components/ui/button";
 
-export const handleOpenEmail = () => {
+const handleOpenEmail = () => {
   window.location.href = "mailto:";
 };
 const MagicLinkSuccess = () => {

src/app/(landing-routes)/blog/comments/page.tsx

@@ -1,7 +1,7 @@
 import { Session } from "next-auth";
 
-import Comment from "~/components/common/comment";
-import { sampleComments } from "~/components/common/comment/sample-comments";
+import Comment from "~/components/common/Comment";
+import { sampleComments } from "~/components/common/Comment/sample-comments";
 
 const CommentPage = () => {
   const mockSession: Session = {

src/app/dashboard/(admin)/admin/email/generate-with-html/preview-template/page.tsx

@@ -1,4 +1,4 @@
-import HtmlTemplateViewer from "./_component.tsx/index.jsx";
+import HtmlTemplateViewer from "./_component.tsx";
 
 const page = () => {
   return <HtmlTemplateViewer />;

src/components/blog/BlogCard.tsx

@@ -0,0 +1,65 @@
+import Image from "next/image";
+
+type New = {
+  id: number;
+  thumbnailUrl: string;
+};
+
+type newTypes = {
+  id: number;
+  name: string;
+  color: string;
+  title: string;
+  date: string;
+  timeRead: string;
+};
+
+const BlogCard = ({
+  article,
+  newsType,
+}: {
+  article: New;
+  newsType: newTypes;
+}) => {
+  const { thumbnailUrl } = article;
+  return (
+    <div className="flex cursor-pointer flex-col rounded-t-lg">
+      <div className="relative flex">
+        <Image
+          src={thumbnailUrl}
+          alt="img"
+          width={364}
+          height={247}
+          className="h-[247px] w-[374px] rounded-t-lg"
+        />
+        <div
+          data-testid="news-displayed"
+          key={newsType.id}
+          style={{ backgroundColor: newsType.color }}
+          className="absolute left-[15px] top-[15px] rounded-[16px] px-[17px] py-[5px]"
+        >
+          <p className="text-[12px] font-bold text-blog-relatedBg">
+            {newsType.name}
+          </p>
+        </div>
+      </div>
+      <div className="flex h-[147px] w-[372px] flex-col gap-[24px] p-[16px] md:h-[137px] md:w-[354px]">
+        <p className="w-[320px] text-[20px] font-bold text-blog-relatedHeading">
+          {newsType.title}
+        </p>
+        <div className="flex items-center justify-between">
+          <p className="text-[14px] font-normal text-blog-relatedHeading">
+            {newsType.date}
+          </p>
+          <div className="rounded-[16px] bg-blog-relatedBg p-[8px]">
+            <p className="text-[14px] font-normal text-blog-relatedHeading">
+              {newsType.timeRead}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BlogCard;

src/components/layouts/index.tsx

@@ -1,15 +1,15 @@
 import React from "react";
 
-import Footer from "./Footer";
-import Navbar from "./Navbar";
+import Footer from "./footer";
+import Navbar from "./navbar";
 
 interface IProperties {
   children: React.ReactNode;
 }
 
 const index: React.FC<IProperties> = ({ children }) => {
   return (
-    <div className="flex min-h-screen flex-col justify-between">
+    <div className="flex min-h-[100dvh] flex-col justify-between">
       <Navbar />
       <div className="flex-1">{children}</div>
       <Footer />

src/components/layouts/navbar/index.tsx

@@ -4,7 +4,6 @@ import { BellIcon, Menu, User } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
-import CustomButton from "~/components/common/common-button/common-button";
 import Logo from "~/components/common/logo";
 
 const navlinks = [
@@ -55,15 +54,18 @@ const Navbar = () => {
           })}
         </div>
         <div className="hidden w-full max-w-[280px] items-center justify-between gap-2 md:flex">
-          <CustomButton
-            variant="outline"
-            className="h-[44px] w-[105px] border-primary text-primary"
+          <Link
+            href="/login"
+            className="grid h-[44px] place-items-center rounded-md border border-primary px-8 text-primary"
           >
             Log in
-          </CustomButton>
-          <CustomButton variant="primary" className="h-[44px] w-[142px]">
+          </Link>
+          <Link
+            href="/sign-up"
+            className="grid h-[44px] place-items-center rounded-md border border-primary bg-primary px-8 text-white"
+          >
             Get Started
-          </CustomButton>
+          </Link>
         </div>
         <div className="flex w-full max-w-[80px] items-center justify-between gap-2 md:hidden">
           <BellIcon className="text-nuetral-black-1 h-5 w-5 cursor-pointer transition-colors duration-300 hover:text-neutral-dark-1/50" />

src/components/ui/pagination.tsx

@@ -0,0 +1,125 @@
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import * as React from "react";
+
+import { ButtonProperties, buttonVariants } from "~/components/ui/button";
+import { cn } from "~/lib/utils";
+
+const Pagination = ({
+  className,
+  ...properties
+}: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...properties}
+  />
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...properties }, reference) => (
+  <ul
+    ref={reference}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...properties}
+  />
+));
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...properties }, reference) => (
+  <li ref={reference} className={cn("", className)} {...properties} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProperties = {
+  isActive?: boolean;
+  activeVariant?: "default" | "outline";
+} & Pick<ButtonProperties, "size"> &
+  React.ComponentProps<"a">;
+
+const PaginationLink = ({
+  className,
+  isActive,
+  activeVariant = "outline",
+  size = "icon",
+  ...properties
+}: PaginationLinkProperties) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? activeVariant : "ghost",
+        size,
+      }),
+      isActive
+        ? "border-solid border-primary bg-primary/20"
+        : "bg-white text-[#98A2B3]",
+      className,
+    )}
+    {...properties}
+  />
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({
+  className,
+  ...properties
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="icon"
+    className={cn("border text-foreground", className)}
+    {...properties}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span></span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({
+  className,
+  ...properties
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="icon"
+    className={cn("border text-foreground", className)}
+    {...properties}
+  >
+    <span></span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({
+  className,
+  ...properties
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...properties}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};