From 044df81b7a8e2e5d7f037d76512ec0d62418f91b Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 2 Oct 2023 17:03:20 +0100
Subject: [PATCH] Creator details on roadmap page

---
 .../CustomRoadmap/CustomRoadmap.tsx           |  1 +
 .../CustomRoadmap/RoadmapHeader.tsx           | 30 +++++++++++++++----
 .../CustomRoadmap/SkeletonRoadmapHeader.tsx   |  4 +--
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/components/CustomRoadmap/CustomRoadmap.tsx b/src/components/CustomRoadmap/CustomRoadmap.tsx
index 06be83417..200b48a7b 100644
--- a/src/components/CustomRoadmap/CustomRoadmap.tsx
+++ b/src/components/CustomRoadmap/CustomRoadmap.tsx
@@ -49,6 +49,7 @@ export type CreatorType = {
 export type GetRoadmapResponse = RoadmapDocument & {
   canManage: boolean;
   creator?: CreatorType;
+  team?: CreatorType;
 };
 
 export function hideRoadmapLoader() {
diff --git a/src/components/CustomRoadmap/RoadmapHeader.tsx b/src/components/CustomRoadmap/RoadmapHeader.tsx
index 6a8d1243f..03ac2fc36 100644
--- a/src/components/CustomRoadmap/RoadmapHeader.tsx
+++ b/src/components/CustomRoadmap/RoadmapHeader.tsx
@@ -20,6 +20,7 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
     description,
     _id: roadmapId,
     creator,
+    team,
   } = useStore(currentRoadmap) || {};
 
   const [isSharing, setIsSharing] = useState(false);
@@ -66,12 +67,29 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
   return (
     <div className="border-b">
       <div className="container relative py-5 sm:py-12">
-        <div className="flex items-center gap-1.5">
-          <img src={avatarUrl} className="h-5 w-5 rounded-full" />
-          <h3 className="text-sm font-medium">
-            {creator?.name || 'Anonymous'}
-          </h3>
-        </div>
+        {creator?.name && (
+          <div className="-mb-1 flex items-center gap-1.5 text-sm text-gray-500">
+            <img
+              alt={creator.name}
+              src={avatarUrl}
+              className="h-5 w-5 rounded-full"
+            />
+            <span>
+              Created by&nbsp;
+              <span className="font-semibold text-gray-900">
+                {creator?.name}
+              </span>
+              {team && (
+                <>
+                  &nbsp;in&nbsp;
+                  <span className="font-semibold text-gray-900">
+                    {team?.name}
+                  </span>
+                </>
+              )}
+            </span>
+          </div>
+        )}
         <div className="mb-3 mt-4 sm:mb-4">
           <h1 className="text-2xl font-bold sm:mb-2 sm:text-4xl">{title}</h1>
           <p className="mt-0.5 text-sm text-gray-500 sm:text-lg">
diff --git a/src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx b/src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx
index 2879e9f9f..594f16ac7 100644
--- a/src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx
+++ b/src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx
@@ -3,8 +3,8 @@ export function SkeletonRoadmapHeader() {
     <div className="border-b">
       <div className="container relative py-5 sm:py-12">
         <div className="flex items-center gap-1.5">
-          <div className="h-5 w-5 animate-pulse rounded-full bg-gray-300" />
-          <div className="h-5 w-2/12 animate-pulse rounded-md bg-gray-200" />
+          <div className="h-4 w-4 animate-pulse rounded-full bg-gray-300" />
+          <div className="h-5 w-5/12 animate-pulse rounded-md bg-gray-200" />
         </div>
         <div className="mb-3 mt-4 sm:mb-4">
           <div className="h-8 w-1/2 animate-pulse rounded-md bg-gray-300 sm:mb-2 sm:h-10" />