Initial sidebar/user section

src/components/Profile/ProfileSidebar.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+type ProfileSidebarProps = {
+  option: "user" | "carpool" | "account";
+  setOption: React.Dispatch<
+    React.SetStateAction<"user" | "carpool" | "account">
+  >;
+};
+
+const ProfileSidebar = ({ option, setOption }: ProfileSidebarProps) => {
+  const baseButton = "px-4 py-2 text-northeastern-red font-montserrat text-xl ";
+  const selectedButton = " font-bold underline underline-offset-8 ";
+  return (
+    <div className="h-full w-full  ">
+      <div className="mt-6 flex flex-col items-start gap-4">
+        <button
+          className={baseButton + (option === "user" && selectedButton)}
+          onClick={() => setOption("user")}
+        >
+          User Profile
+        </button>
+        <button
+          className={baseButton + (option === "carpool" && selectedButton)}
+          onClick={() => setOption("carpool")}
+        >
+          Carpool Details
+        </button>
+        <button
+          className={baseButton + (option === "account" && selectedButton)}
+          onClick={() => setOption("account")}
+        >
+          Account Status
+        </button>
+      </div>
+    </div>
+  );
+};
+export default ProfileSidebar;

src/components/Profile/UserSection.tsx

@@ -0,0 +1,182 @@
+import {
+  LightEntryLabel,
+  Note,
+  PersonalInfoSection,
+  ProfileColumn,
+  ProfileHeader,
+  ProfileHeaderNoMB,
+  TopProfileSection,
+} from "../../styles/profile";
+import Radio from "../Radio";
+import { Role, Status } from "@prisma/client";
+import { EntryLabel } from "../EntryLabel";
+import { TextField } from "../TextField";
+import {
+  Controller,
+  FieldErrors,
+  UseFormRegister,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+import { OnboardingFormInputs } from "../../utils/types";
+import styled from "styled-components";
+import ProfilePicture from "./ProfilePicture";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+interface UserSectionProps {
+  register: UseFormRegister<OnboardingFormInputs>;
+  errors: FieldErrors<OnboardingFormInputs>;
+  setValue: UseFormSetValue<OnboardingFormInputs>;
+  watch: UseFormWatch<OnboardingFormInputs>;
+  onFileSelect: (file: File | null) => void;
+}
+const UserSection = ({
+  errors,
+  watch,
+  register,
+  setValue,
+  onFileSelect,
+}: UserSectionProps) => {
+  const isViewer = watch("role") === Role.VIEWER;
+  return (
+    <div className="relative flex h-full w-full flex-col justify-start p-20">
+      <ProfileHeader>User Profile</ProfileHeader>
+      <ProfileHeaderNoMB>
+        I am a... <span className="text-northeastern-red">*</span>
+      </ProfileHeaderNoMB>
+      <div className="flex h-20 items-end space-x-4">
+        <Radio
+          label="Viewer"
+          id="viewer"
+          error={errors.role}
+          role={Role.VIEWER}
+          value={Role.VIEWER}
+          currentlySelected={watch("role")}
+          {...register("role")}
+        />
+        <Radio
+          label="Rider"
+          id="rider"
+          error={errors.role}
+          role={Role.RIDER}
+          value={Role.RIDER}
+          currentlySelected={watch("role")}
+          {...register("role")}
+        />
+        <Radio
+          label="Driver"
+          id="driver"
+          error={errors.role}
+          role={Role.DRIVER}
+          value={Role.DRIVER}
+          currentlySelected={watch("role")}
+          {...register("role")}
+        />
+
+        {watch("role") == Role.DRIVER && (
+          <div className="flex flex-1 flex-col">
+            <EntryLabel
+              required={true}
+              error={errors.seatAvail}
+              label="Seat availability"
+            />
+            <TextField
+              inputClassName="py-[14px] h-14 text-lg"
+              className="w-full self-end"
+              label="Seat Availability"
+              id="seatAvail"
+              error={errors.seatAvail}
+              type="number"
+              min="0"
+              {...register("seatAvail", { valueAsNumber: true })}
+            />
+          </div>
+        )}
+      </div>
+      <Note>
+        {watch("role") === Role.DRIVER && (
+          <span>Looking for Carpoolers to join you.</span>
+        )}
+        {watch("role") === Role.RIDER && (
+          <span>Looking for a Carpool to join.</span>
+        )}
+        {watch("role") === Role.VIEWER && (
+          <span>
+            As a viewer, you can see other riders and drivers on the map but
+            cannot request a ride.
+          </span>
+        )}
+      </Note>
+      <ProfileHeader>Personal Info</ProfileHeader>
+      <div className=" w-full ">
+        <ProfilePicture onFileSelected={onFileSelect} />
+      </div>
+
+      <div className="flex w-full flex-row  space-x-6">
+        <div className="flex w-3/5 flex-col">
+          <LightEntryLabel error={!!errors.preferredName}>
+            Preferred Name
+          </LightEntryLabel>
+          <TextField
+            id="preferredName"
+            error={errors.preferredName}
+            isDisabled={isViewer}
+            type="text"
+            inputClassName={`h-12`}
+            {...register("preferredName")}
+          />
+        </div>
+
+        {/* Pronouns field  */}
+        <div className="w-2/6 flex-1">
+          <LightEntryLabel error={!!errors.pronouns}>Pronouns</LightEntryLabel>
+          <TextField
+            id="pronouns"
+            inputClassName={`h-12`}
+            error={errors.pronouns}
+            charLimit={20}
+            isDisabled={isViewer}
+            defaultValue={watch("pronouns") ? `(${watch("pronouns")})` : ""}
+            type="text"
+            onChange={(e: any) => {
+              const input = e.target;
+              const cursorPosition = input.selectionStart || 0;
+              const sanitizedValue = input.value.replace(/[()]/g, "");
+              const displayValue = sanitizedValue ? `(${sanitizedValue})` : "";
+              setValue("pronouns", sanitizedValue, {
+                shouldValidate: true,
+              });
+              input.value = displayValue;
+              // Reset cursor
+              const adjustedCursor = Math.min(
+                cursorPosition + 1,
+                displayValue.length - 1
+              );
+              input.setSelectionRange(adjustedCursor, adjustedCursor);
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Bio field */}
+      <div className="w-full py-4">
+        <EntryLabel error={errors.bio} label="About Me" />
+        <textarea
+          className={`form-input w-full resize-none rounded-md
+                       ${
+                         isViewer
+                           ? "border-gray-100 bg-gray-200 text-gray-400"
+                           : ""
+                       } border-black px-3 py-2`}
+          maxLength={188}
+          disabled={isViewer}
+          {...register("bio")}
+        />
+        <Note>
+          This intro will be shared with people you choose to connect with.
+        </Note>
+      </div>
+    </div>
+  );
+};
+export default UserSection;