info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-01 06:50:26 +02:00
Code Issues Releases Wiki Activity

UI redesign for invite page

Browse Source
This commit is contained in:
Kamran Ahmed
2024-10-03 23:33:27 +01:00
parent cc817b060c
commit 487145b9a4
1 changed files with 45 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/AccountStreak/InviteFriends.tsx
View File

@@ -3,7 +3,7 @@ import { useAuth } from '../../hooks/use-auth';
import { useCopyText } from '../../hooks/use-copy-text';
import { cn } from '../../lib/classname';
import { CheckIcon } from '../ReactIcons/CheckIcon';
import {TrophyEmoji} from "../ReactIcons/TrophyEmoji.tsx";
import { TrophyEmoji } from '../ReactIcons/TrophyEmoji.tsx';
type InviteFriendsProps = {
refByUserCount: number;
@@ -21,65 +21,61 @@ export function InviteFriends(props: InviteFriendsProps) {
).toString();
return (
<div className="-mx-4 mt-6 flex flex-col border-t border-dashed border-t-slate-700 px-4 pt-5 text-center text-sm">
<p className="font-medium text-slate-500">
Invite people to join roadmap.sh
</p>
<div className="my-4 flex flex-col items-center gap-3.5 rounded-lg bg-slate-900/40 pb-4 pt-5">
<div className="flex flex-row items-center justify-center gap-1.5">
<div className="-mx-4 mt-6 flex flex-col border-t border-dashed border-t-slate-700/40 px-4 pt-5 text-center text-sm">
<p className="text-slate-500">Invite people to join roadmap.sh</p>
<div className="flex flex-col items-center rounded-lg bg-slate-900/40 pb-4 pt-5 my-4">
<p className="text-xs text-slate-500">
{refByUserCount === 0 && <>You haven't invited anyone yet.</>}
{refByUserCount > 0 && refByUserCount < 10 && (
<>{refByUserCount} of 10 users joined</>
)}
</p>
{refByUserCount >= 10 && <>🎉 You've invited {refByUserCount} users</>}
<div className="my-3 flex flex-row items-center justify-center gap-1">
{Array.from({ length: 10 }).map((_, index) => (
<Heart
key={index}
className={cn(
'size-[20px] fill-current',
'size-[23px] fill-current',
index < refByUserCount ? 'text-yellow-300' : 'text-slate-700',
refByUserCount === 0 && index === 0 ? 'text-slate-500' : '',
)}
/>
))}
</div>
{refByUserCount === 0 && (
<p className="text-slate-500">You haven't invited anyone yet.</p>
)}
{refByUserCount > 0 && refByUserCount < 10 && (
<p className="text-slate-500">{refByUserCount} of 10 users joined</p>
)}
{refByUserCount >= 10 && (
<p className="text-slate-500">
🎉 You've invited {refByUserCount} users
</p>
)}
<p className={'mb-3 text-xs text-slate-500'}>
Share the link below with anyone you think would benefit from using
roadmap.sh
</p>
<p className="text-slate-500">
<button
onClick={() => {
copyText(referralLink);
}}
className={cn(
'rounded-md bg-slate-700 px-3 py-1 text-xs text-slate-300 hover:bg-slate-600',
{
'bg-green-500 text-black hover:bg-green-500': isCopied,
},
)}
>
{!isCopied ? 'Copy Invite Link' : 'Invite Link Copied'}{' '}
{!isCopied && (
<Copy
className="relative -top-[1.25px] ml-1.5 inline-block size-3"
strokeWidth={3}
/>
)}
{isCopied && (
<CheckIcon additionalClasses="relative ml-1.5 -top-[1.25px] inline-block size-3" />
)}
</button>
</p>
</div>
<p className="leading-normal text-slate-500">
Share{' '}
<button
onClick={() => {
copyText(referralLink);
}}
className={cn(
'rounded-md bg-slate-700 px-1.5 py-[0.5px] text-slate-300 hover:bg-slate-600',
{
'bg-green-500 text-black hover:bg-green-500': isCopied,
},
)}
>
{!isCopied ? 'this link' : 'the copied link'}{' '}
{!isCopied && (
<Copy
className="relative -top-[1.25px] inline-block size-3"
strokeWidth={3}
/>
)}
{isCopied && (
<CheckIcon additionalClasses="relative -top-[1.25px] inline-block size-3" />
)}
</button>{' '}
with anyone you think would benefit from roadmap.sh
</p>
<p className="mt-6 text-center text-xs">
<p className="text-center text-xs">
<a
href="/leaderboard"
className="text-purple-400 underline-offset-2 hover:underline"