Add conditional rendering for UserAvatar to show placeholder Image ba…

…sed on login status & only show rating required error when logged in
discordplace · Sep 20, 2024 · 2c30926 · 2c30926
1 parent 8dca03d
commit 2c30926
Showing 1 changed file with 34 additions and 20 deletions.
diff --git a/client/app/(bots)/bots/[id]/components/Tabs/Reviews.jsx b/client/app/(bots)/bots/[id]/components/Tabs/Reviews.jsx
@@ -15,6 +15,7 @@ import config from '@/config';
 import useLanguageStore, { t } from '@/stores/language';
 import UserAvatar from '@/app/components/ImageFromHash/UserAvatar';
 import ReportableArea from '@/app/components/ReportableArea';
+import Image from 'next/image';
 
 export default function Reviews({ bot }) {
   const [page, setPage] = useState(1);
@@ -137,14 +138,25 @@ export default function Reviews({ bot }) {
           <>
             <div className='w-[35%] flex flex-col gap-y-3'>
               <div className="flex gap-x-4">
-                <UserAvatar
-                  id={user?.id}
-                  hash={user?.avatar}
-                  size={64}
-                  width={48}
-                  height={48}
-                  className='rounded-2xl w-[48px] h-[48px]'
-                />
+                {loggedIn ? (
+
+                  <UserAvatar
+                    id={user?.id}
+                    hash={user?.avatar}
+                    size={64}
+                    width={48}
+                    height={48}
+                    className='rounded-2xl w-[48px] h-[48px]'
+                  />
+                ) : (
+                  <Image
+                    src='https://cdn.discordapp.com/embed/avatars/0.png'
+                    alt='Placeholder Avatar'
+                    width={48}
+                    height={48}
+                    className='rounded-2xl w-[48px] h-[48px]'
+                  />
+                )}
 
                 <div className='flex flex-col gap-y-1'>
                   <h3 className='text-base font-semibold'>
@@ -181,18 +193,20 @@ export default function Reviews({ bot }) {
                 </div>
               </div>
 
-              <span
-                className={cn(
-                  'text-xs font-medium text-tertiary select-none',
-                  selectedRating === 0 && 'text-red-400'
-                )}
-              >
-                {selectedRating === 0 ? (
-                  t('botPage.tabs.reviews.ratingRequired')
-                ) : (
-                  t('botPage.tabs.reviews.ratingSelected', { count: selectedRating })
-                )}
-              </span>
+              {loggedIn && (
+                <span
+                  className={cn(
+                    'text-xs font-medium text-tertiary select-none',
+                    selectedRating === 0 && 'text-red-400'
+                  )}
+                >
+                  {selectedRating === 0 ? (
+                    t('botPage.tabs.reviews.ratingRequired')
+                  ) : (
+                    t('botPage.tabs.reviews.ratingSelected', { count: selectedRating })
+                  )}
+                </span>
+              )}
             </div>
 
             <div className="flex flex-col flex-1 w-full font-medium whitespace-pre-wrap gap-y-1 text-secondary">