info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-21 00:21:35 +02:00
Code Issues Releases Wiki Activity

Creator details on roadmap page

Browse Source
This commit is contained in:
Kamran Ahmed
2023-10-02 17:03:20 +01:00
parent 3151ee5021
commit 044df81b7a
3 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/CustomRoadmap/CustomRoadmap.tsx
View File

@@ -49,6 +49,7 @@ export type CreatorType = {
export type GetRoadmapResponse = RoadmapDocument & { export type GetRoadmapResponse = RoadmapDocument & {
canManage: boolean; canManage: boolean;
creator?: CreatorType; creator?: CreatorType;
team?: CreatorType;
}; };
export function hideRoadmapLoader() { export function hideRoadmapLoader() {

28
src/components/CustomRoadmap/RoadmapHeader.tsx
View File

@@ -20,6 +20,7 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
description, description,
_id: roadmapId, _id: roadmapId,
creator, creator,
team,
} = useStore(currentRoadmap) || {}; } = useStore(currentRoadmap) || {};
const [isSharing, setIsSharing] = useState(false); const [isSharing, setIsSharing] = useState(false);
@@ -66,12 +67,29 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
return ( return (
<div className="border-b"> <div className="border-b">
<div className="container relative py-5 sm:py-12"> <div className="container relative py-5 sm:py-12">
<div className="flex items-center gap-1.5"> {creator?.name && (
<img src={avatarUrl} className="h-5 w-5 rounded-full" /> <div className="-mb-1 flex items-center gap-1.5 text-sm text-gray-500">
<h3 className="text-sm font-medium"> <img
{creator?.name || 'Anonymous'} alt={creator.name}
</h3> 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>
)}
<div className="mb-3 mt-4 sm:mb-4"> <div className="mb-3 mt-4 sm:mb-4">
<h1 className="text-2xl font-bold sm:mb-2 sm:text-4xl">{title}</h1> <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"> <p className="mt-0.5 text-sm text-gray-500 sm:text-lg">

4
src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx
View File

@@ -3,8 +3,8 @@ export function SkeletonRoadmapHeader() {
<div className="border-b"> <div className="border-b">
<div className="container relative py-5 sm:py-12"> <div className="container relative py-5 sm:py-12">
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<div className="h-5 w-5 animate-pulse rounded-full bg-gray-300" /> <div className="h-4 w-4 animate-pulse rounded-full bg-gray-300" />
<div className="h-5 w-2/12 animate-pulse rounded-md bg-gray-200" /> <div className="h-5 w-5/12 animate-pulse rounded-md bg-gray-200" />
</div> </div>
<div className="mb-3 mt-4 sm:mb-4"> <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" /> <div className="h-8 w-1/2 animate-pulse rounded-md bg-gray-300 sm:mb-2 sm:h-10" />