Feat/hng-124

.hintrc

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "no-inline-styles": "off"
+  }
+}

app/components/bio/index.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+
+import { defaultFormError, defaultFormState, FormField } from "../constant";
+import { TextAreaField } from "../textarea";
+
+export default function Bio() {
+  const [formState, setFormState] = useState(defaultFormState);
+  const [formError, setFormError] = useState(defaultFormError);
+
+  const updateFormData = (key: string, value: string) => {
+    if (value.length > 64) {
+      setFormError({
+        ...formError,
+        [key]: "Your bio cannot exceed 64 characters",
+      });
+    } else {
+      setFormError({
+        ...formError,
+        [key]: undefined,
+      });
+    }
+
+    setFormState({
+      ...formState,
+      [key]: value,
+    });
+  };
+
+  return (
+    <div className="p-6 font-sans">
+      <TextAreaField
+        label="Bio"
+        placeholder="A seasoned front-end developer with fulfilling duties."
+        name={FormField.bio}
+        value={formState[FormField.bio]}
+        error={formError[FormField.bio]}
+        handleChange={(event: React.ChangeEvent<HTMLTextAreaElement>) =>
+          updateFormData(FormField.bio, event.target.value)
+        }
+      />
+    </div>
+  );
+}

app/components/constant/index.tsx

@@ -0,0 +1,19 @@
+import { IFormError, IFormState } from "../typings";
+
+export enum FormField {
+  bio = "bio",
+}
+
+export const defaultFormState: IFormState = {
+  [FormField.bio]: "",
+};
+
+export const defaultFormError: IFormError = {
+  [FormField.bio]: undefined,
+};
+
+export const defaultAlert: { message: string | undefined; classType?: string } =
+  {
+    message: undefined,
+    classType: undefined,
+  };

app/components/textarea/index.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+interface Properties {
+  label: string;
+  name: string;
+  value: string;
+  placeholder?: string;
+  disabled?: boolean;
+  error?: string | null;
+  handleChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  style?: React.CSSProperties;
+}
+
+export const TextAreaField: React.FC<Properties> = ({
+  label,
+  name,
+  placeholder,
+  disabled,
+  value,
+  error,
+  handleChange,
+}) => {
+  return (
+    <div className="flex flex-col gap-2 text-black">
+      <label htmlFor={name} className="text-sm">
+        {label}
+      </label>
+      <div className="flex flex-col gap-1">
+        <div className="w-full rounded-md bg-white text-base text-black outline-0">
+          <textarea
+            id={name}
+            placeholder={placeholder}
+            disabled={disabled}
+            value={value}
+            onChange={handleChange}
+            className="h-[80px] w-full text-wrap rounded-md border border-[#DC2626] bg-white px-2 outline-0 placeholder:text-sm placeholder:text-[#C2C2C2]"
+          />
+        </div>
+        {error && <span className="text-xs text-[#DC2626]">* {error}</span>}
+      </div>
+    </div>
+  );
+};
+
+export default TextAreaField;

app/components/typings/index.tsx

@@ -0,0 +1,17 @@
+import { FormField } from "../constant";
+
+export interface IResult {
+  [key: string]: number | undefined;
+}
+
+export interface IModifiedResult {
+  [key: string]: Array<string>;
+}
+
+export interface IFormState {
+  [FormField.bio]: string;
+}
+
+export interface IFormError {
+  [FormField.bio]: string | undefined;
+}