From e2b5657c3e139f1d86094a008549725f6a64c94e Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 11 Aug 2023 15:56:26 +0530
Subject: [PATCH] chore: profile cover photo (#1836)

---
 .../components/core/image-picker-popover.tsx  |  4 +-
 .../[workspaceSlug]/me/profile/index.tsx      | 38 ++++++++++++++++++-
 apps/app/types/users.d.ts                     |  1 +
 3 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/apps/app/components/core/image-picker-popover.tsx b/apps/app/components/core/image-picker-popover.tsx
index 7144bd01f..402cba022 100644
--- a/apps/app/components/core/image-picker-popover.tsx
+++ b/apps/app/components/core/image-picker-popover.tsx
@@ -27,8 +27,8 @@ const unsplashEnabled =
 
 const tabOptions = [
   {
-    key: "unsplash",
-    title: "Unsplash",
+    key: "images",
+    title: "Images",
   },
   {
     key: "upload",
diff --git a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx b/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
index 71c9cd094..c91776f55 100644
--- a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
@@ -12,7 +12,7 @@ import useToast from "hooks/use-toast";
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 import SettingsNavbar from "layouts/settings-navbar";
 // components
-import { ImageUploadModal } from "components/core";
+import { ImagePickerPopover, ImageUploadModal } from "components/core";
 // ui
 import { CustomSelect, DangerButton, Input, SecondaryButton, Spinner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -26,6 +26,7 @@ import { USER_ROLES } from "constants/workspace";
 
 const defaultValues: Partial<IUser> = {
   avatar: "",
+  cover_image: "",
   first_name: "",
   last_name: "",
   email: "",
@@ -68,6 +69,7 @@ const Profile: NextPage = () => {
       first_name: formData.first_name,
       last_name: formData.last_name,
       avatar: formData.avatar,
+      cover_image: formData.cover_image,
       role: formData.role,
       display_name: formData.display_name,
     };
@@ -202,6 +204,40 @@ const Profile: NextPage = () => {
                 </div>
               </div>
             </div>
+            <div className="grid grid-cols-12 gap-4 sm:gap-16">
+              <div className="col-span-12 sm:col-span-6">
+                <h4 className="text-lg font-semibold">Cover Photo</h4>
+                <p className="text-sm text-custom-text-200">
+                  Select your cover photo from the given library.
+                </p>
+              </div>
+              <div className="col-span-12 sm:col-span-6">
+                <div className="h-32 w-full rounded border border-custom-border-200 p-1">
+                  <div className="relative h-full w-full rounded">
+                    <img
+                      src={
+                        watch("cover_image") ??
+                        "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"
+                      }
+                      className="absolute top-0 left-0 h-full w-full object-cover rounded"
+                      alt={myProfile?.name ?? "Cover image"}
+                    />
+                    <div className="absolute bottom-0 flex w-full justify-end">
+                      <ImagePickerPopover
+                        label={"Change cover"}
+                        onChange={(imageUrl) => {
+                          setValue("cover_image", imageUrl);
+                        }}
+                        value={
+                          watch("cover_image") ??
+                          "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"
+                        }
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
                 <h4 className="text-lg font-semibold text-custom-text-100">Full Name</h4>
diff --git a/apps/app/types/users.d.ts b/apps/app/types/users.d.ts
index 68f0b0c78..c23512ecf 100644
--- a/apps/app/types/users.d.ts
+++ b/apps/app/types/users.d.ts
@@ -11,6 +11,7 @@ import {
 
 export interface IUser {
   avatar: string;
+  cover_image: string | null;
   created_at: readonly Date;
   created_location: readonly string;
   date_joined: readonly Date;