From 4139b6a137c4971505cb6f7b686c9487813d8884 Mon Sep 17 00:00:00 2001
From: Taek Been Nam <taekbeen93@gmail.com>
Date: Tue, 14 May 2024 14:07:08 -0400
Subject: [PATCH] add fallback avatar on header component

---
 app/(main)/components/heroSection/heroSection.tsx | 4 ++--
 public/illustrations/avatar.svg                   | 1 +
 shared/organisms/header/header.tsx                | 6 +++++-
 3 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 public/illustrations/avatar.svg

diff --git a/app/(main)/components/heroSection/heroSection.tsx b/app/(main)/components/heroSection/heroSection.tsx
index 5c34d42..0a64a5b 100644
--- a/app/(main)/components/heroSection/heroSection.tsx
+++ b/app/(main)/components/heroSection/heroSection.tsx
@@ -16,9 +16,9 @@ async function HeroSection() {
     <section aria-label="Hero" className="relative bg-secondary-15">
       <SplitContainer className="py-auto h-[80dvh] min-h-[650px] pt-32 md:h-auto md:flex-row-reverse md:justify-between md:pb-48 md:pt-64 xl:pb-80">
         <SplitContainer.Left className="flex basis-1/2 justify-center">
-          <Image src={barber} width={300} alt="barber image" priority />
+          <Image src={barber} width={400} alt="barber image" priority />
         </SplitContainer.Left>
-        <SplitContainer.Right className="group flex basis-1/2 flex-col gap-4">
+        <SplitContainer.Right className="group flex basis-1/2 flex-col gap-4 self-start md:self-center">
           <h1
             className="animate-fade-in text-left text-lg font-semibold text-primary-100 motion-reduce:animate-none md:text-xl"
             style={{ "--index": 2 } as React.CSSProperties}
diff --git a/public/illustrations/avatar.svg b/public/illustrations/avatar.svg
new file mode 100644
index 0000000..7543d4e
--- /dev/null
+++ b/public/illustrations/avatar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 532 532" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="270.75986" cy="260.93427" r="86.34897" fill="#ffb6b6"/><polygon points="221.18982 360.05209 217.28876 320.6185 295.18982 306.05209 341.18982 418.05209 261.18982 510.05209 204.18982 398.05209 221.18982 360.05209" fill="#ffb6b6"/><path d="m216.0374,340.35736l17.03111,3.84802s-13.38821-42.45453-8.84396-46.50766c4.54427-4.05316,15.68007,2.33328,15.68007,2.33328l11.70201,13.1199,14.25394-14.51239s15.47495-19.2421,21.53397-24.6463-3.67319-25.46364-3.67319-25.46364c0,0,89.89185-24.23923,56.44299-67.83968,0,0-19.61093-34.18452-25.99734-23.04871-6.38641,11.1358-14.00162-6.55013-14.00162-6.55013l-23.25381,4.42198s-45.89429-27.06042-89.45331,30.82959c-43.55902,57.89003,28.57916,154.01572,28.57916,154.01572h-.00002Z" fill="#2f2e41"/><path d="m433.16003,472.95001c-47.19,38.26001-105.57001,59.04999-167.16003,59.04999-56.23999,0-109.81-17.33997-154.62-49.47998.08002-.84003.16003-1.66998.23004-2.5,1.19-13,2.25-25.64001,2.94995-36.12,2.71002-40.69,97.64001-67.81,97.64001-67.81,0,0,.42999.42999,1.29004,1.17999,5.23999,4.59998,26.50995,21.27997,63.81,25.94,33.25995,4.15997,44.20996-15.57001,47.51996-25.02002,1-2.88,1.30005-4.81,1.30005-4.81l97.63995,46.10999c6.37,9.10004,8.86005,28.70001,9.35004,50.73004.01996.90997.03998,1.81.04999,2.72998Z" fill="#f9a826"/></svg>
\ No newline at end of file
diff --git a/shared/organisms/header/header.tsx b/shared/organisms/header/header.tsx
index 60bfa98..02a6bf3 100644
--- a/shared/organisms/header/header.tsx
+++ b/shared/organisms/header/header.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
+import Image from "next/image";
 import { LoginLink, LogoutLink } from "@kinde-oss/kinde-auth-nextjs/components";
 import { CalendarIcon, LogOutIcon } from "lucide-react";
 import { Container } from "@/shared/templates/container";
@@ -13,6 +14,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/shared/molecules/popover";
+import avatar from "@/public/illustrations/avatar.svg";
 
 interface HeaderProps {
   photo?: string | null;
@@ -54,7 +56,9 @@ function Header({ photo, isAuthenticated }: HeaderProps) {
               <PopoverTrigger className="hover:cursor-pointer" asChild>
                 <Avatar className="ring-1 ring-neutral-15">
                   <AvatarImage src={photo ?? ""} alt="profile" />
-                  <AvatarFallback>TN</AvatarFallback>
+                  <AvatarFallback>
+                    <Image src={avatar} width={40} alt="avatar" />
+                  </AvatarFallback>
                 </Avatar>
               </PopoverTrigger>
               <PopoverContent