feat: add banner for logging in

Author: Samantha-KY

src/components/sections/learning-modules/InteractiveModule/index.tsx

@@ -20,7 +20,7 @@ import { IRootState } from "@/store";
  * @interface InteractiveModuleMultiSelector
  * @typedef {InteractiveModuleMultiSelector}
  */
-interface InteractiveModuleMultiSelector {
+export interface InteractiveModuleMultiSelector {
   isLoggedIn: boolean;
   course: Course | null;
 }

src/components/ui/Hint.tsx

@@ -6,7 +6,7 @@ type HintProps = {
 };
 
 function Hint({ children, className }: HintProps): ReactElement {
-  return <div className={`bg-yellow-50 text-yellow-900 py-5 px-8 border border-solid border-yellow-100 text-base hint-container ${className}`}>{children}</div>;
+  return <div className={`bg-yellow-50 text-yellow-900 py-5 px-8 text-base hint-container ${className}`}>{children}</div>;
 }
 
 export default Hint;

src/pages/communities/[slug]/challenges/[challenge_id]/index.tsx

@@ -32,6 +32,8 @@ import { getTeamByChallenge, getUserInvitesByChallenge } from "@/store/services/
 import { fetchChallenge, fetchChallengeAuthenticated } from "@/store/services/communities/challenges";
 import Loader from "@/components/ui/Loader";
 import { NotFoundError } from "@/utilities/errors/NotFoundError";
+import Hint from "@/components/ui/Hint";
+import Link from "next/link";
 
 /**
  * interface for ChallengePage multiSelector
@@ -75,7 +77,6 @@ export default function ChallengePage(props: {
     isAuthenticated: (state: IRootState) => authCheck(state),
     isSubmissionLoading: (state: IRootState) => state.challenges.loading,
   });
-
   const title = useMemo(() => getMetadataTitle(t("communities.challenge.title"), challenge?.name || ""), [challenge?.name, t]);
 
   const navigation = useNavigation();
@@ -109,7 +110,7 @@ export default function ChallengePage(props: {
           <RatingRubric ratingCriteria={challenge?.ratingCriteria} selected={[]} />
           <BestSubmissions />
 
-          {isAuthenticated && (
+          {isAuthenticated ? (
             <div>
               {isSubmissionLoading ? (
                 <div className="h-24 sm:h-48 grid place-items-center">
@@ -131,6 +132,13 @@ export default function ChallengePage(props: {
                 </>
               )}
             </div>
+          ) : (
+            <Hint className="mt-6 flex flex-col md:flex-row">
+              <p>To be able to submit</p>&nbsp;
+              <Link className="underline" href="/login">
+                Login
+              </Link>
+            </Hint>
           )}
         </div>
       </Wrapper>