glitch effect avatar

src/features/tournaments/components/upcoming-tournament/header.tsx

@@ -1,6 +1,6 @@
 import { Group, Stack, ThemeIcon, Text, Flex } from "@mantine/core";
 import { Tournament } from "../../types";
-import Avatar from "@/components/avatar";
+import GlitchAvatar from "@/components/glitch-avatar";
 import {
   CalendarIcon,
   MapPinIcon,
@@ -16,8 +16,8 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
   );
 
   return (
-    <Stack align="center" gap={0}>
-      <Avatar
+    <Stack align="center" gap={16}>
+      <GlitchAvatar
         name={tournament.name}
         contain
         src={
@@ -25,13 +25,18 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
             ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
             : undefined
         }
+        glitchSrc={
+          tournament.glitch_logo
+            ? `/api/files/tournaments/${tournament.id}/${tournament.glitch_logo}`
+            : undefined
+        }
         radius="md"
         size={300}
         px="xs"
         withBorder={false}
       >
         <TrophyIcon size={32} />
-      </Avatar>
+      </GlitchAvatar>
       <Flex gap="xs" direction="column" justify="space-around">
         {tournament.location && (
           <Group gap="xs">