cc

Author: MyNameIsBond

app/(auth)/auth/error/page.tsx

@@ -1,5 +1,35 @@
+import { RxExclamationTriangle } from 'react-icons/rx'
+import { Button } from '@nextui-org/button'
+import { Spotlight } from '@/components/ui/Spotlight'
 const page = ({ searchParams }: { searchParams: { error: string } }) => {
-  return <div>{JSON.stringify(searchParams)}</div>
+  console.log()
+  if (searchParams.error === 'Configuration') {
+    return (
+      <div className="">
+        <div className="h-screen w-full rounded-md flex md:items-center md:justify-center bg-black/[0.96] antialiased bg-grid-white/[0.02] relative overflow-hidden">
+          <Spotlight
+            className="-top-40 left-0 md:left-60 md:-top-20"
+            fill="white"
+          />
+          <div className=" p-4 max-w-7xl  mx-auto relative z-10  w-full pt-20 md:pt-0">
+            <h1 className="text-4xl md:text-7xl font-bold text-center bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400 bg-opacity-50">
+              Configuration <br />
+              Error
+            </h1>
+            <p className="mt-4 font-normal text-base text-neutral-300 max-w-lg text-center mx-auto">
+              We are sorry, but there was an error with the configuration of the
+              email. Please try again later.
+            </p>
+            <div className="mx-auto w-fit pt-10">
+              <Button>Go Back</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return <p>hello</p>
 }
 
 export default page

app/(auth)/signin/action.ts

@@ -1,15 +1,10 @@
 'use server'
 import { signIn } from '@/auth'
-import { redirect } from 'next/navigation'
+
 export const signInWithGitHub = async () => {
   await signIn('github')
 }
 
 export const signInWithMagicLink = async (formData: FormData) => {
-  console.log('first')
   await signIn('resend', formData)
-  if (error) {
-    redirect('/signin?message=Not Valid Login credentials')
-  }
-  redirect('/')
 }

components/ui/Spotlight.tsx

@@ -0,0 +1,56 @@
+import cn from '@/lib/utils/cn'
+import React from 'react'
+
+type SpotlightProps = {
+  className?: string
+  fill?: string
+}
+
+export const Spotlight = ({ className, fill }: SpotlightProps) => {
+  return (
+    <svg
+      className={cn(
+        'animate-spotlight pointer-events-none absolute z-[1]  h-[169%] w-[138%] lg:w-[84%] opacity-0',
+        className,
+      )}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 3787 2842"
+      fill="none"
+    >
+      <g filter="url(#filter)">
+        <ellipse
+          cx="1924.71"
+          cy="273.501"
+          rx="1924.71"
+          ry="273.501"
+          transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
+          fill={fill || 'white'}
+          fillOpacity="0.21"
+        ></ellipse>
+      </g>
+      <defs>
+        <filter
+          id="filter"
+          x="0.860352"
+          y="0.838989"
+          width="3785.16"
+          height="2840.26"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          ></feBlend>
+          <feGaussianBlur
+            stdDeviation="151"
+            result="effect1_foregroundBlur_1065_8"
+          ></feGaussianBlur>
+        </filter>
+      </defs>
+    </svg>
+  )
+}

tailwind.config.js

@@ -1,5 +1,4 @@
-const {nextui} = require("@nextui-org/react");
-
+const { nextui } = require('@nextui-org/react')
 
 module.exports = {
   content: [
@@ -30,6 +29,21 @@ module.exports = {
       textOpacity: ['dark'],
       backgroundColor: ['checked'],
       borderColor: ['checked'],
+      animation: {
+        spotlight: 'spotlight 2s ease .75s 1 forwards',
+      },
+      keyframes: {
+        spotlight: {
+          '0%': {
+            opacity: 0,
+            transform: 'translate(-72%, -62%) scale(0.5)',
+          },
+          '100%': {
+            opacity: 1,
+            transform: 'translate(-50%,-40%) scale(1)',
+          },
+        },
+      },
     },
   },
   plugins: [