feat(auth): redesign auth pages with brand panel, IconInput and forgot-password

components/ui/icon-input.tsx

@@ -0,0 +1,27 @@
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Input } from "./input"
+
+interface IconInputProps extends React.ComponentProps<"input"> {
+  icon?: React.ReactNode
+  rightElement?: React.ReactNode
+}
+
+function IconInput({ icon, rightElement, className, ...props }: IconInputProps) {
+  return (
+    <div className="relative">
+      {icon && (
+        <div className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground [&_svg]:size-4">
+          {icon}
+        </div>
+      )}
+      <Input className={cn(icon && "pl-10", rightElement && "pr-10", className)} {...props} />
+      {rightElement && (
+        <div className="absolute right-3 top-1/2 -translate-y-1/2">{rightElement}</div>
+      )}
+    </div>
+  )
+}
+
+export { IconInput }