Layout shift

src/app/(admin)/_components/layout/Sidebar/sidebar.test.tsx → src/app/dashboard/(admin)/_components/layout/Sidebar/sidebar.test.tsx

@@ -1,7 +1,7 @@
 import { Box, House, Mail, Settings, Users } from "lucide-react";
 
 import { render, screen } from "~/test/utils";
-import Sidebar from "./";
+import Sidebar from ".";
 
 const sideItems = [
   {

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

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

src/app/globals.css

@@ -17,6 +17,7 @@
     --default-foreground: 0 0% 100%;
 
     --primary: 25 95% 53%;
+
     --primary-foreground: 0 0% 100%;
 
     --secondary: 210 40% 96.1%;

src/app/not-found.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { ArrowLeft, Home } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+import Particles404 from "~/components/error/Particles404";
+
+const NotFoundPage = () => {
+  const router = useRouter();
+
+  return (
+    <section className="grid h-screen w-full place-items-center bg-white">
+      <div className="fixed left-0 top-0 min-h-[100dvh] w-screen bg-white" />
+      <Particles404 />
+      <div className="pointer-events-none relative z-30 flex flex-col gap-y-6">
+        <p className="text-center font-medium uppercase text-[#f97415] sm:text-2xl md:text-3xl lg:text-4xl lg:font-bold xl:font-bold">
+          Page Not Found
+        </p>
+        <Image
+          src="/404.gif"
+          alt="404"
+          width={480}
+          height={204}
+          unoptimized
+          loading="eager"
+          priority
+        />
+        <div className="flex w-full items-center justify-center gap-x-4">
+          <button
+            onClick={() => router.back()}
+            className="hover:text-accent-color pointer-events-auto flex items-center gap-x-2 rounded-xl border border-gray-200 bg-white px-4 py-2 transition-colors duration-300"
+          >
+            <ArrowLeft className="size-5 xl:size-6" />
+            Back
+          </button>
+          <Link
+            href="/"
+            prefetch
+            className="hover:text-accent-color pointer-events-auto flex items-center gap-x-2 rounded-xl border border-gray-200 bg-white px-4 py-2 transition-colors duration-300"
+          >
+            <Home className="size-5 xl:size-6" />
+            Home
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default NotFoundPage;

src/components/error/NoWalletError.tsx

@@ -0,0 +1,55 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+
+import { useWallet } from "@/context/walletProviders";
+import React, { useEffect } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils/utils";
+
+const NoWalletError = () => {
+  const { showWalletError, setShowWalletError, walletErrorMsg } = useWallet();
+  const popupDelay = 5000; // 5 seconds
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout | null;
+    clearTimeout(timer!);
+    if (showWalletError) {
+      document.body.style.setProperty("--popup_duration", popupDelay + "ms");
+      timer = setTimeout(() => {
+        setShowWalletError(false);
+      }, popupDelay + 1500);
+    } else {
+      timer = null;
+    }
+    return () => clearTimeout(timer!);
+  }, [showWalletError]);
+  return (
+    <AnimatePresence>
+      {showWalletError && (
+        <motion.div
+          initial={{ opacity: 0, y: -50 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 50 }}
+          className="absolute -bottom-14 left-2 z-10 rounded-md bg-red-500/10 px-4 py-2 text-rose-700 md:-bottom-20 md:px-8 md:py-4"
+        >
+          <span dangerouslySetInnerHTML={{ __html: walletErrorMsg }} />
+          <span
+            className={cn(
+              "absolute bottom-0 left-0 h-1 w-full bg-rose-700",
+              showWalletError ? "no-width" : "w-full",
+            )}
+          />
+          <button
+            onClick={() => setShowWalletError(false)}
+            className="absolute right-1 top-1 md:right-2 md:top-2"
+          >
+            <X className="size-4" />
+          </button>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default NoWalletError;

src/components/error/NoWalletInDBError.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Image from "next/image";
+import Link from "next/link";
+
+export const NoWalletInDBError = () => (
+	<div className="grid place-items-center h-screen relative select-none">
+		<div className="absolute top-4 ">
+			<Image
+				src="/logo-white.png"
+				alt="logo"
+				width={200}
+				height={50}
+				className="opacity-50 w-full max-w-[100px] min-[400px]:max-w-[150px] lg:max-w-[200px]"
+			/>
+		</div>
+		<div className="flex flex-col items-center gap-y-4 md:gap-y-8">
+			<p className="text-center font-extralight sm:text-xl xl:text-2xl">
+				We couldn&apos;t find a wallet associated with your account.
+			</p>
+
+			<Link
+				href="/create-password"
+				className="flex relative items-center [perspective:300px] transform-gpu "
+			>
+				<motion.button
+					// @ts-expect-error
+					initial={{ "--x": "100%", scale: 1 }}
+					// @ts-expect-error
+					animate={{ "--x": "-100%" }}
+					whileTap={{ scale: 0.97 }}
+					transition={{
+						repeat: Infinity,
+						repeatType: "loop",
+						repeatDelay: 1,
+						type: "spring",
+						stiffness: 20,
+						damping: 15,
+						mass: 2,
+						scale: {
+							type: "spring",
+							stiffness: 10,
+							damping: 5,
+							mass: 0.1,
+						},
+					}}
+					className="px-6 py-4 rounded-xl relative w-full flex justify-center radial-gradient "
+				>
+					<span className="tracking-wide font-extralight h-full w-full block relative linear-mask text-xl">
+						Create Password &rarr;
+					</span>
+					<span className="block absolute inset-0 rounded-lg p-px linear-overlay" />
+				</motion.button>
+			</Link>
+		</div>
+	</div>
+);

src/components/error/Particles404.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect } from "react";
+
+import useWindowWidth from "~/hooks/use-window-width";
+import { handleMouseEnter } from "~/lib/utils";
+import { particlesCanvas } from "./particles";
+
+const Particles404 = () => {
+  const canvaReference = React.useRef<HTMLCanvasElement>(null);
+  const { winWidth } = useWindowWidth();
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (!canvaReference.current) return;
+      particlesCanvas(canvaReference.current);
+    }, 500);
+  }, [winWidth]);
+  return (
+    <div className="absolute left-0 top-0 mx-auto h-full w-full max-w-[1440px] overflow-hidden">
+      <canvas
+        ref={canvaReference}
+        id="particles_404"
+        className="absolute left-0 top-0 h-[100dvh] w-full"
+      />
+      <header className="absolute left-0 top-0 w-full bg-white px-10 py-8 font-medium uppercase text-[#f97415] md:text-3xl">
+        <h1
+          className=""
+          onMouseEnter={handleMouseEnter}
+          data-value="HNG-BOILERPLATE"
+        >
+          Hng-boilerplate
+        </h1>
+      </header>
+      <div className="absolute bottom-10 left-10 font-sans text-2xl uppercase">
+        <p
+          className="font-bold text-[#f97415] md:text-6xl lg:text-9xl xl:text-[10rem]"
+          onMouseEnter={handleMouseEnter}
+          data-value="404!!"
+        >
+          404
+        </p>
+        <p className="font-medium md:text-3xl lg:text-4xl">
+          This is not the page <br /> you are looking for
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Particles404;

src/components/error/particles.ts

@@ -0,0 +1,152 @@
+interface Mouse {
+  radius: number;
+  x: number;
+  y: number;
+}
+
+export function particlesCanvas(canvasElement: HTMLCanvasElement) {
+  const context = canvasElement.getContext("2d");
+
+  const canvas = canvasElement;
+  canvas.width = window.innerWidth * window.devicePixelRatio;
+  canvas.height = window.innerHeight * window.devicePixelRatio;
+
+  canvas.style.width = `${window.innerWidth}px`;
+  canvas.style.height = `${window.innerHeight}px`;
+
+  // Particles Class
+  class Particle {
+    private originX: number;
+    private originY: number;
+    private x: number;
+    private y: number;
+    private effect: Effect;
+    private ctx: CanvasRenderingContext2D;
+    private vx: number;
+    private vy: number;
+    private ease: number;
+    private friction: number;
+    private dx: number;
+    private dy: number;
+    private distance: number;
+    private force: number;
+    private angle: number;
+    private size: number;
+    public spread: number;
+
+    constructor(x: number, y: number, effect: Effect) {
+      this.originX = x;
+      this.originY = y;
+      this.effect = effect;
+      this.x = Math.floor(x);
+      this.y = Math.floor(y);
+      this.ctx = effect.ctx;
+      this.ctx.fillStyle = "#f97415";
+      this.vx = 0;
+      this.vy = 0;
+      this.ease = 0.05;
+      this.friction = 0.9;
+      this.dx = 0;
+      this.dy = 0;
+      this.distance = 0;
+      this.force = 0;
+      this.angle = 0;
+      // this.size = Math.floor(Math.random() * 5 + 2);
+      this.size = 3;
+      this.spread = 20;
+      this.draw();
+    }
+    draw() {
+      this.ctx.beginPath();
+      this.ctx.fillRect(this.x, this.y, this.size, this.size);
+    }
+    update() {
+      this.dx = this.effect.mouse.x - this.x;
+      this.dy = this.effect.mouse.y - this.y;
+      this.distance = this.dx * this.dx + this.dy * this.dy;
+      this.force = (-this.effect.mouse.radius / this.distance) * this.spread;
+
+      if (this.distance < this.effect.mouse.radius) {
+        this.angle = Math.atan2(this.dy, this.dx);
+        this.vx += this.force * Math.cos(this.angle);
+        this.vy += this.force * Math.sin(this.angle);
+      }
+
+      this.x +=
+        (this.vx *= this.friction) + (this.originX - this.x) * this.ease;
+      this.y +=
+        (this.vy *= this.friction) + (this.originY - this.y) * this.ease;
+      this.draw();
+    }
+  }
+
+  // Effect class
+  class Effect {
+    private width: number;
+    private height: number;
+    private gap: number;
+    public ctx: CanvasRenderingContext2D;
+    private particlesArray: Particle[];
+    public readonly mouse: Mouse;
+    constructor(
+      width: number,
+      height: number,
+      context: CanvasRenderingContext2D,
+    ) {
+      this.width = width;
+      this.height = height;
+      this.ctx = context;
+      this.particlesArray = [];
+      this.gap = 20;
+      this.mouse = {
+        radius: 3000,
+        x: 0,
+        y: 0,
+      };
+
+      window.addEventListener("mousemove", (event) => {
+        this.mouse.x = event.clientX * window.devicePixelRatio;
+        this.mouse.y = event.pageY * window.devicePixelRatio;
+        this.mouse.radius = 3000;
+      });
+      window.addEventListener("mouseout", () => {
+        this.mouse.x = 0;
+        this.mouse.y = 0;
+        this.mouse.radius = 0;
+      });
+      window.addEventListener("resize", () => {
+        canvas.width = window.innerWidth * window.devicePixelRatio;
+        canvas.height = window.innerHeight * window.devicePixelRatio;
+        this.width = canvas.width;
+        this.height = canvas.height;
+
+        canvas.style.width = `${window.innerWidth}px`;
+        canvas.style.height = `${window.innerHeight}px`;
+
+        this.particlesArray = [];
+      });
+
+      this.init();
+    }
+
+    init() {
+      for (let x = 0; x < this.width; x += this.gap) {
+        for (let y = 0; y < this.height; y += this.gap) {
+          this.particlesArray.push(new Particle(x, y, this));
+        }
+      }
+    }
+    update() {
+      this.ctx.clearRect(0, 0, this.width, this.height);
+      for (let index = 0; index < this.particlesArray.length; index++) {
+        this.particlesArray[index].update();
+      }
+    }
+  }
+  const effect = new Effect(canvas.width, canvas.height, context!);
+  function animate() {
+    effect.update();
+    requestAnimationFrame(animate);
+  }
+  animate();
+}