feat(contact): migrate form to use shadcn and aceternity

src/components/aceternity/input.tsx

@@ -0,0 +1,61 @@
+// Input component extends from shadcnui - https://ui.shadcn.com/docs/components/input
+'use client'
+import { motion, useMotionTemplate, useMotionValue } from 'framer-motion'
+import { forwardRef, useState } from 'react'
+import { cn } from '@/components/utils/cn'
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> { }
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    const radius = 100 // change this to increase the rdaius of the hover effect
+    const [visible, setVisible] = useState(false)
+
+    const mouseX = useMotionValue(0)
+    const mouseY = useMotionValue(0)
+
+    function handleMouseMove({ currentTarget, clientX, clientY }: any) {
+      const { left, top } = currentTarget.getBoundingClientRect()
+
+      mouseX.set(clientX - left)
+      mouseY.set(clientY - top)
+    }
+    return (
+      <motion.div
+        style={{
+          background: useMotionTemplate`
+        radial-gradient(
+          ${visible ? `${radius}px` : '0px'} circle at ${mouseX}px ${mouseY}px,
+          var(--sky-700),
+          transparent 80%
+        )
+      `,
+        }}
+        onMouseMove={handleMouseMove}
+        onMouseEnter={() => setVisible(true)}
+        onMouseLeave={() => setVisible(false)}
+        className="p-[2px] rounded-lg transition duration-300 group/input"
+      >
+        <input
+          type={type}
+          className={cn(
+            `flex h-10 w-full border bg-background text-black dark:text-white shadow-input rounded-md px-3 py-2 text-sm file:border-0 file:bg-transparent 
+          file:text-sm file:font-medium placeholder:text-neutral-400 dark:placeholder-text-neutral-600 
+          focus-visible:outline-none focus-visible:ring-[2px]  focus-visible:ring-neutral-400 dark:focus-visible:ring-info
+           disabled:cursor-not-allowed disabled:opacity-50
+           dark:shadow-[0px_0px_1px_1px_var(--sky-950)]
+           group-hover/input:shadow-none transition duration-400
+           `,
+            className,
+          )}
+          ref={ref}
+          {...props}
+        />
+      </motion.div>
+    )
+  },
+)
+Input.displayName = 'Input'
+
+export { Input }

src/components/aceternity/label.tsx

@@ -0,0 +1,25 @@
+// Label component extends from shadcnui - https://ui.shadcn.com/docs/components/label
+
+'use client'
+import * as LabelPrimitive from '@radix-ui/react-label'
+
+import type { ComponentPropsWithoutRef, ElementRef } from 'react'
+import { forwardRef } from 'react'
+import { cn } from '@/components/utils/cn'
+
+const Label = forwardRef<
+  ElementRef<typeof LabelPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      'text-sm font-medium text-black dark:text-white leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+      className,
+    )}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

src/components/aceternity/text-area.tsx

@@ -0,0 +1,71 @@
+// Not originally from Aceternity, but uses the styles from the input component
+import * as React from 'react'
+import { motion, useMotionTemplate, useMotionValue } from 'framer-motion'
+import { cn } from '@/components/utils/cn'
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { }
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    const radius = 100 // change this to increase the radius of the hover effect
+    const [visible, setVisible] = React.useState(false)
+
+    const mouseX = useMotionValue(0)
+    const mouseY = useMotionValue(0)
+
+    function handleMouseMove({ currentTarget, clientX, clientY }: any) {
+      const { left, top } = currentTarget.getBoundingClientRect()
+
+      mouseX.set(clientX - left)
+      mouseY.set(clientY - top)
+    }
+
+    return (
+    // <textarea
+    //   className={cn(
+    //     'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    //     className,
+    //   )}
+    //   ref={ref}
+    //   {...props}
+    // />
+
+      <motion.div
+        style={{
+          background: useMotionTemplate`
+          radial-gradient(
+            ${visible ? `${radius}px` : '0px'} circle at ${mouseX}px ${mouseY}px,
+            var(--sky-700),
+            transparent 80%
+          )
+        `,
+        }}
+        onMouseMove={handleMouseMove}
+        onMouseEnter={() => setVisible(true)}
+        onMouseLeave={() => setVisible(false)}
+        className="p-[2px] rounded-lg transition duration-300 group/input"
+      >
+        <textarea
+          className={cn(
+            `flex min-h-[80px] w-full border dark:bg-background text-black dark:text-white shadow-input rounded-md px-3 py-2 text-sm  file:border-0 file:bg-transparent
+          file:text-sm file:font-medium placeholder:text-neutral-400 dark:placeholder-text-neutral-600
+          focus-visible:outline-none focus-visible:ring-[2px]  focus-visible:ring-neutral-400 dark:focus-visible:ring-info
+          disabled:cursor-not-allowed disabled:opacity-50
+          dark:shadow-[0px_0px_1px_1px_var(--sky-950)]
+          group-hover/input:shadow-none transition duration-400
+          `,
+            className,
+          )}
+          ref={ref}
+          {...props}
+        />
+      </motion.div>
+
+    )
+  },
+)
+
+Textarea.displayName = 'Textarea'
+
+export { Textarea }