Arik Chakma
1 week ago
parent
b07a44470b
commit
a9755a57ed
6 changed files with 255 additions and 205 deletions
@ -1,72 +0,0 @@ |
||||
import { useState } from 'react'; |
||||
import { SubmitFeaturedListingWarning } from './SubmitFeaturedListingWarning'; |
||||
import type { GetRoadmapResponse } from '../CustomRoadmap'; |
||||
import { CheckIcon, EyeIcon, FlagIcon, SendIcon, XIcon } from 'lucide-react'; |
||||
import { cn } from '../../../lib/classname'; |
||||
|
||||
type FeaturedListingStatusProps = { |
||||
currentRoadmap: GetRoadmapResponse; |
||||
}; |
||||
|
||||
export function FeaturedListingStatus(props: FeaturedListingStatusProps) { |
||||
const { currentRoadmap } = props; |
||||
|
||||
const { featuredListStatus = 'idle' } = currentRoadmap; |
||||
const [showSubmitWarning, setShowSubmitWarning] = useState(false); |
||||
|
||||
const currentLabel = { |
||||
idle: { |
||||
icon: SendIcon, |
||||
label: 'Submit for Featured Listing', |
||||
className: 'bg-gray-100 text-gray-600 border-gray-200', |
||||
}, |
||||
submitted: { |
||||
icon: EyeIcon, |
||||
label: 'Waiting for Approval', |
||||
className: 'bg-blue-100 text-blue-600 border-blue-200', |
||||
}, |
||||
approved: { |
||||
icon: CheckIcon, |
||||
label: 'Approved', |
||||
className: 'bg-green-100 text-green-600 border-green-200', |
||||
}, |
||||
rejected: { |
||||
icon: XIcon, |
||||
label: 'Rejected', |
||||
className: 'bg-red-100 text-red-600 border-red-200', |
||||
}, |
||||
rejected_with_reason: { |
||||
icon: FlagIcon, |
||||
label: 'Changes Requested', |
||||
className: 'bg-yellow-100 text-yellow-600 border-yellow-200', |
||||
}, |
||||
}[featuredListStatus]; |
||||
|
||||
return ( |
||||
<> |
||||
{showSubmitWarning && ( |
||||
<SubmitFeaturedListingWarning |
||||
onClose={() => { |
||||
setShowSubmitWarning(false); |
||||
}} |
||||
/> |
||||
)} |
||||
|
||||
<button |
||||
className={cn( |
||||
'flex items-center gap-1.5 rounded-full border px-2 text-sm', |
||||
currentLabel?.className, |
||||
)} |
||||
onClick={() => { |
||||
setShowSubmitWarning(true); |
||||
}} |
||||
disabled={ |
||||
!['idle', 'rejected_with_reason'].includes(featuredListStatus) |
||||
} |
||||
> |
||||
<currentLabel.icon className="size-3 stroke-[2.5]" /> |
||||
{currentLabel.label} |
||||
</button> |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,75 @@ |
||||
import { |
||||
CheckIcon, |
||||
EyeIcon, |
||||
FlagIcon, |
||||
FrownIcon, |
||||
SmileIcon, |
||||
XIcon, |
||||
} from 'lucide-react'; |
||||
import { cn } from '../../../lib/classname'; |
||||
import type { GetRoadmapResponse } from '../CustomRoadmap'; |
||||
|
||||
type ShowcaseAlertProps = { |
||||
currentRoadmap: GetRoadmapResponse; |
||||
}; |
||||
|
||||
export function ShowcaseAlert(props: ShowcaseAlertProps) { |
||||
const { currentRoadmap } = props; |
||||
|
||||
// const { showcaseStatus = 'idle' } = currentRoadmap;
|
||||
// if (showcaseStatus === 'idle') {
|
||||
// return null;
|
||||
// }
|
||||
|
||||
const showcaseStatus = 'rejected_with_reason'; |
||||
|
||||
const showcaseStatusMap = { |
||||
submitted: { |
||||
icon: EyeIcon, |
||||
label: |
||||
'We are reviewing your roadmap. It will be visible to everyone on the platform once approved.', |
||||
className: 'text-blue-600 border-blue-200', |
||||
}, |
||||
approved: { |
||||
icon: SmileIcon, |
||||
label: 'Hooray! Your roadmap is now visible to everyone on the platform.', |
||||
className: 'text-green-600 border-green-200', |
||||
}, |
||||
rejected: { |
||||
icon: FrownIcon, |
||||
label: 'Sorry, we are unable to feature your roadmap at this time.', |
||||
className: 'text-red-600 border-red-200', |
||||
}, |
||||
rejected_with_reason: { |
||||
icon: FlagIcon, |
||||
label: ( |
||||
<> |
||||
Your roadmap needs changes before it can be featured.{' '} |
||||
<button className="font-medium underline underline-offset-2 hover:no-underline"> |
||||
Check Reason |
||||
</button> |
||||
</> |
||||
), |
||||
className: 'text-yellow-600 border-yellow-200', |
||||
}, |
||||
}; |
||||
const { icon: Icon, label, className } = showcaseStatusMap[showcaseStatus]; |
||||
|
||||
return ( |
||||
<div |
||||
className={cn( |
||||
showcaseStatus === 'submitted' && 'bg-blue-100', |
||||
showcaseStatus === 'approved' && 'bg-green-100', |
||||
showcaseStatus === 'rejected' && 'bg-red-100', |
||||
showcaseStatus === 'rejected_with_reason' && 'bg-yellow-100', |
||||
)} |
||||
> |
||||
<div className="container relative flex items-center justify-center py-2 text-sm"> |
||||
<div className={cn('flex items-center gap-2', className)}> |
||||
<Icon className="h-4 w-4 shrink-0 stroke-[2.5]" /> |
||||
<div>{label}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,42 @@ |
||||
import { useState } from 'react'; |
||||
import { SubmitShowcaseWarning } from './SubmitShowcaseWarning'; |
||||
import type { GetRoadmapResponse } from '../CustomRoadmap'; |
||||
import { SendIcon } from 'lucide-react'; |
||||
|
||||
type ShowcaseStatusProps = { |
||||
currentRoadmap: GetRoadmapResponse; |
||||
}; |
||||
|
||||
export function ShowcaseStatus(props: ShowcaseStatusProps) { |
||||
const { currentRoadmap } = props; |
||||
|
||||
const { showcaseStatus = 'idle' } = currentRoadmap; |
||||
const [showSubmitWarning, setShowSubmitWarning] = useState(false); |
||||
|
||||
if (!currentRoadmap || showcaseStatus !== 'idle') { |
||||
return null; |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
{showSubmitWarning && ( |
||||
<SubmitShowcaseWarning |
||||
onClose={() => { |
||||
setShowSubmitWarning(false); |
||||
}} |
||||
/> |
||||
)} |
||||
|
||||
<button |
||||
className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium text-black hover:border-gray-300 hover:bg-gray-300 sm:pl-1.5 sm:pr-3 sm:text-sm" |
||||
onClick={() => { |
||||
setShowSubmitWarning(true); |
||||
}} |
||||
disabled={showcaseStatus !== 'idle'} |
||||
> |
||||
<SendIcon className="mr-0 h-4 w-4 stroke-[2.5] sm:mr-1.5" /> |
||||
<span className="hidden sm:inline">Submit for Showcase</span> |
||||
</button> |
||||
</> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue