info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-10 11:14:09 +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

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