Make About functional

Author: Rikthepixel

.gitignore

@@ -26,7 +26,8 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
-.env*.local
+.env
+.env.local
 
 # vercel
 .vercel

example.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_BACKEND_URL=https://backend.commitrocket.com

package-lock.json

@@ -9,6 +9,8 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.16",
+    "@hookform/error-message": "^2.0.1",
+    "@hookform/resolvers": "^2.9.11",
     "@types/node": "18.15.0",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
@@ -17,8 +19,11 @@
     "next": "13.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.43.5",
     "tailwind-merge": "^1.10.0",
-    "typescript": "4.9.5"
+    "typescript": "4.9.5",
+    "wretch": "^2.5.1",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.14",

package.json

@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+export const backendResponseSchema = z.object({
+  success: z.boolean(),
+  message: z.string()
+});
+
+export type BackendResponse = z.infer<typeof backendResponseSchema>;

src/api/models/Response.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, useMemo } from "react";;
+import { ButtonHTMLAttributes, DetailedHTMLProps, HTMLAttributes, useMemo } from "react";;
 import { cva, VariantProps as GetVariantProps } from "class-variance-authority";
 import { twMerge } from "tailwind-merge";
 
@@ -17,7 +17,7 @@ export type VariantProps = GetVariantProps<typeof style>;
 type ButtonProps = {
 
 } & RequiredKeys<VariantProps, "color">
-  & HTMLAttributes<HTMLButtonElement>;
+  & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 
 const Button = ({ className, color, ...props }: ButtonProps) => {
 

src/components/controls/Button.tsx

@@ -0,0 +1,29 @@
+import { ErrorMessage } from "@hookform/error-message";
+import { FieldValuesFromFieldErrors } from "@hookform/error-message/dist/types";
+import React from "react";
+import { FieldErrors, FieldName, UseFormReturn } from "react-hook-form";
+import { twMerge } from "tailwind-merge";
+
+interface ErrorProps<Name extends string, FieldValues extends Record<Name, any>> {
+  className?: string;
+  state: UseFormReturn<FieldValues, any>["formState"];
+  name: Name;
+}
+
+const Error = <Name extends string, FieldValues extends Record<Name, any>>({ className, state, name }: ErrorProps<Name, FieldValues>) => {
+  const errors = state.errors;
+
+  return (
+    <ErrorMessage
+      errors={errors}
+      name={name as unknown as FieldName<FieldValuesFromFieldErrors<FieldErrors<FieldValues>>>}
+      render={({ message }) => (
+        <p role="alert" className={twMerge("text-red-600 font-semibold", className)}>
+          {message}
+        </p>
+      )}
+    />
+  );
+};
+
+export default Error;