1
0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-03-15 12:49:43 +01:00

Creator details on roadmap page

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

View File

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

View File

@ -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">

View File

@ -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" />