From a5c8ba0e34f245b86745d8fe3039a50eaf446c06 Mon Sep 17 00:00:00 2001
From: Ategon <benjamin@barbeau.net>
Date: Fri, 7 Feb 2025 22:52:13 -0500
Subject: [PATCH] Add image previews

---
 src/app/settings/page.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index f6c3afb..bbdd806 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -4,11 +4,12 @@ import Editor from "@/components/editor";
 import sanitizeHtml from "sanitize-html";
 import { getCookie, hasCookie } from "@/helpers/cookie";
 import { UserType } from "@/types/UserType";
-import { Button, Form, Input } from "@nextui-org/react";
+import { Avatar, Button, Form, Input } from "@nextui-org/react";
 import { redirect, usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { LoaderCircle } from "lucide-react";
+import Image from "next/image";
 
 export default function UserPage() {
   const [user, setUser] = useState<UserType>();
@@ -54,7 +55,7 @@ export default function UserPage() {
   }, [pathname]);
 
   return (
-    <div className="absolute flex items-center justify-center top-0 left-0 w-screen h-screen">
+    <div className="flex items-center justify-center">
       {!user ? (
         "Loading settings..."
       ) : (
@@ -134,6 +135,8 @@ export default function UserPage() {
             onValueChange={setProfilePicture}
           />
 
+          {profilePicture && <Avatar src={profilePicture} />}
+
           <Input
             label="Banner Picture"
             labelPlacement="outside"
@@ -144,6 +147,19 @@ export default function UserPage() {
             onValueChange={setBannerPicture}
           />
 
+          {bannerPicture &&
+            bannerPicture.startsWith("https://") &&
+            bannerPicture.length > 8 && (
+              <div className="bg-[#222222] h-28 w-full relative">
+                <Image
+                  src={bannerPicture}
+                  alt={`${user.name}'s profile banner`}
+                  className="object-cover"
+                  fill
+                />
+              </div>
+            )}
+
           <div className="flex gap-2">
             <Button color="primary" type="submit">
               {waitingSave ? (