106 lines
3.2 KiB
Plaintext
106 lines
3.2 KiB
Plaintext
---
|
|
import { ChevronUp } from 'lucide-react';
|
|
import Icon from './AstroIcon.astro';
|
|
export interface Props {
|
|
value: string;
|
|
text: string;
|
|
}
|
|
|
|
const { value, text } = Astro.props;
|
|
|
|
const isGitHubStars = text.toLowerCase() === 'github stars';
|
|
const isRegistered = text.toLowerCase() === 'registered users';
|
|
const isDiscordMembers = text.toLowerCase() === 'discord members';
|
|
---
|
|
|
|
<div
|
|
class='flex items-start sm:items-center justify-start flex-col sm:justify-center sm:gap-0 gap-2 sm:bg-transparent sm:rounded-none rounded-xl p-0 sm:p-4 mb-3 sm:mb-0'
|
|
>
|
|
{
|
|
isGitHubStars && (
|
|
<p class='flex items-center text-sm text-blue-500 sm:flex'>
|
|
<span class='rounded-md bg-blue-500 px-1 text-white'>Rank 6th</span>
|
|
out of 28M!
|
|
</p>
|
|
)
|
|
}
|
|
|
|
{
|
|
isRegistered && (
|
|
<p class='flex items-center text-sm text-blue-500 sm:flex'>
|
|
<span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>+55k</span>
|
|
every month
|
|
</p>
|
|
)
|
|
}
|
|
|
|
{
|
|
isDiscordMembers && (
|
|
<p class='flex items-center text-sm text-blue-500 sm:flex'>
|
|
<span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>+1.5k</span>
|
|
every month
|
|
</p>
|
|
)
|
|
}
|
|
<div class="flex flex-row items-center sm:flex-col my-1 sm:my-0">
|
|
<p
|
|
class='relative my-0 sm:my-4 mr-1 sm:mr-0 text-base font-bold lowercase sm:w-auto sm:text-5xl'
|
|
>
|
|
{value}
|
|
</p>
|
|
<p class='mb-0 mt-0 text-base sm:text-xs tracking-wide text-black sm:-mt-3 sm:mb-5'>
|
|
{text}
|
|
</p>
|
|
</div>
|
|
{
|
|
isGitHubStars && (
|
|
<a
|
|
href='https://github.com/kamranahmedse/developer-roadmap'
|
|
target='_blank'
|
|
class='group mt-0 flex flex-col items-center rounded-lg border border-black bg-white px-3 py-2 text-sm hover:bg-black hover:text-white'
|
|
>
|
|
<div class='mb-0.5 flex items-center font-semibold'>
|
|
<Icon icon='star' class='-ml-1 fill-current' />
|
|
<span class='ml-1.5 hover:block'>Star us on GitHub</span>
|
|
</div>
|
|
<span class='text-xs text-gray-500 group-hover:text-gray-100'>
|
|
Help us reach #1
|
|
</span>
|
|
</a>
|
|
)
|
|
}
|
|
{
|
|
isRegistered && (
|
|
<a
|
|
href='/signup'
|
|
class='group mt-0 flex flex-col items-center rounded-lg border border-black bg-white px-3 py-2 text-sm hover:bg-black hover:text-white'
|
|
>
|
|
<div class='mb-0.5 flex items-center font-semibold'>
|
|
<Icon icon='users' class='-ml-1 h-[15px] fill-current' />
|
|
<span class='ml-1 hover:block'>Register yourself</span>
|
|
</div>
|
|
<span class='text-xs text-gray-500 group-hover:text-gray-100'>
|
|
Commit to your growth
|
|
</span>
|
|
</a>
|
|
)
|
|
}
|
|
{
|
|
isDiscordMembers && (
|
|
<a
|
|
href='https://discord.gg/cJpEt5Qbwa'
|
|
target='_blank'
|
|
class='group mt-0 flex flex-col items-center rounded-lg border border-black bg-white px-3 py-2 text-sm hover:bg-black hover:text-white'
|
|
>
|
|
<div class='mb-0.5 flex items-center font-semibold'>
|
|
<Icon icon='discord' class='-ml-1 h-[13px] fill-current' />
|
|
<span class='ml-1 hover:block'>Join on Discord</span>
|
|
</div>
|
|
<span class='text-xs text-gray-500 group-hover:text-gray-100'>
|
|
Join the community
|
|
</span>
|
|
</a>
|
|
)
|
|
}
|
|
</div>
|