add avatar to account info on index

sk337 · Jan 25, 2024 · 141101f · 141101f
1 parent 7ffdab9
commit 141101f
Showing 1 changed file with 17 additions and 6 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -23,6 +23,7 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 
 import {
   Select,
@@ -220,12 +221,22 @@ export default function App() {
               </CardHeader>
               <CardContent>
                 <p>
-                  <span className="text-sky-500">Username: </span>
-                  {userData.account.username}
-                  <br />
-                  <span className="text-sky-500">User ID: </span>
-                  {prettyNum(userData.account.id)}
-                  <br />
+                  <div className="flex items-center space-x-4">
+                    <Avatar>
+                      <AvatarImage src={pubInfo.image} />
+                      <AvatarFallback>AV</AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <p>
+                        <span className="text-sky-500">Username: </span>
+                        {userData.account.username}
+                      </p>
+                      <p>
+                        <span className="text-sky-500">User ID: </span>
+                        {prettyNum(userData.account.id)}
+                      </p>
+                    </div>
+                  </div>
                   <span className="text-sky-500">Gems: </span>
                   {prettyNum(userData.account.gems)}
                   <br />