Kamran Ahmed
4 weeks ago
parent
8921081bf7
commit
6c6c9ea85d
3 changed files with 67 additions and 96 deletions
@ -1,55 +1,84 @@ |
||||
import { useState } from 'react'; |
||||
import { Check, Clipboard } from 'lucide-react'; |
||||
import { useRef } from 'react'; |
||||
import { useAuth } from '../../hooks/use-auth'; |
||||
import { useCopyText } from '../../hooks/use-copy-text'; |
||||
import { useToast } from '../../hooks/use-toast'; |
||||
import { cn } from '../../lib/classname'; |
||||
import { Modal } from '../Modal'; |
||||
import { ReferYourFriend } from './ReferYourFriend'; |
||||
import { PayToBypass } from './PayToBypass'; |
||||
import { PickLimitOption } from './PickLimitOption'; |
||||
|
||||
export type IncreaseTab = 'refer-friends' | 'payment'; |
||||
|
||||
export const increaseLimitTabs: { |
||||
key: IncreaseTab; |
||||
title: string; |
||||
}[] = [ |
||||
{ key: 'refer-friends', title: 'Refer your Friends' }, |
||||
{ key: 'payment', title: 'Pay to Bypass the limit' }, |
||||
]; |
||||
|
||||
type IncreaseRoadmapLimitProps = { |
||||
onClose: () => void; |
||||
}; |
||||
|
||||
export function IncreaseRoadmapLimit(props: IncreaseRoadmapLimitProps) { |
||||
const { onClose } = props; |
||||
|
||||
const [activeTab, setActiveTab] = useState<IncreaseTab | null>( |
||||
'refer-friends', |
||||
); |
||||
const user = useAuth(); |
||||
const toast = useToast(); |
||||
const inputRef = useRef<HTMLInputElement>(null); |
||||
|
||||
const { copyText, isCopied } = useCopyText(); |
||||
const referralLink = new URL( |
||||
`/ai?rc=${user?.id}`, |
||||
import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh', |
||||
).toString(); |
||||
|
||||
const handleCopy = () => { |
||||
inputRef.current?.select(); |
||||
copyText(referralLink); |
||||
toast.success('Copied to clipboard'); |
||||
}; |
||||
|
||||
return ( |
||||
<Modal |
||||
onClose={onClose} |
||||
overlayClassName={cn( |
||||
'overscroll-contain', |
||||
activeTab === 'payment' && 'block', |
||||
)} |
||||
overlayClassName={cn('overscroll-contain')} |
||||
wrapperClassName="max-w-lg mx-auto" |
||||
bodyClassName={cn('h-auto pt-px', !activeTab && 'overflow-hidden')} |
||||
bodyClassName={cn('h-auto pt-px')} |
||||
> |
||||
{!activeTab && ( |
||||
<PickLimitOption activeTab={activeTab} setActiveTab={setActiveTab} /> |
||||
)} |
||||
|
||||
{activeTab === 'refer-friends' && ( |
||||
<ReferYourFriend onBack={() => setActiveTab(null)} /> |
||||
)} |
||||
{activeTab === 'payment' && ( |
||||
<PayToBypass |
||||
onBack={() => setActiveTab(null)} |
||||
onClose={() => { |
||||
onClose(); |
||||
}} |
||||
/> |
||||
)} |
||||
<div className="p-4"> |
||||
<h2 className="text-xl font-semibold text-gray-800"> |
||||
Refer your Friends |
||||
</h2> |
||||
<p className="mt-2 text-sm text-gray-500"> |
||||
Share the URL below with your friends. When they sign up with your |
||||
link, you will get extra roadmap generation credits. |
||||
</p> |
||||
|
||||
<label className="mt-4 flex flex-col gap-2"> |
||||
<input |
||||
ref={inputRef} |
||||
className="w-full rounded-md border bg-gray-100 p-2 px-2.5 text-gray-700 focus:outline-none" |
||||
value={referralLink} |
||||
readOnly={true} |
||||
onClick={handleCopy} |
||||
/> |
||||
|
||||
<button |
||||
className={cn( |
||||
'flex h-10 items-center justify-center gap-1.5 rounded-md p-2 px-2.5 text-sm', |
||||
{ |
||||
'bg-green-500 text-black transition-colors': isCopied, |
||||
'rounded-md bg-black text-white': !isCopied, |
||||
}, |
||||
)} |
||||
onClick={handleCopy} |
||||
disabled={isCopied} |
||||
> |
||||
{isCopied ? ( |
||||
<> |
||||
<Check className="h-4 w-4" /> |
||||
Copied to Clipboard |
||||
</> |
||||
) : ( |
||||
<> |
||||
<Clipboard className="h-4 w-4" /> |
||||
Copy URL |
||||
</> |
||||
)} |
||||
</button> |
||||
</label> |
||||
</div> |
||||
</Modal> |
||||
); |
||||
} |
||||
|
||||
@ -1,50 +0,0 @@ |
||||
import { ChevronRight, ChevronUpIcon } from 'lucide-react'; |
||||
import { cn } from '../../lib/classname'; |
||||
import { increaseLimitTabs, type IncreaseTab } from './IncreaseRoadmapLimit'; |
||||
|
||||
type PickLimitOptionProps = { |
||||
activeTab: IncreaseTab | null; |
||||
setActiveTab: (tab: IncreaseTab | null) => void; |
||||
}; |
||||
|
||||
export function PickLimitOption(props: PickLimitOptionProps) { |
||||
const { activeTab, setActiveTab } = props; |
||||
|
||||
return ( |
||||
<> |
||||
<div className="p-4"> |
||||
<h2 className="text-xl font-semibold text-gray-800"> |
||||
Generate more Roadmaps |
||||
</h2> |
||||
<p className="mt-2 text-sm text-gray-700"> |
||||
Pick one of the options below to increase your roadmap limit. |
||||
</p> |
||||
</div> |
||||
|
||||
<div className="flex w-full flex-col gap-1 px-3 pb-4"> |
||||
{increaseLimitTabs.map((tab) => { |
||||
const isActive = tab.key === activeTab; |
||||
|
||||
return ( |
||||
<button |
||||
key={tab.key} |
||||
onClick={() => { |
||||
setActiveTab(isActive ? null : tab.key); |
||||
}} |
||||
className={cn( |
||||
'flex w-full items-center justify-between gap-2 rounded-md border-t py-2 text-sm font-medium pl-3 pr-3', |
||||
{ |
||||
'bg-gray-100 text-gray-800': isActive, |
||||
'bg-gray-200 hover:bg-gray-300 transition-colors text-black': !isActive, |
||||
}, |
||||
)} |
||||
> |
||||
{tab.title} |
||||
<ChevronRight size={16} /> |
||||
</button> |
||||
); |
||||
})} |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue