fix #263: address ESlint issues for groupCard component (#617)

Author: tonyb650

.eslintignore

@@ -35,7 +35,6 @@ components/Button/button.tsx
 components/Calendar/calendar.tsx
 components/GiftDetailsView/GiftDetailsView.tsx
 components/GiftSuggestionCard/GiftSuggestionCard.tsx
-components/GroupCard/GroupCard.tsx
 components/ImageSelector/ImageSelector.tsx
 components/Input/input.tsx
 components/InviteCard/InviteCard.tsx

components/GroupCard/GroupCard.tsx

@@ -1,13 +1,23 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import { JSX } from 'react';
 import { GiftExchangeWithMemberCount } from '@/app/types/giftExchange';
 import { formatDate } from '@/lib/utils';
 import { ChevronRight, Users } from 'lucide-react';
 import Link from 'next/link';
+import Image from 'next/image';
 
 type GroupCardProps = {
   giftExchange: GiftExchangeWithMemberCount;
 };
 
-export const GroupCardSkeleton = () => {
+/**
+ * GroupCardSkeleton component.
+ * Displays a loading skeleton placeholder for a GroupCard.
+ * @returns {JSX.Element} Loader skeleton element.
+ */
+export const GroupCardSkeleton = (): JSX.Element => {
   return (
     <div className="h-28 flex items-center p-4 rounded-xl bg-groupCardGreen animate-pulse">
       <div className="h-16 w-16 lg:h-20 lg:w-20 rounded-xl bg-gray-600" />
@@ -26,14 +36,22 @@ export const GroupCardSkeleton = () => {
   );
 };
 
-const GroupCard = ({ giftExchange }: GroupCardProps) => {
+/**
+ * GroupCard component. Renders a styled card that displays
+ * various information about a gift exchange group.
+ * @param {GiftExchangeWithMemberCount} giftExchange - A unique gift exchange.
+ * @returns {JSX.Element} A group card element.
+ */
+const GroupCard = ({ giftExchange }: GroupCardProps): JSX.Element => {
   return (
     <Link href={`/gift-exchanges/${giftExchange.gift_exchange_id}`}>
       <div className="h-28 flex items-center p-4 rounded-xl bg-groupCardGreen">
-        <img
+        <Image
           className="h-16 w-16 lg:h-20 lg:w-20 rounded-xl"
           src={giftExchange.group_image}
-          alt={`${giftExchange.name} image`}
+          height={80}
+          width={80}
+          alt=""
         />
         <div className="flex flex-col flex-grow justify-center h-full ml-4 gap-2">
           <h2 className="font-semibold text-white text-base lg:text-lg">