Merge pull request #549 from DeXter-on-Radix/fork-SiegfriedBz--add-40…

…4-page

add 404 page

.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+scripts/credentials/
+TODO.txt
+
 # dependencies
 /node_modules
 /.pnp

src/app/components/DexterButton.tsx

@@ -1,38 +1,47 @@
 "use client";
 
 import { useHydrationErrorFix } from "hooks";
+import { twMerge } from "tailwind-merge";
 
 interface DexterButtonProps {
   title: string;
   targetUrl?: string;
   targetBlank?: boolean;
   maxWidth?: string;
+  minHeight?: string;
+  wrapperClassName?: string;
+  buttonClassName?: string;
+  labelClassName?: string;
 }
 
 export function DexterButton({
   title,
   targetUrl,
   targetBlank,
   maxWidth = "w-[220px]",
+  minHeight = "h-[44px]",
+  wrapperClassName = "",
+  buttonClassName = "",
+  labelClassName = "",
 }: DexterButtonProps) {
   const isClient = useHydrationErrorFix();
 
   if (!isClient) return null;
 
+  const wrapperDefaultClassName = `z-100 min-w-[220px] max-${maxWidth}`;
+  const buttonDefaultClassName = `min-${minHeight} ${maxWidth} px-4 mb-6 mt-8 rounded bg-dexter-green-OG text-black uppercase opacity-100`;
+  const labelDefaultClassName = "font-bold text-sm tracking-[.1px]";
+
   return (
     <a
       href={targetUrl}
-      className={`z-100 min-w-[220px] max-${maxWidth}`}
+      className={twMerge(wrapperDefaultClassName, wrapperClassName)}
       target={`${targetBlank ? "_blank" : ""}`}
     >
-      <button
-        className={
-          `min-h-[44px] ${maxWidth} px-4 my-6 mt-8 rounded ` +
-          `bg-dexter-green-OG text-black uppercase ` +
-          `opacity-100 cursor-pointer `
-        }
-      >
-        <span className="font-bold text-sm tracking-[.1px] ">{title}</span>
+      <button className={twMerge(buttonDefaultClassName, buttonClassName)}>
+        <span className={twMerge(labelDefaultClassName, labelClassName)}>
+          {title}
+        </span>
       </button>
     </a>
   );

src/app/not-found.tsx

@@ -0,0 +1,22 @@
+import { DexterButton } from "components/DexterButton";
+
+export default function NotFound() {
+  return (
+    <div className="w-full mt-8 max-[401px]:mb-16 max-md:mb-20 max-xl:mb-24 xl:mb-32 h-full flex flex-col justify-center items-center">
+      <h2 className="bg-gradient-to-r from-dexter-gradient-blue to-dexter-gradient-green to-80% bg-clip-text text-transparent">
+        <span className="max-[401px]:text-5xl max-sm:text-6xl max-lg:text-7xl max-xl:text-8xl text-9xl font-normal">
+          404 :(
+        </span>
+      </h2>
+      <p className="max-[401px]:text-base max-sm:text-lg max-xl:text-xl text-2xl font-normal text-white/90">
+        You got the wrong way
+      </p>
+
+      <DexterButton
+        title="Back to trade"
+        targetUrl="/trade"
+        buttonClassName="md:mt-10"
+      />
+    </div>
+  );
+}