mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2026-09-24 15:00:31 +08:00
53 lines
1.4 KiB
Plaintext
53 lines
1.4 KiB
Plaintext
---
|
|
import type { ResourceType } from '../lib/resource-progress';
|
|
import AstroIcon from './AstroIcon.astro';
|
|
import { ProgressShareButton } from './UserProgress/ProgressShareButton';
|
|
export interface Props {
|
|
resourceId: string;
|
|
resourceType: ResourceType;
|
|
}
|
|
|
|
const { resourceId, resourceType } = Astro.props;
|
|
---
|
|
|
|
<div
|
|
data-progress-nums-container
|
|
class:list={[
|
|
'striped-loader relative flex items-center justify-between rounded-md bg-white px-2 sm:px-2.5 py-2 sm:py-2.5',
|
|
]}
|
|
>
|
|
<p
|
|
class='flex text-xs sm:text-sm opacity-0 transition-opacity duration-300'
|
|
data-progress-nums
|
|
>
|
|
<span
|
|
class='mr-2.5 hidden rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900 sm:block'
|
|
>
|
|
<span data-progress-percentage>0</span>% Done
|
|
</span>
|
|
|
|
<span>
|
|
<span data-progress-done>0</span> of <span data-progress-total>0</span> Done
|
|
</span>
|
|
</p>
|
|
|
|
<div
|
|
class='flex items-center gap-3 opacity-0 transition-opacity duration-300'
|
|
data-progress-nums
|
|
>
|
|
<ProgressShareButton
|
|
resourceId={resourceId}
|
|
resourceType={resourceType}
|
|
client:only='react'
|
|
/>
|
|
<button
|
|
data-popup='progress-help'
|
|
class='hidden items-center gap-1 text-sm font-medium text-gray-500 opacity-0 transition-opacity hover:text-black sm:flex'
|
|
data-progress-nums
|
|
>
|
|
<AstroIcon icon='question' />
|
|
Track Progress
|
|
</button>
|
|
</div>
|
|
</div>
|