diff --git a/src/components/CustomRoadmap/FeaturedListing/FeaturedListingStatus.tsx b/src/components/CustomRoadmap/FeaturedListing/FeaturedListingStatus.tsx index a830a68f4..9c5ccb531 100644 --- a/src/components/CustomRoadmap/FeaturedListing/FeaturedListingStatus.tsx +++ b/src/components/CustomRoadmap/FeaturedListing/FeaturedListingStatus.tsx @@ -1,6 +1,8 @@ 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; @@ -13,11 +15,31 @@ export function FeaturedListingStatus(props: FeaturedListingStatusProps) { const [showSubmitWarning, setShowSubmitWarning] = useState(false); const currentLabel = { - idle: 'Submit for Featured Listing', - submitted: 'Submitted', - approved: 'Approved', - rejected: 'Rejected', - rejected_with_reason: 'Rejected with Reason', + 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 ( @@ -31,16 +53,19 @@ export function FeaturedListingStatus(props: FeaturedListingStatusProps) { )} );