Avatar Selector for RSVP Page (#276)

* Added temporary RSVP component testing page

* Implemented the avatar selector component

* Removed preset background color for icons

* Linted files

* Modified to use meta

app/rsvp/page.tsx

@@ -0,0 +1,24 @@
+"use client";
+import AvatarSelector from "@/components/AvatarSelector/AvatarSelector";
+import styles from "./styles.module.scss";
+import { Formik } from "formik";
+
+const RSVPTestingPage: React.FC = () => {
+    return (
+        <div className={styles.screen}>
+            <h1>RSVP Testing Page</h1>
+            <p>This page will be removed shortly.</p>
+            <br />
+            <Formik
+                initialValues={{
+                    avatar: null
+                }}
+                onSubmit={() => {}}
+            >
+                <AvatarSelector name="avatar" label="Select your avatar:" />
+            </Formik>
+        </div>
+    );
+};
+
+export default RSVPTestingPage;

app/rsvp/styles.module.scss

@@ -0,0 +1,8 @@
+.screen {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 100vw;
+    min-height: 100vh;
+    padding-top: 150px;
+}

components/AvatarSelector/AvatarSelector.module.scss

@@ -0,0 +1,38 @@
+.avatarSelector {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.avatarSelector .avatarIcon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 90px;
+    height: 90px;
+    margin: 5px;
+    cursor: pointer;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    transition: border 0.2s ease-in-out;
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+.avatarSelector .avatarIcon.selected {
+    border-color: #dfad72;
+}
+
+.avatarSelector .avatarIconImage {
+    width: 65px;
+    height: 65px;
+    :hover {
+        cursor: pointer;
+    }
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}

components/AvatarSelector/AvatarSelector.tsx

@@ -0,0 +1,61 @@
+"use client";
+import { avatars } from "@/modules/avatars";
+import clsx from "clsx";
+import { useField } from "formik";
+import Image from "next/image";
+import styles from "./AvatarSelector.module.scss";
+
+export type AvatarSelectorProps = {
+    name: string;
+    label: string;
+    required?: boolean;
+};
+
+const AvatarSelector: React.FC<AvatarSelectorProps> = ({
+    name,
+    label,
+    required
+}) => {
+    const [field, meta, helpers] = useField(name);
+    const { setValue } = helpers;
+    const { value } = field;
+
+    const showFeedback = meta.error && meta.touched;
+
+    return (
+        <div className={styles.container}>
+            <label htmlFor={name}>
+                {label}
+                {required && "*"}
+            </label>
+            <div className={styles.avatarSelector}>
+                {avatars.map(avatar => (
+                    <div
+                        style={{
+                            backgroundColor:
+                                avatar.backgroundColor ?? "transparent"
+                        }}
+                        className={clsx(
+                            styles.avatarIcon,
+                            avatar.name === value && styles.selected
+                        )}
+                        key={avatar.name}
+                        onClick={() => {
+                            setValue(avatar.name);
+                        }}
+                    >
+                        <Image
+                            className={styles.avatarIconImage}
+                            src={avatar.icon}
+                            alt={avatar.name}
+                        />
+                    </div>
+                ))}
+            </div>
+
+            <h4>{showFeedback && meta.error}</h4>
+        </div>
+    );
+};
+
+export default AvatarSelector;

components/Form/Checkboxes/Checkboxes.tsx

@@ -1,12 +1,12 @@
 "use client";
-import React, { ChangeEvent, ReactNode, useCallback, useMemo } from "react";
 import clsx from "clsx";
+import React, { ChangeEvent, ReactNode, useCallback, useMemo } from "react";
 
+import { useField } from "formik";
 import styles from "./Checkboxes.module.scss";
-import StyledCheckbox from "./StyledCheckbox/StyledCheckbox";
 import RadioButton from "./RadioButton/RadioButton";
+import StyledCheckbox from "./StyledCheckbox/StyledCheckbox";
 import StyledInput from "./StyledInput/StyledInput";
-import { useField } from "formik";
 
 export type CheckboxOption = {
     label: string | number;

modules/avatars.ts

@@ -10,12 +10,20 @@ import FishAvatar from "@/public/profile/avatars/fish.svg";
 import { Avatars } from "@/util/types";
 
 export const avatars = [
-    { name: Avatars.BUNNY, icon: BunnyAvatar },
-    { name: Avatars.SQUIRREL, icon: ChipmunkAvatar },
-    { name: Avatars.GOBLIN, icon: YodaAvatar },
-    { name: Avatars.CAT, icon: CatAvatar },
-    { name: Avatars.MUSHROOM, icon: MushroomAvatar },
-    { name: Avatars.FISHERCAT, icon: FisherAvatar },
-    { name: Avatars.CHESTER, icon: GarfieldAvatar },
-    { name: Avatars.AXOLOTL, icon: FishAvatar }
+    { name: Avatars.BUNNY, icon: BunnyAvatar, backgroundColor: "#f0f0f0" },
+    {
+        name: Avatars.SQUIRREL,
+        icon: ChipmunkAvatar,
+        backgroundColor: "#f0f0f0"
+    },
+    { name: Avatars.GOBLIN, icon: YodaAvatar, backgroundColor: "#f0f0f0" },
+    { name: Avatars.CAT, icon: CatAvatar, backgroundColor: "#f0f0f0" },
+    {
+        name: Avatars.MUSHROOM,
+        icon: MushroomAvatar,
+        backgroundColor: "#f0f0f0"
+    },
+    { name: Avatars.FISHERCAT, icon: FisherAvatar, backgroundColor: "#f0f0f0" },
+    { name: Avatars.CHESTER, icon: GarfieldAvatar, backgroundColor: "#f0f0f0" },
+    { name: Avatars.AXOLOTL, icon: FishAvatar, backgroundColor: "#f0f0f0" }
 ];