82 lines
2.1 KiB
Plaintext
82 lines
2.1 KiB
Plaintext
---
|
|
import Icon from './Icon.astro';
|
|
|
|
export interface Props {
|
|
roadmapId: string;
|
|
}
|
|
|
|
const { roadmapId } = Astro.props;
|
|
|
|
const hasTNSBanner = ['frontend', 'backend', 'devops'].includes(roadmapId);
|
|
const roadmapTitle =
|
|
roadmapId === 'devops'
|
|
? 'DevOps'
|
|
: `${roadmapId.charAt(0).toUpperCase()}${roadmapId.slice(1)}`;
|
|
---
|
|
|
|
<div
|
|
class:list={[
|
|
'mt-4 sm:mt-7 border rounded-md mb-0',
|
|
{
|
|
'sm:-mb-[82px]': hasTNSBanner,
|
|
'sm:-mb-[65px]': !hasTNSBanner,
|
|
},
|
|
]}
|
|
>
|
|
{
|
|
hasTNSBanner && (
|
|
<div class='px-2 py-1.5 border-b bg-gray-100 hidden sm:block'>
|
|
<p class='text-sm'>
|
|
Get the latest {roadmapTitle} news from our sister site{' '}
|
|
<a
|
|
href='https://thenewstack.io'
|
|
target='_blank'
|
|
class='font-semibold underline'
|
|
onclick="window.fireEvent({ category: 'PartnerClick', action: `TNS Referral`, label: `TNS Referral - Roadmap` })"
|
|
>
|
|
TheNewStack.io
|
|
</a>
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
<!-- Desktop: Roadmap Resources - Alert -->
|
|
<div
|
|
class:list={[
|
|
'hidden sm:flex justify-between px-2 bg-white items-center',
|
|
{
|
|
'rounded-bl-md rounded-br-md': hasTNSBanner,
|
|
'rounded-md': !hasTNSBanner,
|
|
},
|
|
]}
|
|
>
|
|
<p class='text-sm'>
|
|
<span
|
|
class='text-yellow-900 bg-yellow-200 py-0.5 px-1 text-xs rounded-sm font-medium uppercase mr-0.5'
|
|
>New</span
|
|
>
|
|
Resources are here, try clicking nodes
|
|
</p>
|
|
|
|
<a
|
|
href={`/${roadmapId}/topics/`}
|
|
class='inline-flex items-center justify-center py-1.5 text-sm font-medium rounded-md hover:text-black text-gray-500 px-1'
|
|
>
|
|
<Icon icon='search' />
|
|
<span class='ml-2'>Search Topics</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Mobile - Roadmap resources alert -->
|
|
<p
|
|
class='block sm:hidden text-sm border border-yellow-500 text-yellow-700 rounded-md py-1.5 px-2 bg-white relative'
|
|
>
|
|
Click roadmap items for resources or visit{' '}
|
|
<a href={`/${roadmapId}/topics/`} class='text-blue-700 underline'>
|
|
resources list
|
|
</a>
|
|
.
|
|
</p>
|
|
</div>
|