update survey references to be called search
This commit is contained in:
Brandon Egger
parent
cf7fb74322
commit
a511d63a4f
@ -50,7 +50,7 @@ const NavBar = () => {
|
||||
const resourcesDropDown: DropdownOption[] = [
|
||||
{
|
||||
label: "search",
|
||||
href: "/resources/survey",
|
||||
href: "/resources/search",
|
||||
},
|
||||
{
|
||||
label: "view all",
|
||||
|
||||
@ -26,15 +26,15 @@ const GreetingPage = ({updatePage}: {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col text-center">
|
||||
<h1 className="text-xl font-extrabold">Welcome to the resources survey!</h1>
|
||||
<p className="text-neutral-500 italic max-w-sm">We will ask a few questions about the patient and then recommend the best resources based on your answers!</p>
|
||||
<h1 className="text-center text-xl font-extrabold mb-8 max-w-sm">Welcome to the auditory training resource search tool!</h1>
|
||||
<p className="mx-auto text-center text-neutral-500 italic max-w-sm">We will ask a few questions about the patient and then recommend the best auditory training resources based on your answers!</p>
|
||||
<button onClick={getStartedClick} className="bottom-0 mt-8 py-2 px-4 bg-yellow-100 mx-auto rounded-md border border-neutral-900 ease-out duration-200 shadow-lg hover:shadow-md hover:bg-yellow-300">Get Started!</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Single question component for a guided survey
|
||||
* Single question component for a guided search
|
||||
*/
|
||||
const QuestionPage = ({isLastPage, page, question, updatePage, formData, updateFormData, dontCareData, setDontCareData}: {
|
||||
isLastPage: boolean,
|
||||
@ -131,7 +131,7 @@ const QuestionPage = ({isLastPage, page, question, updatePage, formData, updateF
|
||||
:
|
||||
<div className="flex flex-col space-y-2 mt-4">
|
||||
<button onClick={backClick} className="mx-auto bottom-0 py-2 px-4 bg-yellow-100 mx-auto rounded-md border border-neutral-900 ease-out duration-200 shadow-lg hover:shadow-md hover:bg-yellow-300">back</button>
|
||||
<button form="survey-form" type="submit" className="mx-auto bottom-0 py-2 px-4 bg-yellow-100 mx-auto rounded-md border border-neutral-900 ease-out duration-200 shadow-lg hover:shadow-md hover:bg-yellow-300">submit</button>
|
||||
<button form="search-form" type="submit" className="mx-auto bottom-0 py-2 px-4 bg-yellow-100 mx-auto rounded-md border border-neutral-900 ease-out duration-200 shadow-lg hover:shadow-md hover:bg-yellow-300">submit</button>
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
@ -174,7 +174,7 @@ const PageTransition = ({backwards, lastPage, currentPage}: {
|
||||
currentPage: JSX.Element,
|
||||
}) => {
|
||||
return (
|
||||
<div className={"h-[500px] w-[200%] flex " + (backwards ? "flex-row animate-slide_survey_page_backwards" : "flex-row-reverse translate-x-[-50%] animate-slide_survey_page")}>
|
||||
<div className={"h-[500px] w-[200%] flex " + (backwards ? "flex-row animate-slide_search_page_backwards" : "flex-row-reverse translate-x-[-50%] animate-slide_search_page")}>
|
||||
<div className="relative w-1/2 h-full grid place-items-center">
|
||||
{currentPage}
|
||||
</div>
|
||||
@ -188,10 +188,10 @@ const PageTransition = ({backwards, lastPage, currentPage}: {
|
||||
};
|
||||
|
||||
/**
|
||||
* Main guided survey component.
|
||||
* Main guided search component.
|
||||
* Page 0 = greeting page.
|
||||
*/
|
||||
const GuidedSurvey = ({questions}: {
|
||||
const GuidedSearch = ({questions}: {
|
||||
questions: Question<QuestionTypes>[],
|
||||
}) => {
|
||||
const [page, setPage] = useState<number>(0);
|
||||
@ -204,7 +204,7 @@ const GuidedSurvey = ({questions}: {
|
||||
setPage(pageNumber);
|
||||
};
|
||||
|
||||
const SurveyPage = ({pageNumber}: {
|
||||
const SearchPage = ({pageNumber}: {
|
||||
pageNumber?: number,
|
||||
}) => {
|
||||
if (pageNumber === undefined) {
|
||||
@ -247,8 +247,8 @@ const GuidedSurvey = ({questions}: {
|
||||
);
|
||||
}
|
||||
|
||||
const lastPage = <SurveyPage pageNumber={previousPage} />;
|
||||
const currentPage = <SurveyPage pageNumber={page} />;
|
||||
const lastPage = <SearchPage pageNumber={previousPage} />;
|
||||
const currentPage = <SearchPage pageNumber={page} />;
|
||||
const backwards = (previousPage ?? -1) >= page;
|
||||
|
||||
return (
|
||||
@ -260,7 +260,7 @@ const GuidedSurvey = ({questions}: {
|
||||
<PageTransition backwards={backwards} key={page} lastPage={lastPage} currentPage={currentPage}/>
|
||||
|
||||
{/** Hidden html */}
|
||||
<form action="/resources" id='survey-form' className="hidden">
|
||||
<form action="/resources" id='search-form' className="hidden">
|
||||
{questions.map((question, index) => {
|
||||
return <HTMLQuestion key={index} question={question} />
|
||||
})}
|
||||
@ -270,5 +270,5 @@ const GuidedSurvey = ({questions}: {
|
||||
}
|
||||
|
||||
export {
|
||||
GuidedSurvey,
|
||||
GuidedSearch,
|
||||
}
|
||||
@ -29,10 +29,10 @@ const Home: NextPage = () => {
|
||||
}} className="h-full w-full grid place-items-center">
|
||||
<div className="space-y-8">
|
||||
<h1 className="mx-auto text-center font-extrabold text-4xl max-w-lg text-yellow-200">Welcome to the Resource Center for Auditory Training!</h1>
|
||||
<div className="flex flex-col w-[300px] sm:w-[400px] mx-auto p-4 bg-neutral-900 border space-y-4 border-neutral-500 rounded-md shadow-lg shadow-neutral-800/50">
|
||||
<p className="text-center text-lg text-neutral-100 text-xl">Looking for resource recommendations?</p>
|
||||
<Link href="/resources/survey" className="flex flex-inline font-bold border border-neutral-300 mx-auto bg-yellow-400 hover:bg-yellow-100 p-2 rounded-md animate-expand_in_out">
|
||||
Start Survey
|
||||
<div className="flex flex-col w-[350px] sm:w-[400px] mx-auto p-4 bg-neutral-900 border space-y-4 border-neutral-500 rounded-md shadow-lg shadow-neutral-800/50">
|
||||
<p className="text-2xl text-center text-neutral-100">Looking for resource recommendations?</p>
|
||||
<Link href="/resources/search" className="flex flex-inline font-bold border border-neutral-300 mx-auto bg-yellow-400 hover:bg-yellow-100 p-2 rounded-md animate-expand_in_out">
|
||||
Search for Auditory Resources
|
||||
<ArrowUpRightIcon className="inline w-5" />
|
||||
</Link>
|
||||
</div>
|
||||
@ -50,7 +50,7 @@ const Home: NextPage = () => {
|
||||
<div className="p-4 sm:p-12 bg-yellow-100 text-white drop-shadow-md border border-b border-neutral-400">
|
||||
<div className="max-w-5xl flex flex-col-reverse md:flex-row md:divide-y-0 md:divide-x divide-neutral-700 mx-auto">
|
||||
<section className="px-4 text-neutral-800">
|
||||
<p className="pt-2">You can use the <TextLink href="/resources">Resources</TextLink> tab to scroll through the list of all resources, or the <TextLink href="/resources/survey">Search</TextLink> tab to filter resources based on your preferences and skill level. We also have an <TextLink href="/about">About</TextLink> tab to learn more about the creators of this website and a <TextLink href="/contact">Contact Us</TextLink> tab to submit any comments or questions you have about the site and auditory training in general. We hope you find this website helpful in your auditory training journey, and we are here to support you every step of the way.</p>
|
||||
<p className="pt-2">You can use the <TextLink href="/resources">Resources</TextLink> tab to scroll through the list of all resources, or the <TextLink href="/resources/search">Search</TextLink> tab to filter resources based on your preferences and skill level. We also have an <TextLink href="/about">About</TextLink> tab to learn more about the creators of this website and a <TextLink href="/contact">Contact Us</TextLink> tab to submit any comments or questions you have about the site and auditory training in general. We hope you find this website helpful in your auditory training journey, and we are here to support you every step of the way.</p>
|
||||
</section>
|
||||
<h1 className="grow h-full my-auto pr-auto text-4xl font-bold p-4 text-center text-black">Getting Started</h1>
|
||||
</div>
|
||||
|
||||
@ -34,12 +34,12 @@ const Resources = () => {
|
||||
<h1 className="text-3xl font-bold">All Resources</h1>
|
||||
<div className="">
|
||||
<p className="inline">Fill out the </p>
|
||||
<Link href="/resources/survey"
|
||||
<Link href="/resources/search"
|
||||
className="hover:bg-neutral-900 hover:text-white inline rounded-lg bg-neutral-200 border border-neutral-800 px-2 py-[4px]">
|
||||
survey
|
||||
search form
|
||||
<LinkIcon className="w-4 inline" />
|
||||
</Link>
|
||||
<p className="inline"> for specific resource recommendations.</p>
|
||||
<p className="inline"> for a list of auditory training resource recommendations.</p>
|
||||
</div>
|
||||
</div>
|
||||
<ResourceTable resourcesPerPage={queryData.perPage} resources={resourceQuery.data.resources} totalPages={totalPages} query={router.query} currentPage={currentPage} />
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { GuidedSurvey, type Question, type QuestionTypes } from "~/components/Survey";
|
||||
import { GuidedSearch, type Question, type QuestionTypes } from "~/components/Search";
|
||||
|
||||
const questions: Question<QuestionTypes>[] = [
|
||||
{
|
||||
@ -103,7 +103,7 @@ const questions: Question<QuestionTypes>[] = [
|
||||
const SearchPage = () => {
|
||||
return (
|
||||
<div className="w-full max-w-xl mx-auto mt-4 mb-4 rounded-xl overflow-hidden border border-neutral-400 bg-neutral-200 drop-shadow-md">
|
||||
<GuidedSurvey questions={questions} />
|
||||
<GuidedSearch questions={questions} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -19,8 +19,8 @@ const config = {
|
||||
},
|
||||
animation: {
|
||||
expand_in_out: 'expand_in_out 2s ease-in-out infinite',
|
||||
slide_survey_page: 'slide_left_full 0.5s ease-in-out',
|
||||
slide_survey_page_backwards: 'slide_right_full 0.5s ease-in-out'
|
||||
slide_search_page: 'slide_left_full 0.5s ease-in-out',
|
||||
slide_search_page_backwards: 'slide_right_full 0.5s ease-in-out'
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user