brandon/uiowaATR
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add prettier lint rule

Browse Source
This commit is contained in:
Brandon Egger
2023-04-18 23:57:57 -05:00
parent e10f2911d9
commit 192c594d4f
20 changed files with 1684 additions and 1182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/pages/_app.tsx
View File

@ -15,7 +15,10 @@ const MyApp: AppType<{ session: Session | null }> = ({
<SessionProvider session={session}>
<Head>
<title>ATR</title>
<meta name="description" content="University of Iowa Center for Auditory Training Resources" />
<meta
name="description"
content="University of Iowa Center for Auditory Training Resources"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<Component {...pageProps} />

211
src/pages/about.tsx
View File

@ -1,108 +1,139 @@
import { type NextPage } from "next/types";
import Image from 'next/image';
import { HandRaisedIcon } from '@heroicons/react/24/solid';
import Image from "next/image";
import { HandRaisedIcon } from "@heroicons/react/24/solid";
import Footer from "~/components/Footer";
import Header from "~/components/Header";
type Position = "left" | "right";
interface Biography {
name: string;
bodyName: string;
title: string;
body: string;
img: string;
position: Position;
name: string;
bodyName: string;
title: string;
body: string;
img: string;
position: Position;
}
const Biopgraphy = ({bodyName, name, title, body, img, position}: Biography) => {
return (
<section className={"sm:space-y-2 p-2 sm:p-4 shadow-xl bg-yellow-100 flex flex-col border-y-2 sm:border-2 sm:rounded-2xl border-neutral-900 col-span-2 overflow-hidden" + (position === 'right' ? " lg:col-start-2 lg:rotate-3" : " lg:-rotate-3")}>
<div className="space-x-8 flex flex-row mb-2 items-center">
<Image src={img} alt={`${name} profile`} width={128} height={128} className="shadow-md shadow-neutral-600/50 rounded-lg border border-neutral-900" />
<div className="">
<h1 className="text-2xl font-bold">{name}</h1>
<h2 className="text-neutral-600 italic">{title}</h2>
</div>
</div>
<div className="col-span-2 p-2 bg-white rounded-lg border border-neutral-900">
{bodyName} {body}
</div>
</section>
);
const Biopgraphy = ({
bodyName,
name,
title,
body,
img,
position,
}: Biography) => {
return (
<section
className={
"col-span-2 flex flex-col overflow-hidden border-y-2 border-neutral-900 bg-yellow-100 p-2 shadow-xl sm:space-y-2 sm:rounded-2xl sm:border-2 sm:p-4" +
(position === "right" ? " lg:col-start-2 lg:rotate-3" : " lg:-rotate-3")
}
>
<div className="mb-2 flex flex-row items-center space-x-8">
<Image
src={img}
alt={`${name} profile`}
width={128}
height={128}
className="rounded-lg border border-neutral-900 shadow-md shadow-neutral-600/50"
/>
<div className="">
<h1 className="text-2xl font-bold">{name}</h1>
<h2 className="italic text-neutral-600">{title}</h2>
</div>
</div>
<div className="col-span-2 rounded-lg border border-neutral-900 bg-white p-2">
{bodyName} {body}
</div>
</section>
);
};
const biographies: Biography[] = [
{
name: "Olivia Adamson",
bodyName: "Olivia",
title: "B.A",
body: "is a dedicated audiology graduate student at the University of Iowa, originally from a small town in southeast Minnesota. She earned her Bachelor of Arts in Communication Sciences and Disorders from Augustana University in Sioux Falls, SD, in 2020. Olivia Adamson is currently immersed in her fourth-year externship at Gundersen Health System in LaCrosse, WI, where she works with patients of all ages, performs comprehensive diagnostic assessments, provides vestibular assessments, and specializes in hearing aids and cochlear implants. With a passion for aural rehabilitation, particularly for older adults, Olivia is dedicated to enhancing the quality of life for individuals with hearing loss. She aspires to empower patients to take control of their hearing journey through this resource. Upon completing her externship, Olivia will graduate with her Au.D. in May 2024.",
img: "/profiles/olivia-adamson.jpeg",
position: "right",
},
{
name: "Dr. Eun Kyung (Julie) Jeon",
bodyName: "Julie",
title: "Au.D., Ph.D.",
body: "is a Clinical Assistant Professor in Communication Sciences and Disorders at the University of Iowa. She earned both her Au.D. and Ph.D. degrees from the University of Iowa in 2008 and 2016, respectively. Dr. Jeon's research and clinical interests focus on aural (re)habilitation for children and adults with hearing aids and cochlear implants. She has served as a reviewer for various journals, including Ear and Hearing and Cochlear Implant International. Dr. Jeon is an active member of several professional organizations, such as the American Academy of Audiology (AAA), the American Cochlear Implant Alliance (ACIA), the American Speech-Language-Hearing Association (ASHA), the Iowa Speech-Language-Hearing Association (ISHA), and the Asia Pacific Society of Speech-Language-Hearing (APSSLH). Currently, she has been entrusted with various leadership responsibilities, including educational committee officer for the APSSLH, Member-at-Large for the Iowa Speech Language Hearing Foundation, Iowa EHDI Advisory Board representative for the ISHA, and program committee member for the CI2023 conference.",
img: "/profiles/jeon-eunkyung.jpg",
position: "left",
}
]
{
name: "Olivia Adamson",
bodyName: "Olivia",
title: "B.A",
body: "is a dedicated audiology graduate student at the University of Iowa, originally from a small town in southeast Minnesota. She earned her Bachelor of Arts in Communication Sciences and Disorders from Augustana University in Sioux Falls, SD, in 2020. Olivia Adamson is currently immersed in her fourth-year externship at Gundersen Health System in LaCrosse, WI, where she works with patients of all ages, performs comprehensive diagnostic assessments, provides vestibular assessments, and specializes in hearing aids and cochlear implants. With a passion for aural rehabilitation, particularly for older adults, Olivia is dedicated to enhancing the quality of life for individuals with hearing loss. She aspires to empower patients to take control of their hearing journey through this resource. Upon completing her externship, Olivia will graduate with her Au.D. in May 2024.",
img: "/profiles/olivia-adamson.jpeg",
position: "right",
},
{
name: "Dr. Eun Kyung (Julie) Jeon",
bodyName: "Julie",
title: "Au.D., Ph.D.",
body: "is a Clinical Assistant Professor in Communication Sciences and Disorders at the University of Iowa. She earned both her Au.D. and Ph.D. degrees from the University of Iowa in 2008 and 2016, respectively. Dr. Jeon's research and clinical interests focus on aural (re)habilitation for children and adults with hearing aids and cochlear implants. She has served as a reviewer for various journals, including Ear and Hearing and Cochlear Implant International. Dr. Jeon is an active member of several professional organizations, such as the American Academy of Audiology (AAA), the American Cochlear Implant Alliance (ACIA), the American Speech-Language-Hearing Association (ASHA), the Iowa Speech-Language-Hearing Association (ISHA), and the Asia Pacific Society of Speech-Language-Hearing (APSSLH). Currently, she has been entrusted with various leadership responsibilities, including educational committee officer for the APSSLH, Member-at-Large for the Iowa Speech Language Hearing Foundation, Iowa EHDI Advisory Board representative for the ISHA, and program committee member for the CI2023 conference.",
img: "/profiles/jeon-eunkyung.jpg",
position: "left",
},
];
const About: NextPage = () => {
return <>
<Header />
<main>
<div style={{
backgroundImage: `url("/backdrops/uiowa-aerial.jpeg")`,
backgroundPosition: `center`,
}} className="h-96">
<div style={{
WebkitBackdropFilter: `blur(5px) contrast(50%)`,
backdropFilter: `blur(5px) contrast(50%)`,
}} className="h-full w-full grid place-items-center">
<div className="space-y-8">
<h1 className="mx-auto text-center font-extrabold text-5xl max-w-lg text-yellow-200">About Us</h1>
</div>
</div>
return (
<>
<Header />
<main>
<div
style={{
backgroundImage: `url("/backdrops/uiowa-aerial.jpeg")`,
backgroundPosition: `center`,
}}
className="h-96"
>
<div
style={{
WebkitBackdropFilter: `blur(5px) contrast(50%)`,
backdropFilter: `blur(5px) contrast(50%)`,
}}
className="grid h-full w-full place-items-center"
>
<div className="space-y-8">
<h1 className="mx-auto max-w-lg text-center text-5xl font-extrabold text-yellow-200">
About Us
</h1>
</div>
<div className="w-full">
<div style={{
backgroundImage: `url("/backdrops/foot-steps.png")`,
}} className="mx-auto max-w-7xl">
<div style={{
WebkitBackdropFilter: `blur(2px)`,
backdropFilter: `blur(2px)`,
}} className="sm:p-8">
{/** Small screens */}
<div className="sm:hidden w-full bg-neutral-900 p-4 border-b-2 border-yellow-400">
<h1 className="text-white text-4xl font-bold text-center">
Meet the Team
<HandRaisedIcon className="ml-4 rotate-12 text-yellow-200 inline w-12 animate-hand_wave animate-hand_pop"/>
</h1>
</div>
{/** Large screens */}
<div className="hidden sm:block mx-auto bg-neutral-900 p-4 mx-auto w-max rounded-xl mt-8 mb-20 border-2 border-neutral-300 shadow-xl">
<h1 className="text-white text-4xl font-bold text-center">
Meet the Team
<HandRaisedIcon className="ml-4 rotate-12 text-yellow-200 inline w-12 animate-hand_wave"/>
</h1>
</div>
<div className="sm:my-16 grid grid-cols-2 lg:grid-cols-3 sm:mt-4 lg:space-y-24 sm:space-y-12">
{biographies.map((biography, index) => {
return (
<Biopgraphy key={index} {...biography} />
);
})}
</div>
</div>
</div>
</div>
</div>
<div className="w-full">
<div
style={{
backgroundImage: `url("/backdrops/foot-steps.png")`,
}}
className="mx-auto max-w-7xl"
>
<div
style={{
WebkitBackdropFilter: `blur(2px)`,
backdropFilter: `blur(2px)`,
}}
className="sm:p-8"
>
{/** Small screens */}
<div className="w-full border-b-2 border-yellow-400 bg-neutral-900 p-4 sm:hidden">
<h1 className="text-center text-4xl font-bold text-white">
Meet the Team
<HandRaisedIcon className="animate-hand_pop ml-4 inline w-12 rotate-12 animate-hand_wave text-yellow-200" />
</h1>
</div>
{/** Large screens */}
<div className="mx-auto mx-auto mt-8 mb-20 hidden w-max rounded-xl border-2 border-neutral-300 bg-neutral-900 p-4 shadow-xl sm:block">
<h1 className="text-center text-4xl font-bold text-white">
Meet the Team
<HandRaisedIcon className="ml-4 inline w-12 rotate-12 animate-hand_wave text-yellow-200" />
</h1>
</div>
<div className="grid grid-cols-2 sm:my-16 sm:mt-4 sm:space-y-12 lg:grid-cols-3 lg:space-y-24">
{biographies.map((biography, index) => {
return <Biopgraphy key={index} {...biography} />;
})}
</div>
</div>
</main>
<Footer />
</div>
</div>
</main>
<Footer />
</>
);
};
export default About
export default About;

2
src/pages/api/trpc/[trpc].ts
View File

@ -12,7 +12,7 @@ export default createNextApiHandler({
env.NODE_ENV === "development"
? ({ path, error }) => {
console.error(
`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
);
}
: undefined,

15
src/pages/contact.tsx
View File

@ -3,14 +3,13 @@ import Footer from "~/components/Footer";
import Header from "~/components/Header";
const Contact: NextPage = () => {
return <>
<Header />
<main>
</main>
<Footer />
return (
<>
<Header />
<main></main>
<Footer />
</>
);
};
export default Contact
export default Contact;

171
src/pages/index.tsx
View File

@ -1,104 +1,161 @@
import { type NextPage } from "next";
import Link from "next/link";
import { ArrowUpRightIcon } from '@heroicons/react/20/solid';
import { ArrowUpRightIcon } from "@heroicons/react/20/solid";
import Footer from "~/components/Footer";
import Header from "~/components/Header";
const TextLink = ({href, children}: {
href: string,
children: string,
}) => {
const TextLink = ({ href, children }: { href: string; children: string }) => {
return (
<Link href={href} className="inline-block text-sm align-items-center hover:bg-neutral-900 hover:text-white border border-neutral-900 rounded-md py-[2px] px-[4px]">
{children}
<Link
href={href}
className="align-items-center inline-block rounded-md border border-neutral-900 py-[2px] px-[4px] text-sm hover:bg-neutral-900 hover:text-white"
>
{children}
<ArrowUpRightIcon className="inline-block w-4" />
</Link>
)
}
);
};
const Home: NextPage = () => {
return (
<>
<div className="min-h-screen flex flex-col">
<div className="flex min-h-screen flex-col">
<Header />
<div style={{
backgroundImage: `url("/backdrops/patient-clinic-bg.jpeg")`,
backgroundPosition: `center`,
backgroundRepeat: `no-repeat`,
}} className="grow flex flex-col">
<div style={{
WebkitBackdropFilter: `blur(15px) contrast(50%)`,
backdropFilter: `blur(15px) contrast(50%)`,
}} className="grow min-h-[350px] w-full flex flex-col">
<div className="space-y-8 my-auto h-min">
<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-[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>
</div>
<div
style={{
backgroundImage: `url("/backdrops/patient-clinic-bg.jpeg")`,
backgroundPosition: `center`,
backgroundRepeat: `no-repeat`,
}}
className="flex grow flex-col"
>
<div
style={{
WebkitBackdropFilter: `blur(15px) contrast(50%)`,
backdropFilter: `blur(15px) contrast(50%)`,
}}
className="flex min-h-[350px] w-full grow flex-col"
>
<div className="my-auto h-min space-y-8">
<h1 className="mx-auto max-w-lg text-center text-4xl font-extrabold text-yellow-200">
Welcome to the Resource Center for Auditory Training!
</h1>
<div className="mx-auto flex w-[350px] flex-col space-y-4 rounded-md border border-neutral-500 bg-neutral-900 p-4 shadow-lg shadow-neutral-800/50 sm:w-[400px]">
<p className="text-center text-2xl text-neutral-100">
Looking for resource recommendations?
</p>
<Link
href="/resources/search"
className="flex-inline mx-auto flex animate-expand_in_out rounded-md border border-neutral-300 bg-yellow-400 p-2 font-bold hover:bg-yellow-100"
>
Search for Auditory Resources
<ArrowUpRightIcon className="inline w-5" />
</Link>
</div>
</div>
</div>
</div>
</div>
<main>
<section className="min-h-[300px] grid place-items-center 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 justify-center flex-col-reverse md:flex-row md:divide-y-0 md:divide-x divide-neutral-700">
<section className="grid min-h-[300px] place-items-center border border-b border-neutral-400 bg-yellow-100 p-4 text-white drop-shadow-md sm:p-12">
<div className="flex max-w-5xl flex-col-reverse justify-center divide-neutral-700 md:flex-row md:divide-y-0 md:divide-x">
<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/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>
<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>
<h1 className="pr-auto my-auto h-full grow p-4 text-center text-4xl font-bold text-black">
Getting Started
</h1>
</div>
</section>
<section className="min-h-[300px] grid place-items-center p-4 sm:p-12 bg-neutral-900 text-white border-t border-y border-yellow-200">
<div className="my-auto max-w-5xl flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x divide-white mx-auto">
<h1 className="grow h-full my-auto pr-auto text-4xl p-4 font-bold text-center text-yellow-200">Our Purpose</h1>
<section className="grid min-h-[300px] place-items-center border-y border-t border-yellow-200 bg-neutral-900 p-4 text-white sm:p-12">
<div className="my-auto mx-auto flex max-w-5xl flex-col divide-y divide-white md:flex-row md:divide-y-0 md:divide-x">
<h1 className="pr-auto my-auto h-full grow p-4 text-center text-4xl font-bold text-yellow-200">
Our Purpose
</h1>
<section className="px-4 text-neutral-300">
<p className="pt-2">The goal of this site is to provide resources for cochlear implant users to practice listening with their device. While cochlear implants are highly effective in providing access to speech sounds for patients, it can take time and practice for them to adjust to the new signal transmitted through the implant. Auditory training can assist cochlear implant users in practicing listening to environmental sounds, understanding speech sounds in both quiet and noisy environments, and (re)training to enjoy music. We have compiled and categorized all available auditory training resources for cochlear implant users, including smartphone, web-based, and other online resources that can be utilized as clinician-guided or home-based by the cochlear implant patient and their families. Our online index allows both professionals and patients to filter through the resources based on specific characteristics and requested features, making the selection process more efficient.</p>
<p className="pt-2">
The goal of this site is to provide resources for cochlear
implant users to practice listening with their device. While
cochlear implants are highly effective in providing access to
speech sounds for patients, it can take time and practice for
them to adjust to the new signal transmitted through the
implant. Auditory training can assist cochlear implant users in
practicing listening to environmental sounds, understanding
speech sounds in both quiet and noisy environments, and
(re)training to enjoy music. We have compiled and categorized
all available auditory training resources for cochlear implant
users, including smartphone, web-based, and other online
resources that can be utilized as clinician-guided or home-based
by the cochlear implant patient and their families. Our online
index allows both professionals and patients to filter through
the resources based on specific characteristics and requested
features, making the selection process more efficient.
</p>
</section>
</div>
</section>
<div className="max-w-5xl mx-auto p-4 sm:p-12 mb-12">
<h1 className="font-extrabold text-2xl sm:text-4xl text-center">Want to learn more?</h1>
<div className="flex flex-col pt-8 space-y-6 mx-auto w-fit">
<section className="space-x-4 flex flex-row justify-between">
<h2 className="italic text-md my-auto inline-block sm:text-lg">
<div className="mx-auto mb-12 max-w-5xl p-4 sm:p-12">
<h1 className="text-center text-2xl font-extrabold sm:text-4xl">
Want to learn more?
</h1>
<div className="mx-auto flex w-fit flex-col space-y-6 pt-8">
<section className="flex flex-row justify-between space-x-4">
<h2 className="text-md my-auto inline-block italic sm:text-lg">
Learn more about the project
</h2>
<span className="hidden sm:block grow border border-dashed border-neutral-400 h-[1px] my-auto" />
<Link href="/about" className="font-semibold align-middle inline-block ease-out duration-200 hover:shadow-md hover:bg-yellow-300 shadow-lg shadow-black/50 px-4 py-2 bg-yellow-200 rounded-md border border-neutral-900">
<span className="my-auto hidden h-[1px] grow border border-dashed border-neutral-400 sm:block" />
<Link
href="/about"
className="inline-block rounded-md border border-neutral-900 bg-yellow-200 px-4 py-2 align-middle font-semibold shadow-lg shadow-black/50 duration-200 ease-out hover:bg-yellow-300 hover:shadow-md"
>
About
<ArrowUpRightIcon className="inline-block align-middle w-5" />
<ArrowUpRightIcon className="inline-block w-5 align-middle" />
</Link>
</section>
<section className="space-x-4 flex flex-row justify-between">
<h2 className="italic text-md my-auto inline-block sm:text-lg">
<section className="flex flex-row justify-between space-x-4">
<h2 className="text-md my-auto inline-block italic sm:text-lg">
Get in touch with the team
</h2>
<span className="hidden sm:block grow border border-dashed border-neutral-400 h-[1px] my-auto" />
<Link href="/contact" className="font-semibold align-middle inline-block ease-out duration-200 hover:shadow-md hover:bg-yellow-300 shadow-lg shadow-black/50 px-4 py-2 bg-yellow-200 rounded-md border border-neutral-900">
<span className="my-auto hidden h-[1px] grow border border-dashed border-neutral-400 sm:block" />
<Link
href="/contact"
className="inline-block rounded-md border border-neutral-900 bg-yellow-200 px-4 py-2 align-middle font-semibold shadow-lg shadow-black/50 duration-200 ease-out hover:bg-yellow-300 hover:shadow-md"
>
Contact
<ArrowUpRightIcon className="inline-block align-middle w-5" />
<ArrowUpRightIcon className="inline-block w-5 align-middle" />
</Link>
</section>
<section className="space-x-4 flex flex-row justify-between">
<h2 className="italic text-md my-auto inline-block sm:text-lg">
<section className="flex flex-row justify-between space-x-4">
<h2 className="text-md my-auto inline-block italic sm:text-lg">
Tell us how we&rsquo;re doing!
</h2>
<a target="_blank" href='https://forms.gle/FD2abgwBuTaipysZ6' className="flex flex-row font-semibold align-middle inline-block ease-out duration-200 hover:shadow-md hover:bg-yellow-300 shadow-lg shadow-black/50 px-4 py-2 bg-yellow-200 rounded-md border border-neutral-900">
<a
target="_blank"
href="https://forms.gle/FD2abgwBuTaipysZ6"
className="inline-block flex flex-row rounded-md border border-neutral-900 bg-yellow-200 px-4 py-2 align-middle font-semibold shadow-lg shadow-black/50 duration-200 ease-out hover:bg-yellow-300 hover:shadow-md"
>
Give Feedback
<ArrowUpRightIcon className="inline align-middle w-5" />
<ArrowUpRightIcon className="inline w-5 align-middle" />
</a>
</section>
</div>
</div>
</main>
<Footer/>
<Footer />
</>
);
};

157
src/pages/resources/[id].tsx
View File

@ -1,35 +1,35 @@
import { type InferGetStaticPropsType, type GetStaticPropsContext } from "next";
import { GlobeAltIcon, DocumentIcon } from '@heroicons/react/24/solid';
import { createProxySSGHelpers } from '@trpc/react-query/ssg';
import { GlobeAltIcon, DocumentIcon } from "@heroicons/react/24/solid";
import { createProxySSGHelpers } from "@trpc/react-query/ssg";
import { appRouter } from "~/server/api/root";
import { prisma } from "~/server/db";
import { api } from "~/utils/api";
import { ResourceDescription, ResourceInfo } from "~/components/ResourceTable";
import { type PlatformLink } from "@prisma/client";
import Image from 'next/image';
import Image from "next/image";
import Link from "next/link";
import Footer from "~/components/Footer";
import Header from "~/components/Header";
export const getStaticPaths = async () => {
const resources = (await prisma.auditoryResource.findMany({
const resources = await prisma.auditoryResource.findMany({
select: {
id: true,
}
}));
},
});
return {
paths: resources.map((resource) => ({
params: {
id: resource.id,
}
},
})),
fallback: 'blocking',
}
fallback: "blocking",
};
};
export async function getStaticProps(
context: GetStaticPropsContext<{ id: string }>,
context: GetStaticPropsContext<{ id: string }>
) {
const ssg = createProxySSGHelpers({
router: appRouter,
@ -40,7 +40,7 @@ export async function getStaticProps(
});
const id = context.params?.id as string;
await ssg.auditoryResource.byId.prefetch({id});
await ssg.auditoryResource.byId.prefetch({ id });
return {
props: {
@ -51,97 +51,120 @@ export async function getStaticProps(
};
}
const PlatformLinkButton = ({platformLink}: {platformLink: PlatformLink}) => {
const PlatformLinkButton = ({
platformLink,
}: {
platformLink: PlatformLink;
}) => {
const Inner = () => {
switch (platformLink.platform) {
case "APP_ANDROID": {
return (
<Image className="w-full" src={`/google-play-badge.png`} alt={`Download on the Apple AppStore`} width={512} height={216}/>
)
<Image
className="w-full"
src={`/google-play-badge.png`}
alt={`Download on the Apple AppStore`}
width={512}
height={216}
/>
);
}
case "APP_IOS": {
return (
<Image className="w-full" src={`/app-store-badge.png`} alt={`Download on the Apple AppStore`} width={512} height={216}/>
)
<Image
className="w-full"
src={`/app-store-badge.png`}
alt={`Download on the Apple AppStore`}
width={512}
height={216}
/>
);
}
case "PDF": {
return (
<div className="hover:bg-amber-200 bg-amber-300 border-2 px-2 h-16 align-middle border-neutral-900 rounded-lg flex flex-row space-x-2">
<div className="flex h-16 flex-row space-x-2 rounded-lg border-2 border-neutral-900 bg-amber-300 px-2 align-middle hover:bg-amber-200">
<DocumentIcon className="w-6" />
<span className="font-bold text-sm my-auto">
Document
</span>
<span className="my-auto text-sm font-bold">Document</span>
</div>
)
);
}
case "WEBSITE": {
return (
<div className="hover:bg-amber-200 bg-amber-300 border-2 px-2 h-14 align-middle border-neutral-900 rounded-lg flex flex-row space-x-2">
<div className="flex h-14 flex-row space-x-2 rounded-lg border-2 border-neutral-900 bg-amber-300 px-2 align-middle hover:bg-amber-200">
<GlobeAltIcon className="w-6" />
<span className="font-bold text-sm my-auto">
Website
</span>
<span className="my-auto text-sm font-bold">Website</span>
</div>
)
);
}
}
}
};
return (
<Link href={platformLink.link} target="_blank" rel="noopener noreferrer">
<Inner />
</Link>
)
}
);
};
const DownloadButtons = ({platformLinks}: {platformLinks: PlatformLink[]}) => {
const DownloadButtons = ({
platformLinks,
}: {
platformLinks: PlatformLink[];
}) => {
const buttons = platformLinks.map((paltformLink, index) => {
return (
<PlatformLinkButton key={index} platformLink={paltformLink} />
)
return <PlatformLinkButton key={index} platformLink={paltformLink} />;
});
return (
<div className="w-48 mx-auto flex flex-col space-y-2">
{buttons}
</div>
)
}
const ResourceViewPage = (props: InferGetStaticPropsType<typeof getStaticProps>) => {
return <div className="mx-auto flex w-48 flex-col space-y-2">{buttons}</div>;
};
const ResourceViewPage = (
props: InferGetStaticPropsType<typeof getStaticProps>
) => {
const { id } = props;
const resourceQuery = api.auditoryResource.byId.useQuery({ id });
if (!resourceQuery.data) {
return <>
</>
return <></>;
}
return <>
<div className="min-h-screen">
<Header />
<main className="mb-12">
<div className="flex py-4 flex-col flex-col-reverse sm:flex-row divide-x max-w-2xl mx-auto">
<div className="text-lg flex flex-col justify-end font-bold my-5 mr-4">
<div className="mx-4">
<h1 className="border-b mb-2 border-neutral-400">Links</h1>
<DownloadButtons platformLinks={resourceQuery.data.platform_links} />
return (
<>
<div className="min-h-screen">
<Header />
<main className="mb-12">
<div className="mx-auto flex max-w-2xl flex-col flex-col-reverse divide-x py-4 sm:flex-row">
<div className="my-5 mr-4 flex flex-col justify-end text-lg font-bold">
<div className="mx-4">
<h1 className="mb-2 border-b border-neutral-400">Links</h1>
<DownloadButtons
platformLinks={resourceQuery.data.platform_links}
/>
</div>
</div>
<div className="justify-left flex flex-col pb-5">
<ResourceInfo resource={resourceQuery.data} />
<div className="mx-4 overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 text-left shadow">
<ResourceDescription
manufacturer={resourceQuery.data.manufacturer}
description={resourceQuery.data.description}
/>
</div>
<div className="ml-4 mt-4 mr-auto rounded-lg border-2 border-neutral-900 bg-neutral-600">
<span className="px-2 py-2 text-sm text-neutral-200">
Ages {resourceQuery.data.ages.min}
{resourceQuery.data.ages.max >= 100
? "+"
: `-${resourceQuery.data.ages.max}`}
</span>
</div>
</div>
</div>
<div className="flex pb-5 flex-col justify-left">
<ResourceInfo resource={resourceQuery.data} />
<div className="mx-4 text-left border border-neutral-400 rounded-xl overflow-hidden bg-neutral-200 shadow">
<ResourceDescription manufacturer={resourceQuery.data.manufacturer} description={resourceQuery.data.description} />
</div>
<div className="ml-4 mt-4 mr-auto border-2 border-neutral-900 rounded-lg bg-neutral-600">
<span className="text-neutral-200 text-sm px-2 py-2">Ages {resourceQuery.data.ages.min}{resourceQuery.data.ages.max >= 100 ? "+" : `-${resourceQuery.data.ages.max}`}</span>
</div>
</div>
</div>
</main>
<Footer/>
</div>
</>
</main>
<Footer />
</div>
</>
);
};
export default ResourceViewPage
export default ResourceViewPage;

49
src/pages/resources/index.tsx
View File

@ -1,4 +1,4 @@
import { LinkIcon } from '@heroicons/react/20/solid';
import { LinkIcon } from "@heroicons/react/20/solid";
import Link from "next/link";
import { useRouter } from "next/router";
import ResourceTable from "~/components/ResourceTable";
@ -8,22 +8,22 @@ import Footer from "~/components/Footer";
import Header from "~/components/Header";
const Resources = () => {
const router = useRouter()
const router = useRouter();
const queryData = parseQueryData(router.query);
const currentPage = queryData.page;
const resourceQuery = api.auditoryResource.search.useQuery({
skip: (queryData.page - 1) * queryData.perPage,
take: queryData.perPage,
ages: queryData.age,
platforms: queryData.platforms,
skill_levels: queryData.skill_levels,
skills: queryData.skills,
skip: (queryData.page - 1) * queryData.perPage,
take: queryData.perPage,
ages: queryData.age,
platforms: queryData.platforms,
skill_levels: queryData.skill_levels,
skills: queryData.skills,
});
if (!resourceQuery.data) {
return <></>
return <></>;
}
const totalPages = Math.ceil(resourceQuery.data.count / queryData.perPage);
@ -31,24 +31,35 @@ const Resources = () => {
return (
<>
<Header />
<main className="my-6 md:px-4 max-w-6xl mx-auto">
<div className="sm:mb-4 mb-2 sm:p-4 p-2 space-y-2">
<main className="my-6 mx-auto max-w-6xl md:px-4">
<div className="mb-2 space-y-2 p-2 sm:mb-4 sm:p-4">
<h1 className="text-3xl font-bold">All Resources</h1>
<div className="">
<p className="inline">Fill out the </p>
<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]">
<Link
href="/resources/search"
className="inline rounded-lg border border-neutral-800 bg-neutral-200 px-2 py-[4px] hover:bg-neutral-900 hover:text-white"
>
search form
<LinkIcon className="w-4 inline" />
<LinkIcon className="inline w-4" />
</Link>
<p className="inline"> for a list of auditory training 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} />
<ResourceTable
resourcesPerPage={queryData.perPage}
resources={resourceQuery.data.resources}
totalPages={totalPages}
query={router.query}
currentPage={currentPage}
/>
</main>
<Footer />
</>
);
}
};
export default Resources;
export default Resources;

230
src/pages/resources/search.tsx
View File

@ -1,121 +1,127 @@
import Footer from "~/components/Footer";
import Header from "~/components/Header";
import { GuidedSearch, type Question, type QuestionTypes } from "~/components/Search";
import {
GuidedSearch,
type Question,
type QuestionTypes,
} from "~/components/Search";
const questions: Question<QuestionTypes>[] = [
{
for: "ages",
header: "Age of Patient",
question: "How old is the patient?",
maxSelect: 1,
optional: true,
options: [
{
label: "Child (0-10)",
value: "0-9",
},
{
label: "Teen (10-20)",
value: "10-20",
},
{
label: "Adult (21+)",
value: "21-100",
},
],
},
{
for: "platforms",
header: "Desired Platforms",
question: "What platform(s) does the resource need to be on?",
optional: true,
options: [
{
label: "Apple (iOS)",
value: "APP_IOS",
},
{
label: "Android",
value: "APP_ANDROID",
},
{
label: "Web-Based",
value: "WEBSITE",
},
{
label: "PDF (printable)",
value: "PDF",
}
]
},
{
for: "skills",
header: "Skills Practiced",
question: "What skill(s) would you like the resource to cover?",
optional: true,
options: [
{
label: "Phonemes",
value: "PHONEMES",
},
{
label: "Words",
value: "WORDS",
},
{
label: "Sentence",
value: "SENTENCES",
},
{
label: "Discourse/Complex",
value: "DISCOURSE",
},
{
label: "Music",
value: "MUSIC",
},
{
label: "Environmental Sounds",
value: "ENVIRONMENT",
},
]
},
{
for: "skill_levels",
header: "Skill Level",
question: "What skill level(s) should the resource have?",
optional: true,
options: [
{
label: "Beginner",
value: "BEGINNER",
},
{
label: "Intermediate",
value: "INTERMEDIATE",
},
{
label: "Advanced",
value: "ADVANCED",
}
]
},
]
{
for: "ages",
header: "Age of Patient",
question: "How old is the patient?",
maxSelect: 1,
optional: true,
options: [
{
label: "Child (0-10)",
value: "0-9",
},
{
label: "Teen (10-20)",
value: "10-20",
},
{
label: "Adult (21+)",
value: "21-100",
},
],
},
{
for: "platforms",
header: "Desired Platforms",
question: "What platform(s) does the resource need to be on?",
optional: true,
options: [
{
label: "Apple (iOS)",
value: "APP_IOS",
},
{
label: "Android",
value: "APP_ANDROID",
},
{
label: "Web-Based",
value: "WEBSITE",
},
{
label: "PDF (printable)",
value: "PDF",
},
],
},
{
for: "skills",
header: "Skills Practiced",
question: "What skill(s) would you like the resource to cover?",
optional: true,
options: [
{
label: "Phonemes",
value: "PHONEMES",
},
{
label: "Words",
value: "WORDS",
},
{
label: "Sentence",
value: "SENTENCES",
},
{
label: "Discourse/Complex",
value: "DISCOURSE",
},
{
label: "Music",
value: "MUSIC",
},
{
label: "Environmental Sounds",
value: "ENVIRONMENT",
},
],
},
{
for: "skill_levels",
header: "Skill Level",
question: "What skill level(s) should the resource have?",
optional: true,
options: [
{
label: "Beginner",
value: "BEGINNER",
},
{
label: "Intermediate",
value: "INTERMEDIATE",
},
{
label: "Advanced",
value: "ADVANCED",
},
],
},
];
const SearchPage = () => {
return <>
<div className="max-h-screen overflow-y-scroll snap snap-y snap-mandatory">
<div className="snap-start snap-always">
<Header />
</div>
<div className="snap-center snap-always 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">
<GuidedSearch questions={questions} />
</div>
<div className="snap-end snap-always">
<Footer />
</div>
return (
<>
<div className="snap max-h-screen snap-y snap-mandatory overflow-y-scroll">
<div className="snap-start snap-always">
<Header />
</div>
<div className="mx-auto mt-4 mb-4 w-full max-w-xl snap-center snap-always overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 drop-shadow-md">
<GuidedSearch questions={questions} />
</div>
<div className="snap-end snap-always">
<Footer />
</div>
</div>
</>
}
);
};
export default SearchPage
export default SearchPage;