Implement profile page

src/components/common/GifSafeImage/index.tsx

@@ -0,0 +1,13 @@
+import { isSrcAGif } from '@/lib/utils';
+import Image, { ImageProps } from 'next/image';
+
+/**
+ * A next/image Image that is automatically unoptimized when `src` is a gif
+ * @param props - props for Next Image component
+ * @returns image component
+ */
+const GifSafeImage = ({ src, alt, ...restProps }: ImageProps) => {
+  return <Image src={src} alt={alt} unoptimized={isSrcAGif(src)} {...restProps} />;
+};
+
+export default GifSafeImage;

src/components/common/index.ts

@@ -3,6 +3,7 @@ export { default as Carousel } from './Carousel';
 export { default as CommunityLogo } from './CommunityLogo';
 export { default as Cropper } from './Cropper';
 export { default as Dropdown } from './Dropdown';
+export { default as GifSafeImage } from './GifSafeImage';
 export { default as LinkButton } from './LinkButton';
 export { default as Modal } from './Modal';
 export { default as PaginationControls } from './PaginationControls';

src/components/events/index.tsx

@@ -1,2 +1,6 @@
+export { default as CalendarButtons } from './CalendarButtons';
+export { default as EventCard } from './EventCard';
 export { default as EventCarousel } from './EventCarousel';
 export { default as EventDisplay } from './EventDisplay';
+export { default as EventModal } from './EventModal';
+export { default as PointsDisplay } from './PointsDisplay';

src/components/home/Hero/style.module.scss

@@ -122,6 +122,11 @@
         &:hover {
           box-shadow: 0 5px 10px var(--theme-shadow);
         }
+
+        svg {
+          height: 24px;
+          width: 24px;
+        }
       }
     }
   }

src/components/layout/Navbar/style.module.scss

@@ -105,6 +105,8 @@
       .iconLink {
         color: var(--theme-text-on-background-1);
         cursor: pointer;
+        height: 24px;
+        width: 24px;
       }
     }
   }
@@ -150,6 +152,11 @@
       &:hover {
         background-color: var(--theme-surface-1);
       }
+
+      svg {
+        height: 24px;
+        width: 24px;
+      }
     }
   }
 

src/components/leaderboard/LeaderboardRow/index.tsx

@@ -1,5 +1,4 @@
-import { isSrcAGif } from '@/lib/utils';
-import Image from 'next/image';
+import GifSafeImage from '@/components/common/GifSafeImage';
 import Link from 'next/link';
 import { useEffect, useRef } from 'react';
 import styles from './style.module.scss';
@@ -52,14 +51,13 @@ const LeaderboardRow = ({
   return (
     <Link href={url} className={styles.row} ref={ref}>
       <span className={styles.position}>{position}</span>
-      <Image
+      <GifSafeImage
         src={image}
         width={36}
         height={36}
         quality={10}
         alt={`Profile picture for ${name}`}
         className={styles.profilePicture}
-        unoptimized={isSrcAGif(image)}
       />
       <div className={styles.nameRank}>
         <span className={styles.name}>

src/components/leaderboard/TopThreeCard/index.tsx

@@ -1,5 +1,5 @@
-import { isSrcAGif, trim } from '@/lib/utils';
-import Image from 'next/image';
+import GifSafeImage from '@/components/common/GifSafeImage';
+import { trim } from '@/lib/utils';
 import Link from 'next/link';
 import styles from './style.module.scss';
 
@@ -18,13 +18,12 @@ const TopThreeCard = ({ position, rank, name, url, points, image }: UserCardProp
     <Link href={url} className={styles.leaderboardCard} data-position={positionNames[position - 1]}>
       <div className={styles.cardLeft}>{position}</div>
       <div className={styles.cardRight}>
-        <Image
+        <GifSafeImage
           className={styles.profileImage}
           src={image}
           alt="User Profile Pic"
           width={80}
           height={80}
-          unoptimized={isSrcAGif(image)}
         />
         <span className={styles.cardText}>{trim(name, 25)}</span>
         <span className={styles.cardText}>{rank}</span>

src/components/profile/HandleNotFound/index.tsx

@@ -0,0 +1,18 @@
+import { SignInButton } from '@/components/auth';
+import { Typography, VerticalForm } from '@/components/common';
+import Cat404 from '@/public/assets/graphics/cat404.png';
+import Image from 'next/image';
+
+export interface HandleNotFoundProps {
+  handle: string;
+}
+
+export const HandleNotFound = ({ handle }: HandleNotFoundProps) => (
+  <VerticalForm style={{ alignItems: 'center', margin: 'auto' }}>
+    <Typography variant="h1/medium" style={{ textAlign: 'center' }}>
+      No user with handle &lsquo;{handle}&rsquo; was found.
+    </Typography>
+    <Image src={Cat404} width={256} height={256} alt="Sad Cat" />
+    <SignInButton type="link" display="button1" href="/" text="Return to Home" />
+  </VerticalForm>
+);

src/components/profile/Preview/index.tsx

@@ -1,9 +1,9 @@
 import { Typography } from '@/components/common';
+import GifSafeImage from '@/components/common/GifSafeImage';
 import SocialMediaIcon from '@/components/profile/SocialMediaIcon';
 import { PublicProfile } from '@/lib/types/apiResponses';
 import { SocialMediaType } from '@/lib/types/enums';
-import { getLevel, getProfilePicture, isSrcAGif } from '@/lib/utils';
-import Image from 'next/image';
+import { getLevel, getProfilePicture } from '@/lib/utils';
 import styles from './style.module.scss';
 
 const fixUrl = (url: string) => (url.includes('://') ? url : `http://${url}`);
@@ -31,13 +31,12 @@ interface PreviewProps {
 const Preview = ({ user, pfpCacheBust }: PreviewProps) => {
   return (
     <div className={styles.wrapper}>
-      <Image
+      <GifSafeImage
         className={styles.pfp}
         src={getProfilePicture(user) + (pfpCacheBust !== -1 ? `?_=${pfpCacheBust}` : '')}
         alt="Profile picture"
         width={90}
         height={90}
-        unoptimized={isSrcAGif(user.profilePicture)}
       />
       <Typography variant="h2/bold" component="p">
         {user.firstName} {user.lastName}

src/components/profile/Preview/style.module.scss

@@ -2,7 +2,9 @@
   align-items: center;
   display: flex;
   flex-direction: column;
+  position: sticky;
   text-align: center;
+  top: 4rem;
 
   .pfp {
     border-radius: 50%;