diff --git a/app/[addressOrDomain]/page.tsx b/app/[addressOrDomain]/page.tsx index b4de7083..534a8205 100644 --- a/app/[addressOrDomain]/page.tsx +++ b/app/[addressOrDomain]/page.tsx @@ -30,6 +30,7 @@ import Typography from "@components/UI/typography/typography"; import { TEXT_TYPE } from "@constants/typography"; import { a11yProps } from "@components/UI/tabs/a11y"; import { CustomTabPanel } from "@components/UI/tabs/customTab"; +import SuggestedQuests from "@components/dashboard/SuggestedQuests"; type AddressOrDomainProps = { params: { @@ -352,20 +353,20 @@ export default function Page({ params }: AddressOrDomainProps) { {...a11yProps(0)} /> {claimableQuests.length > 0 ? ( - + ) : null} @@ -374,11 +375,9 @@ export default function Page({ params }: AddressOrDomainProps) { {questsLoading ? ( ) : completedQuests?.length === 0 ? ( - - {isOwner - ? "You have not completed any quests at the moment" - : "User has not completed any quests at the moment"} - + isOwner + ? + : User has not completed any quests at the moment ) : (
diff --git a/components/dashboard/SuggestedQuests.tsx b/components/dashboard/SuggestedQuests.tsx new file mode 100644 index 00000000..2f420fcc --- /dev/null +++ b/components/dashboard/SuggestedQuests.tsx @@ -0,0 +1,31 @@ +import React, { useContext, useEffect, useState } from "react"; +import Typography from "@components/UI/typography/typography"; +import { TEXT_TYPE } from "@constants/typography"; +import QuestStyles from "@styles/Home.module.css"; +import QuestCardCustomised from "./CustomisedQuestCard"; +import { QuestDocument } from "../../types/backTypes"; +import { QuestsContext } from "@context/QuestsProvider"; + +const SuggestedQuests: React.FC = () => { + const { quests: contextQuests } = useContext(QuestsContext); + const [quests, setQuests] = useState([]); + + useEffect(() => { + const onboardingQuests = contextQuests.filter((quest) => quest.category === "onboarding"); + setQuests(onboardingQuests); + }, [contextQuests]); + + return ( +
+ New explorer, start your quest! +
Get started on your Starknet adventure by tackling your first quest and begin collecting rewards!
+
+ {quests.map((quest) => ( + + ))} +
+
+ ); +}; + +export default SuggestedQuests;