feat: renamed component

components/DiscordAvatar.tsx

@@ -0,0 +1,60 @@
+import { SyntheticEvent } from 'react'
+import { ImageSize } from '../types'
+import { DiscordEnpoints } from '../utils/Constants'
+
+const DiscordAvatar = (props: {
+	alt?: string
+	userID: string
+	avatarHash: string
+	tag: string
+	className?: string
+	size? : ImageSize
+}) => {
+	const fallback ='/img/default.png'
+	const webp = localStorage.webp === 'true'
+	return (
+		<img
+			alt={props.alt ?? 'IMage'}
+			className={props.className}
+			src={
+				props.avatarHash
+					? DiscordEnpoints.CDN.user(props.userID, props.avatarHash, { format: webp ? 'webp' : 'png', size: props.size ?? 256})
+					: DiscordEnpoints.CDN.default(props.tag, { format: webp ? 'webp' : 'png', size: props.size ?? 256})
+			}
+			onError={(e: SyntheticEvent<HTMLImageElement, ImageEvent>)=> {
+				if(webp) {
+					(e.target as ImageTarget).onerror = (event) => {
+						// All Fails
+						(event.target as ImageTarget).onerror = ()=> { console.log('FALLBACK IMAGE LOAD FAIL') }
+						(event.target as ImageTarget).src = fallback
+					}
+					// Webp Load Fail
+					(e.target as ImageTarget).src = props.avatarHash
+						? DiscordEnpoints.CDN.user(props.userID, props.avatarHash, { size: props.size ?? 256 })
+						: DiscordEnpoints.CDN.default(props.tag, { size: props.size ?? 256})
+				}
+				else (e.target as ImageTarget).onerror = (event) => {
+					// All Fails
+					(event.target as ImageTarget).onerror = ()=> { console.log('FALLBACK IMAGE LOAD FAIL') }
+					(event.target as ImageTarget).src = fallback
+				}
+				// Webp Load Fail
+				(e.target as ImageTarget).src = props.avatarHash
+					? DiscordEnpoints.CDN.user(props.userID, props.avatarHash, { size: props.size ?? 256 }) 
+					: DiscordEnpoints.CDN.default(props.tag, { size: props.size ?? 256})
+					
+			}}
+		/>	
+	)
+}
+
+export default DiscordAvatar
+
+interface ImageEvent extends Event {
+	target: ImageTarget
+}
+
+interface ImageTarget extends EventTarget {
+	src: string
+	onerror: (event: SyntheticEvent<HTMLImageElement, ImageEvent>) => void
+}

components/DiscordImage.tsx

@@ -1,25 +0,0 @@
-import NextImage from 'next/image'
-
-const DiscordImage = (props: {
-	size?: number
-	userID: string
-	avatarHash: string
-	tag: number | string
-	className?: string
-}) => {
-	return (
-		<NextImage
-			className={props.className}
-			src={
-				props.avatarHash
-					? `https://cdn.discordapp.com/avatars/${props.userID}/${props.avatarHash}.png?size=128`
-					: `https://cdn.discordapp.com/embed/avatars/${Number(props.tag) % 5}.png?size=128`
-			}
-			width={props.size || 256}
-			height={props.size || 256}
-			data-fallback-image='/img/default.png'
-		/>
-	)
-}
-
-export default DiscordImage

components/Owner.tsx

@@ -1,23 +1,17 @@
 import Link from 'next/link'
-import DiscordImage from './DiscordImage'
+import DiscordAvatar from './DiscordAvatar'
 
 const Owner = ({ id, username, tag, avatarHash }:OwnerProps):JSX.Element => {
 	return <Link href={`/users/${id}`}>
 		<div className='text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 rounded flex hover:bg-little-white-hover dark:hover:bg-discord-dark-hover cursor-pointer px-4 py-4 mb-1'>
 			<div className='rounded-full h-8 w-8 flex-shrink-0 mr-3 mt-1 overflow-hidden shadow-inner relative'>
-				<DiscordImage userID={id} tag={tag} avatarHash={avatarHash} className='absolute inset-0 z-negative w-full h-full' size={50} />
+				<DiscordAvatar userID={id} tag={tag} avatarHash={avatarHash} className='absolute inset-0 z-negative w-full h-full'/>
 			</div> 
 			<div className='flex-1 leading-snug w-0'>
 				<h4 className='whitespace-nowrap'>{username}
 				</h4><span className='text-sm text-gray-600'>#{tag}</span>
 			</div>
 		</div>
-		{/* <div className='text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 px-2 rounded mr-1 mb-3 hover:bg-little-white-hover dark:hover:bg-discord-dark-hover w-full py-5'>  
-			<DiscordImage userID={id} tag={tag} avatarHash={avatarHash} className='rounded-full float-left mr-4 py-' size={30} />
-			<span className='ml-3'>
-				{username} <span className='text-gray-300 text-sm mt-2'>#{tag}</span>
-			</span>
-		</div> */}
 	</Link>
 }
 

pages/bots/[id].tsx

@@ -5,7 +5,7 @@ import { ParsedUrlQuery } from 'querystring'
 import { Bot, User } from '../../types'
 
 import Container from '../../components/Container'
-import DiscordImage from '../../components/DiscordImage'
+import DiscordAvatar from '../../components/DiscordAvatar'
 import Divider from '../../components/Divider'
 import Tag from '../../components/Tag'
 import Owner from '../../components/Owner'
@@ -34,7 +34,7 @@ const Bots: NextPage<BotsProps> = ({ data, date }) => {
 			/>
 			<div className='lg:flex'>
 				<div className='w-full text-center lg:w-1/4'>
-					<DiscordImage
+					<DiscordAvatar
 						userID={data.id}
 						avatarHash={data.avatar}
 						tag={data.tag}

pages/users/[id].tsx

@@ -8,7 +8,7 @@ import { Bot, User } from '../../types'
 import NotFound from '../404'
 import Container from '../../components/Container'
 import SEO from '../../components/SEO'
-import DiscordImage from '../../components/DiscordImage'
+import DiscordAvatar from '../../components/DiscordAvatar'
 import Divider from '../../components/Divider'
 import BotCard from '../../components/BotCard'
 import Tag from '../../components/Tag'
@@ -35,7 +35,7 @@ const Users: NextPage<UserProps> = ({ data }) => {
 			/>
 			<div className='lg:flex'>
 				<div className='w-full text-center lg:w-1/4'>
-					<DiscordImage
+					<DiscordAvatar
 						userID={data.id}
 						avatarHash={data.avatar}
 						tag={data.tag}