wip: showcase listing

src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx

@@ -24,7 +24,6 @@ export type AllowedCustomRoadmapType =
   (typeof allowedCustomRoadmapType)[number];
 
 export const allowedShowcaseStatus = [
-  'idle',
   'submitted',
   'approved',
   'rejected',

src/components/CustomRoadmap/RoadmapHeader.tsx

@@ -76,10 +76,10 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
 
   return (
     <>
-      {$currentRoadmap && <ShowcaseAlert currentRoadmap={$currentRoadmap} />}
+      <div className="relative border-b">
+        {$currentRoadmap && <ShowcaseAlert currentRoadmap={$currentRoadmap} />}
 
-      <div className="border-b">
+        <div className="container relative mt-6 py-5 sm:py-12">
-        <div className="container relative py-5 sm:py-12">
           {!$canManageCurrentRoadmap && <CustomRoadmapAlert />}
 
           {creator?.name && (
@@ -181,8 +181,7 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
                 </>
               )}
 
-              {((ratings?.average || 0) > 0 ||
+              {showcaseStatus === 'approved' && (
-                showcaseStatus === 'approved') && (
                 <CustomRoadmapRatings
                   roadmapSlug={roadmapSlug!}
                   ratings={ratings!}

src/components/CustomRoadmap/Showcase/ShowcaseAlert.tsx

@@ -13,8 +13,8 @@ export function ShowcaseAlert(props: ShowcaseAlertProps) {
 
   const [showRejectedReason, setShowRejectedReason] = useState(false);
 
-  const { showcaseStatus = 'idle' } = currentRoadmap;
+  const { showcaseStatus } = currentRoadmap;
-  if (showcaseStatus === 'idle') {
+  if (!showcaseStatus) {
     return null;
   }
 
@@ -53,7 +53,12 @@ export function ShowcaseAlert(props: ShowcaseAlertProps) {
       className: 'text-yellow-600 border-yellow-200',
     },
   };
-  const { icon: Icon, label, className } = showcaseStatusMap[showcaseStatus];
+  const showcaseStatusDetails = showcaseStatusMap[showcaseStatus];
+  if (!showcaseStatusDetails) {
+    return null;
+  }
+
+  const { icon: Icon, label, className } = showcaseStatusDetails;
 
   return (
     <>
@@ -67,6 +72,7 @@ export function ShowcaseAlert(props: ShowcaseAlertProps) {
 
       <div
         className={cn(
+          'absolute inset-x-0 top-0 z-10',
           showcaseStatus === 'submitted' && 'bg-blue-100',
           showcaseStatus === 'approved' && 'bg-green-100',
           showcaseStatus === 'rejected' && 'bg-red-100',

src/components/CustomRoadmap/Showcase/ShowcaseStatus.tsx

@@ -10,10 +10,10 @@ type ShowcaseStatusProps = {
 export function ShowcaseStatus(props: ShowcaseStatusProps) {
   const { currentRoadmap } = props;
 
-  const { showcaseStatus = 'idle' } = currentRoadmap;
+  const { showcaseStatus } = currentRoadmap;
   const [showSubmitWarning, setShowSubmitWarning] = useState(false);
 
-  if (!currentRoadmap || showcaseStatus !== 'idle') {
+  if (!currentRoadmap || showcaseStatus !== undefined) {
     return null;
   }
 
@@ -32,7 +32,7 @@ export function ShowcaseStatus(props: ShowcaseStatusProps) {
         onClick={() => {
           setShowSubmitWarning(true);
         }}
-        disabled={showcaseStatus !== 'idle'}
+        disabled={!!showcaseStatus}
       >
         <SendIcon className="mr-0 h-4 w-4 stroke-[2.5] sm:mr-1.5" />
         <span className="hidden sm:inline">Submit for Showcase</span>

src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx

@@ -1,9 +1,9 @@
 export function SkeletonRoadmapHeader() {
   return (
     <div className="border-b">
-      <div className="container relative py-5 sm:py-12">
+      <div className="container relative mt-6 py-5 sm:py-12">
-        <div className="flex items-center gap-1.5">
+        <div className="-mb-0.5 flex items-center gap-1.5">
-          <div className="h-4 w-4 animate-pulse rounded-full bg-gray-300" />
+          <div className="h-5 w-5 animate-pulse rounded-full bg-gray-300" />
           <div className="h-5 w-5/12 animate-pulse rounded-md bg-gray-200" />
         </div>
         <div className="mb-3 mt-4 sm:mb-4">
@@ -12,7 +12,7 @@ export function SkeletonRoadmapHeader() {
         </div>
 
         <div className="flex justify-between gap-2 sm:gap-0">
-          <div className='flex gap-1 sm:gap-2'>
+          <div className="flex gap-1 sm:gap-2">
             <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-32" />
             <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[85px]" />
           </div>