chore: current user header

chore/update-progress
Arik Chakma 1 year ago
parent 081e16eb9b
commit ff96644751
  1. 160
      src/components/TeamProgress/MemberProgressModal.tsx

@ -18,6 +18,7 @@ import { useAuth } from '../../hooks/use-auth';
import { pageProgressMessage } from '../../stores/page';
import { ProgressHint } from './ProgressHint';
import QuestionIcon from '../../icons/question.svg';
import { InfoIcon } from '../ReactIcons/InfoIcon';
export type ProgressMapProps = {
member: TeamMember;
@ -278,83 +279,94 @@ export function MemberProgressModal(props: ProgressMapProps) {
/>
)}
<div className="p-4">
<div className="mb-5 mt-0 text-left md:mt-4 md:text-center">
<h2 className={'mb-1 text-lg font-bold md:text-2xl'}>
{member.name}'s Progress
</h2>
<p
className={
'hidden text-xs text-gray-500 sm:text-sm md:block md:text-base'
}
>
You are looking at {member.name}'s progress.{' '}
<a
target={'_blank'}
href={`/${resourceId}?t=${teamId}`}
className="text-blue-600 underline"
>
View your progress
</a>
.
</p>
<p className={'block text-gray-500 md:hidden'}>
View your progress&nbsp;
<a
target={'_blank'}
href={`/${resourceId}?t=${teamId}`}
className="text-blue-600 underline"
>
on the roadmap page.
</a>
</p>
</div>
<div class="-mx-4 mb-3 flex items-center justify-between border-b border-t py-2 text-sm">
<div className="flex items-center pl-4 sm:hidden">
<span>
<span>{memberDone}</span> of <span>{memberTotal}</span> done
</span>
</div>
<div className="hidden items-center pl-4 sm:flex">
<span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
<span>{progressPercentage}</span>% Done
</span>
<span>
<span>{memberDone}</span> completed
</span>
<span class="mx-1.5 text-gray-400">·</span>
<span>
<span data-progress-learning="">{memberLearning}</span> in
progress
</span>
{memberSkipped > 0 && (
<>
<span class="mx-1.5 text-gray-400">·</span>
<span>
<span data-progress-skipped="">{memberSkipped}</span>{' '}
skipped
</span>
</>
)}
<span class="mx-1.5 text-gray-400">·</span>
<span>
<span data-progress-total="">{memberTotal}</span> Total
</span>
{isCurrentUser ? (
<div className="mb-5 mt-0 text-left md:mt-4 md:text-center">
<h2 className={'mb-1 text-lg font-bold md:text-2xl'}>
Your Progress
</h2>
<p className={'text-gray-500'}>
You can{' '}
<button
className="inline-flex items-center text-blue-600 underline"
onClick={() => {
setShowProgressHint(true);
}}
>
follow these instructions
</button>{' '}
to update your progress below.
</p>
</div>
{isCurrentUser && (
<button
onClick={() => {
setShowProgressHint(true);
}}
class="mr-4 flex items-center gap-1 text-sm font-medium text-black opacity-60 transition-opacity hover:opacity-100"
) : (
<div className="mb-5 mt-0 text-left md:mt-4 md:text-center">
<h2 className={'mb-1 text-lg font-bold md:text-2xl'}>
{member.name}'s Progress
</h2>
<p
className={
'hidden text-xs text-gray-500 sm:text-sm md:block md:text-base'
}
>
<img src={QuestionIcon} className="h-4 w-4" />
Track Progress
</button>
You are looking at {member.name}'s progress.{' '}
<a
target={'_blank'}
href={`/${resourceId}?t=${teamId}`}
className="text-blue-600 underline"
>
View your progress
</a>
.
</p>
<p className={'block text-gray-500 md:hidden'}>
View your progress&nbsp;
<a
target={'_blank'}
href={`/${resourceId}?t=${teamId}`}
className="text-blue-600 underline"
>
on the roadmap page.
</a>
</p>
</div>
)}
<p class="-mx-4 mb-3 flex items-center justify-start border-b border-t px-4 py-2 text-sm sm:hidden">
<span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
<span>{progressPercentage}</span>% Done
</span>
<span>
<span>{memberDone}</span> of <span>{memberTotal}</span> done
</span>
</p>
<p class="-mx-4 mb-3 hidden items-center justify-center border-b border-t py-2 text-sm sm:flex">
<span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
<span>{progressPercentage}</span>% Done
</span>
<span>
<span>{memberDone}</span> completed
</span>
<span class="mx-1.5 text-gray-400">·</span>
<span>
<span data-progress-learning="">{memberLearning}</span> in
progress
</span>
{memberSkipped > 0 && (
<>
<span class="mx-1.5 text-gray-400">·</span>
<span>
<span data-progress-skipped="">{memberSkipped}</span>{' '}
skipped
</span>
</>
)}
</div>
<span class="mx-1.5 text-gray-400">·</span>
<span>
<span data-progress-total="">{memberTotal}</span> Total
</span>
</p>
</div>
<div ref={containerEl} className="px-4 pb-2"></div>

Loading…
Cancel
Save