add prettier lint rule
This commit is contained in:
Brandon Egger
parent
e10f2911d9
commit
192c594d4f
@ -4,6 +4,7 @@ const config = {
|
||||
{
|
||||
extends: [
|
||||
"plugin:@typescript-eslint/recommended-requiring-type-checking",
|
||||
"prettier",
|
||||
],
|
||||
files: ["*.ts", "*.tsx"],
|
||||
parserOptions: {
|
||||
@ -15,9 +16,10 @@ const config = {
|
||||
parserOptions: {
|
||||
project: "./tsconfig.json",
|
||||
},
|
||||
plugins: ["@typescript-eslint"],
|
||||
plugins: ["@typescript-eslint", "prettier"],
|
||||
extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
|
||||
rules: {
|
||||
"prettier/prettier": ["error"],
|
||||
"@typescript-eslint/consistent-type-imports": [
|
||||
"warn",
|
||||
{
|
||||
|
||||
84
package-lock.json
generated
84
package-lock.json
generated
@ -37,6 +37,8 @@
|
||||
"autoprefixer": "^10.4.7",
|
||||
"eslint": "^8.34.0",
|
||||
"eslint-config-next": "^13.2.1",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"postcss": "^8.4.14",
|
||||
"prettier": "^2.8.1",
|
||||
"prettier-plugin-tailwindcss": "^0.2.1",
|
||||
@ -1803,6 +1805,18 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-config-prettier": {
|
||||
"version": "8.8.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
|
||||
"integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"eslint-config-prettier": "bin/cli.js"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"eslint": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-import-resolver-node": {
|
||||
"version": "0.3.7",
|
||||
"resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
|
||||
@ -2003,6 +2017,27 @@
|
||||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-plugin-prettier": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
|
||||
"integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"prettier-linter-helpers": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"eslint": ">=7.28.0",
|
||||
"prettier": ">=2.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"eslint-config-prettier": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-plugin-react": {
|
||||
"version": "7.32.2",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
|
||||
@ -2191,6 +2226,12 @@
|
||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fast-diff": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
|
||||
"integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fast-glob": {
|
||||
"version": "3.2.12",
|
||||
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
|
||||
@ -3874,6 +3915,18 @@
|
||||
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/prettier-linter-helpers": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
|
||||
"integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"fast-diff": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/prettier-plugin-tailwindcss": {
|
||||
"version": "0.2.4",
|
||||
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.4.tgz",
|
||||
@ -6092,6 +6145,13 @@
|
||||
"eslint-plugin-react-hooks": "^4.5.0"
|
||||
}
|
||||
},
|
||||
"eslint-config-prettier": {
|
||||
"version": "8.8.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
|
||||
"integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"eslint-import-resolver-node": {
|
||||
"version": "0.3.7",
|
||||
"resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
|
||||
@ -6251,6 +6311,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"eslint-plugin-prettier": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
|
||||
"integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"prettier-linter-helpers": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"eslint-plugin-react": {
|
||||
"version": "7.32.2",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
|
||||
@ -6380,6 +6449,12 @@
|
||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
|
||||
"dev": true
|
||||
},
|
||||
"fast-diff": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
|
||||
"integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
|
||||
"dev": true
|
||||
},
|
||||
"fast-glob": {
|
||||
"version": "3.2.12",
|
||||
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
|
||||
@ -7531,6 +7606,15 @@
|
||||
"integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
|
||||
"dev": true
|
||||
},
|
||||
"prettier-linter-helpers": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
|
||||
"integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fast-diff": "^1.1.2"
|
||||
}
|
||||
},
|
||||
"prettier-plugin-tailwindcss": {
|
||||
"version": "0.2.4",
|
||||
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.4.tgz",
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
"dev": "next dev",
|
||||
"postinstall": "prisma generate",
|
||||
"lint": "next lint",
|
||||
"format": "next lint --fix",
|
||||
"start": "next start",
|
||||
"mongo:start": "docker run --rm -d -p 27017:27017 -h $(hostname) --name uiowa_atr_mongo mongo:4.4.3 --replSet=test && sleep 4 && docker exec uiowa_atr_mongo mongo --eval \"rs.initiate();\""
|
||||
},
|
||||
@ -42,6 +43,8 @@
|
||||
"autoprefixer": "^10.4.7",
|
||||
"eslint": "^8.34.0",
|
||||
"eslint-config-next": "^13.2.1",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"postcss": "^8.4.14",
|
||||
"prettier": "^2.8.1",
|
||||
"prettier-plugin-tailwindcss": "^0.2.1",
|
||||
|
||||
@ -1,140 +1,173 @@
|
||||
import { type NextPage } from "next/types";
|
||||
import Image from 'next/image';
|
||||
import Image from "next/image";
|
||||
|
||||
interface QuickLink {
|
||||
label: string,
|
||||
href: string,
|
||||
label: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const links: QuickLink[] = [
|
||||
{
|
||||
label: "Communication Sciences and Disorders",
|
||||
href: "https://csd.uiowa.edu/",
|
||||
},
|
||||
{
|
||||
label: "Wendell Johnson",
|
||||
href: "https://www.facilities.uiowa.edu/named-building/wendell-johnson-speech-and-hearing-center",
|
||||
}
|
||||
]
|
||||
{
|
||||
label: "Communication Sciences and Disorders",
|
||||
href: "https://csd.uiowa.edu/",
|
||||
},
|
||||
{
|
||||
label: "Wendell Johnson",
|
||||
href: "https://www.facilities.uiowa.edu/named-building/wendell-johnson-speech-and-hearing-center",
|
||||
},
|
||||
];
|
||||
|
||||
const QuickLink = ({label, href}: QuickLink) => {
|
||||
return (
|
||||
<a className="hover:underline space-x-2" target="_blank" href={href}>
|
||||
<Image className="inline" alt="external link" width={16} height={16} src="/open-external-link-icon.svg" />
|
||||
<span className="inline">{label}</span>
|
||||
</a>
|
||||
)
|
||||
const QuickLink = ({ label, href }: QuickLink) => {
|
||||
return (
|
||||
<a className="space-x-2 hover:underline" target="_blank" href={href}>
|
||||
<Image
|
||||
className="inline"
|
||||
alt="external link"
|
||||
width={16}
|
||||
height={16}
|
||||
src="/open-external-link-icon.svg"
|
||||
/>
|
||||
<span className="inline">{label}</span>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
interface ContactInfo {
|
||||
name: string,
|
||||
title: string,
|
||||
email?: string,
|
||||
phone?: string,
|
||||
name: string;
|
||||
title: string;
|
||||
email?: string;
|
||||
phone?: string;
|
||||
}
|
||||
|
||||
const contacts: ContactInfo[] = [
|
||||
{
|
||||
name: "Olivia Adamson",
|
||||
title: "Audiology Graduate Student Clinician",
|
||||
email: "olivia-adamson@uiowa.edu",
|
||||
},
|
||||
{
|
||||
name: "Eun Kyung (Julie) Jeon",
|
||||
title: "Clinical Assistant Professor",
|
||||
email: "eunkyung-jeon@uiowa.edu",
|
||||
phone: "3194671476"
|
||||
}
|
||||
]
|
||||
{
|
||||
name: "Olivia Adamson",
|
||||
title: "Audiology Graduate Student Clinician",
|
||||
email: "olivia-adamson@uiowa.edu",
|
||||
},
|
||||
{
|
||||
name: "Eun Kyung (Julie) Jeon",
|
||||
title: "Clinical Assistant Professor",
|
||||
email: "eunkyung-jeon@uiowa.edu",
|
||||
phone: "3194671476",
|
||||
},
|
||||
];
|
||||
|
||||
const ContactInfo = ({name, title, email, phone}: ContactInfo) => {
|
||||
return (
|
||||
<section className="py-4 space-y-2">
|
||||
<h1 className="text-md">{name}</h1>
|
||||
<p className="italic text-sm text-neutral-400">{title}</p>
|
||||
{ email ?
|
||||
<section className="space-x-2">
|
||||
<Image className="inline" alt="email" width={20} height={20} src="/mail-icon-white.svg"/>
|
||||
<h2 className="text-sm inline">{email}</h2>
|
||||
</section>
|
||||
: undefined}
|
||||
{ phone ?
|
||||
<section className="space-x-2">
|
||||
<Image className="inline" alt="phone" width={20} height={20} src="/phone-call-icon.svg"/>
|
||||
<h2 className="text-sm inline">{phone}</h2>
|
||||
</section>
|
||||
: undefined}
|
||||
const ContactInfo = ({ name, title, email, phone }: ContactInfo) => {
|
||||
return (
|
||||
<section className="space-y-2 py-4">
|
||||
<h1 className="text-md">{name}</h1>
|
||||
<p className="text-sm italic text-neutral-400">{title}</p>
|
||||
{email ? (
|
||||
<section className="space-x-2">
|
||||
<Image
|
||||
className="inline"
|
||||
alt="email"
|
||||
width={20}
|
||||
height={20}
|
||||
src="/mail-icon-white.svg"
|
||||
/>
|
||||
<h2 className="inline text-sm">{email}</h2>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
) : undefined}
|
||||
{phone ? (
|
||||
<section className="space-x-2">
|
||||
<Image
|
||||
className="inline"
|
||||
alt="phone"
|
||||
width={20}
|
||||
height={20}
|
||||
src="/phone-call-icon.svg"
|
||||
/>
|
||||
<h2 className="inline text-sm">{phone}</h2>
|
||||
</section>
|
||||
) : undefined}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
const FooterLabeledSection = ({title, children}: {
|
||||
title: string,
|
||||
children: JSX.Element[] | JSX.Element,
|
||||
const FooterLabeledSection = ({
|
||||
title,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
children: JSX.Element[] | JSX.Element;
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-col px-2 sm:px-8">
|
||||
<h1 className="font-bold text-xl text-neutral-400">{title}</h1>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className="flex flex-col px-2 sm:px-8">
|
||||
<h1 className="text-xl font-bold text-neutral-400">{title}</h1>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Footer: NextPage = () => {
|
||||
return (
|
||||
<div className="w-full bg-neutral-800">
|
||||
{/** yellow stripe */}
|
||||
<div className="bg-yellow-400 border-t-[1px] border-neutral-400 p-[4px]"></div>
|
||||
return (
|
||||
<div className="w-full bg-neutral-800">
|
||||
{/** yellow stripe */}
|
||||
<div className="border-t-[1px] border-neutral-400 bg-yellow-400 p-[4px]"></div>
|
||||
|
||||
{/** Main footer area */}
|
||||
<div className="mx-auto max-w-5xl p-4 flex flex-col-reverse md:flex-row justify-between">
|
||||
{/** Wendell Johnson Info */}
|
||||
<div className="flex-col mt-8 sm:mt-0">
|
||||
<Image alt="University of Iowa logo" width={128} height={64} src="/IOWA-gold-text.png" />
|
||||
<div className="px-2 text-neutral-100 space-y-8">
|
||||
<section>
|
||||
<h1 className="text-yellow-300 text-md">Communication Sciences and Disorders</h1>
|
||||
<h2 className="text-yellow-100 italic text-sm">College of Liberal Arts and Sciences</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h3 className="text-sm italic">Wendell Johnson Speech and Hearing Center</h3>
|
||||
<p className="text-sm">250 Hawkins Dr</p>
|
||||
<p className="text-sm">Iowa City, IA 52242</p>
|
||||
</section>
|
||||
<section>
|
||||
<p className="text-sm text-neutral-400 italic">
|
||||
Site Designed and Built by <a target="_blank" href="https://brandonegger.com" className="hover:underline">
|
||||
Brandon Egger
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/** Header and tabs */}
|
||||
<div className="flex flex-row text-neutral-200 mx-auto md:mx-0 sm:px-4 divide-x divide-neutral-500">
|
||||
<FooterLabeledSection title="Quick Links">
|
||||
<div className="flex flex-col pt-4 space-y-2">
|
||||
{links.map((quickLink, index) => {
|
||||
return (
|
||||
<QuickLink key={index} {...quickLink}/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</FooterLabeledSection>
|
||||
<FooterLabeledSection title="Contact">
|
||||
<div className="flex flex-col divide-y divide-neutral-500">
|
||||
{contacts.map((contactInfo, index) => {
|
||||
return (
|
||||
<ContactInfo key={index} {...contactInfo} />
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</FooterLabeledSection>
|
||||
</div>
|
||||
</div>
|
||||
{/** Main footer area */}
|
||||
<div className="mx-auto flex max-w-5xl flex-col-reverse justify-between p-4 md:flex-row">
|
||||
{/** Wendell Johnson Info */}
|
||||
<div className="mt-8 flex-col sm:mt-0">
|
||||
<Image
|
||||
alt="University of Iowa logo"
|
||||
width={128}
|
||||
height={64}
|
||||
src="/IOWA-gold-text.png"
|
||||
/>
|
||||
<div className="space-y-8 px-2 text-neutral-100">
|
||||
<section>
|
||||
<h1 className="text-md text-yellow-300">
|
||||
Communication Sciences and Disorders
|
||||
</h1>
|
||||
<h2 className="text-sm italic text-yellow-100">
|
||||
College of Liberal Arts and Sciences
|
||||
</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h3 className="text-sm italic">
|
||||
Wendell Johnson Speech and Hearing Center
|
||||
</h3>
|
||||
<p className="text-sm">250 Hawkins Dr</p>
|
||||
<p className="text-sm">Iowa City, IA 52242</p>
|
||||
</section>
|
||||
<section>
|
||||
<p className="text-sm italic text-neutral-400">
|
||||
Site Designed and Built by{" "}
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://brandonegger.com"
|
||||
className="hover:underline"
|
||||
>
|
||||
Brandon Egger
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{/** Header and tabs */}
|
||||
<div className="mx-auto flex flex-row divide-x divide-neutral-500 text-neutral-200 sm:px-4 md:mx-0">
|
||||
<FooterLabeledSection title="Quick Links">
|
||||
<div className="flex flex-col space-y-2 pt-4">
|
||||
{links.map((quickLink, index) => {
|
||||
return <QuickLink key={index} {...quickLink} />;
|
||||
})}
|
||||
</div>
|
||||
</FooterLabeledSection>
|
||||
<FooterLabeledSection title="Contact">
|
||||
<div className="flex flex-col divide-y divide-neutral-500">
|
||||
{contacts.map((contactInfo, index) => {
|
||||
return <ContactInfo key={index} {...contactInfo} />;
|
||||
})}
|
||||
</div>
|
||||
</FooterLabeledSection>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
||||
@ -1,101 +1,141 @@
|
||||
import { type NextPage } from "next";
|
||||
import Image from 'next/image';
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { ChevronDownIcon } from '@heroicons/react/24/outline';
|
||||
import { ChevronDownIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
interface DropdownOption {
|
||||
label: string;
|
||||
href: string;
|
||||
label: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
interface NavBarLinkProps {
|
||||
href: string;
|
||||
label: string;
|
||||
dropdown?: DropdownOption[];
|
||||
href: string;
|
||||
label: string;
|
||||
dropdown?: DropdownOption[];
|
||||
}
|
||||
|
||||
const NavBarLink = ({href, label, dropdown}: NavBarLinkProps) => {
|
||||
const DropDown = ({dropdownOptions}: {dropdownOptions: DropdownOption[]}) => {
|
||||
const options = dropdownOptions.map((dropdownOption, index) => {
|
||||
return (
|
||||
<Link key={index} href={dropdownOption.href}>
|
||||
<span className="block w-full px-4 py-2 bg-gradient-to-t hover:from-neutral-500 from-neutral-900 hover:to-neutral-500 to-neutral-700 text-white">{dropdownOption.label}</span>
|
||||
</Link>
|
||||
)
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="right-0 rounded-b border-l-2 border-r-2 border-b-2 border-neutral-900 absolute w-full left-0 hidden group-hover:flex flex-col top-full">
|
||||
{options}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const NavBarLink = ({ href, label, dropdown }: NavBarLinkProps) => {
|
||||
const DropDown = ({
|
||||
dropdownOptions,
|
||||
}: {
|
||||
dropdownOptions: DropdownOption[];
|
||||
}) => {
|
||||
const options = dropdownOptions.map((dropdownOption, index) => {
|
||||
return (
|
||||
<Link key={index} href={dropdownOption.href}>
|
||||
<span className="block w-full bg-gradient-to-t from-neutral-900 to-neutral-700 px-4 py-2 text-white hover:from-neutral-500 hover:to-neutral-500">
|
||||
{dropdownOption.label}
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<li className="group relative">
|
||||
<Link href={href} className={"h-14 block border-neutral-800 box-border" + (dropdown ? "" : " hover:border-b-2")}>
|
||||
<div className="h-full flex flex-row space-x-[4px]">
|
||||
<div className="inline-block my-auto">
|
||||
<span className="inline-block font-bold text-lg py-2 align-text-middle">{label}</span>
|
||||
</div>
|
||||
{dropdown ? <ChevronDownIcon className="w-4"/> : <></>}
|
||||
</div>
|
||||
</Link>
|
||||
{dropdown && dropdown.length > 0 ? <DropDown dropdownOptions={dropdown} /> : <></>}
|
||||
</li>
|
||||
<div className="absolute right-0 left-0 top-full hidden w-full flex-col rounded-b border-l-2 border-r-2 border-b-2 border-neutral-900 group-hover:flex">
|
||||
{options}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const NavBar = () => {
|
||||
const resourcesDropDown: DropdownOption[] = [
|
||||
{
|
||||
label: "search",
|
||||
href: "/resources/search",
|
||||
},
|
||||
{
|
||||
label: "view all",
|
||||
href: "/resources"
|
||||
return (
|
||||
<li className="group relative">
|
||||
<Link
|
||||
href={href}
|
||||
className={
|
||||
"box-border block h-14 border-neutral-800" +
|
||||
(dropdown ? "" : " hover:border-b-2")
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<nav className="sticky top-0 z-50 border-b border-neutral-400 bg-gradient-to-b from-amber-300 to-amber-300 w-full shadow-black drop-shadow-md">
|
||||
<li className="mx-auto max-w-5xl flex flex-row sm:justify-between px-4">
|
||||
<ul id="left-nav-links" className="flex flex-row space-x-10">
|
||||
<NavBarLink href='/' label='Home'/>
|
||||
<NavBarLink dropdown={resourcesDropDown} href='/resources' label='Resources'/>
|
||||
<NavBarLink href='/about' label='About'/>
|
||||
</ul>
|
||||
|
||||
<ul id="right-nav-links" className="hidden sm:flex flex-row space-x-10">
|
||||
<li className="group relative">
|
||||
<a target="_blank" href='https://forms.gle/FD2abgwBuTaipysZ6' className="h-14 block border-neutral-800 box-border hover:border-b-2">
|
||||
<div className="h-full flex flex-row space-x-[4px]">
|
||||
<div className="inline-block my-auto">
|
||||
<span className="inline-block font-bold text-lg py-2 align-text-middle">Provide Feedback</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<NavBarLink href='/contact' label='Contact Us'/>
|
||||
</ul>
|
||||
</li>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
const Header: NextPage = () => {
|
||||
return <>
|
||||
<div id="logo-row" className="flex flex-row p-4 justify-center border-b border-yellow bg-neutral-800 drop-shadow-xl">
|
||||
<div className="shadow-md shadow-yellow-500/50 bg-yellow-100 rounded-xl p-2">
|
||||
<Image alt="Ear listening" src="/listening-ear.svg" width={64} height={64}/>
|
||||
</div>
|
||||
<div id="header-title" className="w-64 grid place-items-center">
|
||||
<h1 className="text-center text-2xl font-bold text-neutral-200">Center for Auditory Training Resources</h1>
|
||||
</div>
|
||||
>
|
||||
<div className="flex h-full flex-row space-x-[4px]">
|
||||
<div className="my-auto inline-block">
|
||||
<span className="align-text-middle inline-block py-2 text-lg font-bold">
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
{dropdown ? <ChevronDownIcon className="w-4" /> : <></>}
|
||||
</div>
|
||||
<NavBar/>
|
||||
</>
|
||||
</Link>
|
||||
{dropdown && dropdown.length > 0 ? (
|
||||
<DropDown dropdownOptions={dropdown} />
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
const NavBar = () => {
|
||||
const resourcesDropDown: DropdownOption[] = [
|
||||
{
|
||||
label: "search",
|
||||
href: "/resources/search",
|
||||
},
|
||||
{
|
||||
label: "view all",
|
||||
href: "/resources",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<nav className="sticky top-0 z-50 w-full border-b border-neutral-400 bg-gradient-to-b from-amber-300 to-amber-300 shadow-black drop-shadow-md">
|
||||
<li className="mx-auto flex max-w-5xl flex-row px-4 sm:justify-between">
|
||||
<ul id="left-nav-links" className="flex flex-row space-x-10">
|
||||
<NavBarLink href="/" label="Home" />
|
||||
<NavBarLink
|
||||
dropdown={resourcesDropDown}
|
||||
href="/resources"
|
||||
label="Resources"
|
||||
/>
|
||||
<NavBarLink href="/about" label="About" />
|
||||
</ul>
|
||||
|
||||
<ul id="right-nav-links" className="hidden flex-row space-x-10 sm:flex">
|
||||
<li className="group relative">
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://forms.gle/FD2abgwBuTaipysZ6"
|
||||
className="box-border block h-14 border-neutral-800 hover:border-b-2"
|
||||
>
|
||||
<div className="flex h-full flex-row space-x-[4px]">
|
||||
<div className="my-auto inline-block">
|
||||
<span className="align-text-middle inline-block py-2 text-lg font-bold">
|
||||
Provide Feedback
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<NavBarLink href="/contact" label="Contact Us" />
|
||||
</ul>
|
||||
</li>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
const Header: NextPage = () => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="logo-row"
|
||||
className="border-yellow flex flex-row justify-center border-b bg-neutral-800 p-4 drop-shadow-xl"
|
||||
>
|
||||
<div className="rounded-xl bg-yellow-100 p-2 shadow-md shadow-yellow-500/50">
|
||||
<Image
|
||||
alt="Ear listening"
|
||||
src="/listening-ear.svg"
|
||||
width={64}
|
||||
height={64}
|
||||
/>
|
||||
</div>
|
||||
<div id="header-title" className="grid w-64 place-items-center">
|
||||
<h1 className="text-center text-2xl font-bold text-neutral-200">
|
||||
Center for Auditory Training Resources
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<NavBar />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
||||
@ -1,297 +1,386 @@
|
||||
import { type PlatformLink, type PaymentType, type AuditoryResource, type Skill, type SkillLevel, type Manufacturer } from '@prisma/client';
|
||||
import { CurrencyDollarIcon, ArrowPathRoundedSquareIcon } from '@heroicons/react/24/solid';
|
||||
import { ClipboardDocumentListIcon } from '@heroicons/react/24/outline';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { translateEnumPlatform, translateEnumSkill } from '~/utils/enumWordLut';
|
||||
import { type ChangeEvent } from 'react';
|
||||
import { ChevronDownIcon } from '@heroicons/react/24/outline';
|
||||
import { type ParsedUrlQuery, type ParsedUrlQueryInput } from 'querystring';
|
||||
import { useRouter } from 'next/router';
|
||||
import {
|
||||
type PlatformLink,
|
||||
type PaymentType,
|
||||
type AuditoryResource,
|
||||
type Skill,
|
||||
type SkillLevel,
|
||||
type Manufacturer,
|
||||
} from "@prisma/client";
|
||||
import {
|
||||
CurrencyDollarIcon,
|
||||
ArrowPathRoundedSquareIcon,
|
||||
} from "@heroicons/react/24/solid";
|
||||
import { ClipboardDocumentListIcon } from "@heroicons/react/24/outline";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { translateEnumPlatform, translateEnumSkill } from "~/utils/enumWordLut";
|
||||
import { type ChangeEvent } from "react";
|
||||
import { ChevronDownIcon } from "@heroicons/react/24/outline";
|
||||
import { type ParsedUrlQuery, type ParsedUrlQueryInput } from "querystring";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
export const ResourceInfo = ({resource, showMoreInfo}: {resource: AuditoryResource, showMoreInfo?: boolean}) => {
|
||||
const PriceIcons = ({type}: {type: PaymentType}) => {
|
||||
switch(type) {
|
||||
case "FREE": {
|
||||
return (
|
||||
<div className="pt-2 space-x-1" title="Free">
|
||||
<span className="bg-amber-100 italic rounded-lg border border-neutral-900 text-black px-2 py-[1px]">
|
||||
free
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
case "SUBSCRIPTION_MONTHLY": {
|
||||
<div className="space-x-1" title="Monthly recurring subscription">
|
||||
<ArrowPathRoundedSquareIcon className="inline h-6 w-6" />
|
||||
<CurrencyDollarIcon className="inline h-6 w-6 text-lime-800"/>
|
||||
</div>
|
||||
}
|
||||
case "SUBSCRIPTION_WEEKLY": {
|
||||
return (
|
||||
<div className="space-x-1" title="Weekly recurring subscription">
|
||||
<ArrowPathRoundedSquareIcon className="inline h-6 w-6" />
|
||||
<CurrencyDollarIcon className="inline h-6 w-6 text-lime-800"/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const PlatformInfo = ({platformLinks}: {platformLinks: PlatformLink[]}) => {
|
||||
const platformsStr = platformLinks.map((platformLink) => {
|
||||
return translateEnumPlatform(platformLink.platform);
|
||||
}).join(', ');
|
||||
|
||||
export const ResourceInfo = ({
|
||||
resource,
|
||||
showMoreInfo,
|
||||
}: {
|
||||
resource: AuditoryResource;
|
||||
showMoreInfo?: boolean;
|
||||
}) => {
|
||||
const PriceIcons = ({ type }: { type: PaymentType }) => {
|
||||
switch (type) {
|
||||
case "FREE": {
|
||||
return (
|
||||
<p>{platformsStr}</p>
|
||||
)
|
||||
<div className="space-x-1 pt-2" title="Free">
|
||||
<span className="rounded-lg border border-neutral-900 bg-amber-100 px-2 py-[1px] italic text-black">
|
||||
free
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
case "SUBSCRIPTION_MONTHLY": {
|
||||
<div className="space-x-1" title="Monthly recurring subscription">
|
||||
<ArrowPathRoundedSquareIcon className="inline h-6 w-6" />
|
||||
<CurrencyDollarIcon className="inline h-6 w-6 text-lime-800" />
|
||||
</div>;
|
||||
}
|
||||
case "SUBSCRIPTION_WEEKLY": {
|
||||
return (
|
||||
<div className="space-x-1" title="Weekly recurring subscription">
|
||||
<ArrowPathRoundedSquareIcon className="inline h-6 w-6" />
|
||||
<CurrencyDollarIcon className="inline h-6 w-6 text-lime-800" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 space-x-4 flex flex-row">
|
||||
<div className="h-full my-auto">
|
||||
{showMoreInfo ?
|
||||
<Link href={`resources/${resource.id}`}>
|
||||
<div className="w-20 sm:w-28 flex space-y-2 flex-col justify-center">
|
||||
<Image className="bg-white w-full rounded-xl drop-shadow-lg border border-neutral-400" src={`/resource_logos/${resource.icon}`} alt={`${resource.name} logo`} width={512} height={512}/>
|
||||
<span
|
||||
className="block bg-neutral-900 hover:bg-neutral-500 border border-neutral-900 text-center py-[1px] text-white rounded-lg">
|
||||
more info
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
:
|
||||
<div className="w-20 sm:w-28 flex space-y-2 flex-col justify-center">
|
||||
<Image className="bg-white w-full rounded-xl drop-shadow-lg border border-neutral-400" src={`/resource_logos/${resource.icon}`} alt={`${resource.name} logo`} width={512} height={512}/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div className="grid place-items-center">
|
||||
<div className="">
|
||||
<h2 className="text-xs italic text-gray-600">{resource.manufacturer?.name}</h2>
|
||||
<h1 className="font-bold text-xl">{resource.name}</h1>
|
||||
<PlatformInfo platformLinks={resource.platform_links}/>
|
||||
<PriceIcons type={resource?.payment_options[0] ?? 'FREE'} />
|
||||
</div>
|
||||
};
|
||||
|
||||
const PlatformInfo = ({
|
||||
platformLinks,
|
||||
}: {
|
||||
platformLinks: PlatformLink[];
|
||||
}) => {
|
||||
const platformsStr = platformLinks
|
||||
.map((platformLink) => {
|
||||
return translateEnumPlatform(platformLink.platform);
|
||||
})
|
||||
.join(", ");
|
||||
|
||||
return <p>{platformsStr}</p>;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-row space-x-4 p-4">
|
||||
<div className="my-auto h-full">
|
||||
{showMoreInfo ? (
|
||||
<Link href={`resources/${resource.id}`}>
|
||||
<div className="flex w-20 flex-col justify-center space-y-2 sm:w-28">
|
||||
<Image
|
||||
className="w-full rounded-xl border border-neutral-400 bg-white drop-shadow-lg"
|
||||
src={`/resource_logos/${resource.icon}`}
|
||||
alt={`${resource.name} logo`}
|
||||
width={512}
|
||||
height={512}
|
||||
/>
|
||||
<span className="block rounded-lg border border-neutral-900 bg-neutral-900 py-[1px] text-center text-white hover:bg-neutral-500">
|
||||
more info
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
) : (
|
||||
<div className="flex w-20 flex-col justify-center space-y-2 sm:w-28">
|
||||
<Image
|
||||
className="w-full rounded-xl border border-neutral-400 bg-white drop-shadow-lg"
|
||||
src={`/resource_logos/${resource.icon}`}
|
||||
alt={`${resource.name} logo`}
|
||||
width={512}
|
||||
height={512}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid place-items-center">
|
||||
<div className="">
|
||||
<h2 className="text-xs italic text-gray-600">
|
||||
{resource.manufacturer?.name}
|
||||
</h2>
|
||||
<h1 className="text-xl font-bold">{resource.name}</h1>
|
||||
<PlatformInfo platformLinks={resource.platform_links} />
|
||||
<PriceIcons type={resource?.payment_options[0] ?? "FREE"} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const ResourceDescription = ({manufacturer, description}: {manufacturer: null | Manufacturer, description: string}) => {
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
{ manufacturer?.required ?
|
||||
<div className="bg-neutral-600 border-t-[4px] border-neutral-700 p-2">
|
||||
<h3 className="text-sm font-bold text-neutral-100">IMPORTANT</h3>
|
||||
<p className="text-sm text-neutral-300">
|
||||
This resource requires the patient to have a {manufacturer.name} device
|
||||
</p>
|
||||
</div>
|
||||
: undefined}
|
||||
<div className="p-2">
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
export const ResourceDescription = ({
|
||||
manufacturer,
|
||||
description,
|
||||
}: {
|
||||
manufacturer: null | Manufacturer;
|
||||
description: string;
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{manufacturer?.required ? (
|
||||
<div className="border-t-[4px] border-neutral-700 bg-neutral-600 p-2">
|
||||
<h3 className="text-sm font-bold text-neutral-100">IMPORTANT</h3>
|
||||
<p className="text-sm text-neutral-300">
|
||||
This resource requires the patient to have a {manufacturer.name}{" "}
|
||||
device
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
) : undefined}
|
||||
<div className="p-2">
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ResourceEntry = ({resource}: {resource: AuditoryResource}) => {
|
||||
const ResourceSkills = ({skills, skillLevels}: {skills: Skill[], skillLevels: SkillLevel[]}) => {
|
||||
const SkillRanking = ({skillLevels}: {skillLevels: SkillLevel[]}) => {
|
||||
return (
|
||||
<div className='flex flex-row space-x-2 overflow-x-auto'>
|
||||
{skillLevels.includes('BEGINNER') ?
|
||||
<div className="rounded-lg px-[3px] border-green-600 border-2 bg-green-300">
|
||||
<h2 className="text-neutral-900 italic text-sm text-right">Beginner</h2>
|
||||
</div> : undefined
|
||||
}
|
||||
{skillLevels.includes('INTERMEDIATE') ?
|
||||
<div className="rounded-lg px-[3px] border-orange-600 border-2 bg-orange-300">
|
||||
<h2 className="text-neutral-900 text-sm italic text-right">Intermediate</h2>
|
||||
</div> : undefined
|
||||
}
|
||||
{skillLevels.includes('ADVANCED') ?
|
||||
<div className="rounded-lg px-[3px] border-red-600 border-2 bg-red-300">
|
||||
<h2 className="text-neutral-900 text-sm italic text-right">Advanced</h2>
|
||||
</div> : undefined
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Skill = ({label}: {label:string}) => {
|
||||
return (
|
||||
<li className="space-x-2 flex flex-row px-2 py-[1px]">
|
||||
<ClipboardDocumentListIcon className="w-4" />
|
||||
<div className="inline">
|
||||
<h3>{label}</h3>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
const skillsComponents = skills.map((skill, index) => {
|
||||
return <Skill key={index} label={translateEnumSkill(skill)}/>
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="m-2 flex space-y-4 flex-col">
|
||||
{ skillsComponents.length > 0 ?
|
||||
<div className='rounded-lg bg-gray-100 drop-shadow border border-neutral-900'>
|
||||
<ul className="divide-y-2">
|
||||
{skillsComponents}
|
||||
</ul>
|
||||
</div> : <></>
|
||||
}
|
||||
<SkillRanking skillLevels={skillLevels} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<tr className="divide-x-[1px] divide-slate-400">
|
||||
<td className="max-w-xs">
|
||||
<ResourceInfo showMoreInfo resource={resource} />
|
||||
</td>
|
||||
<td className="w-1/4 align-top">
|
||||
<ResourceSkills skills={resource.skills} skillLevels={resource.skill_levels} />
|
||||
</td>
|
||||
<td className="align-top hidden md:table-cell">
|
||||
<ResourceDescription manufacturer={resource.manufacturer} description={resource.description} />
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
|
||||
interface PagesNavigationProps {
|
||||
query?: ParsedUrlQuery;
|
||||
currentPage: number;
|
||||
pageCount: number;
|
||||
resultsPerPage: number;
|
||||
}
|
||||
|
||||
const PagesNavigation = ({query, currentPage, pageCount, resultsPerPage}: PagesNavigationProps) => {
|
||||
const router = useRouter();
|
||||
const PageButton = ({number}: {number: number}) => {
|
||||
const redirectQueryData: ParsedUrlQueryInput = {...query};
|
||||
redirectQueryData.page = number;
|
||||
|
||||
return (
|
||||
<li>
|
||||
<Link className={"block py px-[9px] m-1 rounded " + (currentPage !== number ? "hover:bg-neutral-400 hover:text-white" : "bg-neutral-800 text-white")}
|
||||
href={{ pathname: `/resources`, query: {...redirectQueryData} }}>
|
||||
<span className={"text-lg text-center"}>{number}</span>
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
const pages = Array.from(Array(pageCount).keys()).map((pageNumber) => {
|
||||
const ResourceEntry = ({ resource }: { resource: AuditoryResource }) => {
|
||||
const ResourceSkills = ({
|
||||
skills,
|
||||
skillLevels,
|
||||
}: {
|
||||
skills: Skill[];
|
||||
skillLevels: SkillLevel[];
|
||||
}) => {
|
||||
const SkillRanking = ({ skillLevels }: { skillLevels: SkillLevel[] }) => {
|
||||
return (
|
||||
<PageButton key={pageNumber} number={pageNumber+1} />
|
||||
)
|
||||
<div className="flex flex-row space-x-2 overflow-x-auto">
|
||||
{skillLevels.includes("BEGINNER") ? (
|
||||
<div className="rounded-lg border-2 border-green-600 bg-green-300 px-[3px]">
|
||||
<h2 className="text-right text-sm italic text-neutral-900">
|
||||
Beginner
|
||||
</h2>
|
||||
</div>
|
||||
) : undefined}
|
||||
{skillLevels.includes("INTERMEDIATE") ? (
|
||||
<div className="rounded-lg border-2 border-orange-600 bg-orange-300 px-[3px]">
|
||||
<h2 className="text-right text-sm italic text-neutral-900">
|
||||
Intermediate
|
||||
</h2>
|
||||
</div>
|
||||
) : undefined}
|
||||
{skillLevels.includes("ADVANCED") ? (
|
||||
<div className="rounded-lg border-2 border-red-600 bg-red-300 px-[3px]">
|
||||
<h2 className="text-right text-sm italic text-neutral-900">
|
||||
Advanced
|
||||
</h2>
|
||||
</div>
|
||||
) : undefined}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Skill = ({ label }: { label: string }) => {
|
||||
return (
|
||||
<li className="flex flex-row space-x-2 px-2 py-[1px]">
|
||||
<ClipboardDocumentListIcon className="w-4" />
|
||||
<div className="inline">
|
||||
<h3>{label}</h3>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
const skillsComponents = skills.map((skill, index) => {
|
||||
return <Skill key={index} label={translateEnumSkill(skill)} />;
|
||||
});
|
||||
|
||||
const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
|
||||
if (!query) {
|
||||
router.push({
|
||||
pathname: '/resources',
|
||||
query: {
|
||||
perPage: event.target.value,
|
||||
}
|
||||
}).catch((reason) => {
|
||||
console.error(reason);
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
query['perPage'] = event.target.value;
|
||||
router.push({
|
||||
pathname: '/resources',
|
||||
query: {
|
||||
...query,
|
||||
}
|
||||
}).catch((reason) => {
|
||||
console.error(reason);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-row justify-between pl-2 pr-4 py-2 bg-amber-100">
|
||||
<div className="flex flex-row w-64 space-x-2">
|
||||
<div className="relative inline-flex">
|
||||
<select
|
||||
className="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
|
||||
value={resultsPerPage}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value={5}>5</option>
|
||||
<option value={10}>10</option>
|
||||
<option value={20}>20</option>
|
||||
</select>
|
||||
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
|
||||
<ChevronDownIcon className="h-4 w-4"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="m-auto">
|
||||
<h1 className="text-md"> Results Per Page</h1>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="max-w-[10rem] sm:max-w-none overflow-x-auto my-auto flex flex-row bg-white rounded border-gray-400 hover:border-gray-500 border shadow">
|
||||
{pages}
|
||||
</ul>
|
||||
<div className="m-2 flex flex-col space-y-4">
|
||||
{skillsComponents.length > 0 ? (
|
||||
<div className="rounded-lg border border-neutral-900 bg-gray-100 drop-shadow">
|
||||
<ul className="divide-y-2">{skillsComponents}</ul>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<SkillRanking skillLevels={skillLevels} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const ResourceTable = ({resources, resourcesPerPage, currentPage, totalPages, query}: {
|
||||
resources: AuditoryResource[],
|
||||
resourcesPerPage: number,
|
||||
currentPage: number,
|
||||
totalPages: number,
|
||||
query: ParsedUrlQuery
|
||||
return (
|
||||
<tr className="divide-x-[1px] divide-slate-400">
|
||||
<td className="max-w-xs">
|
||||
<ResourceInfo showMoreInfo resource={resource} />
|
||||
</td>
|
||||
<td className="w-1/4 align-top">
|
||||
<ResourceSkills
|
||||
skills={resource.skills}
|
||||
skillLevels={resource.skill_levels}
|
||||
/>
|
||||
</td>
|
||||
<td className="hidden align-top md:table-cell">
|
||||
<ResourceDescription
|
||||
manufacturer={resource.manufacturer}
|
||||
description={resource.description}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
interface PagesNavigationProps {
|
||||
query?: ParsedUrlQuery;
|
||||
currentPage: number;
|
||||
pageCount: number;
|
||||
resultsPerPage: number;
|
||||
}
|
||||
|
||||
const PagesNavigation = ({
|
||||
query,
|
||||
currentPage,
|
||||
pageCount,
|
||||
resultsPerPage,
|
||||
}: PagesNavigationProps) => {
|
||||
const router = useRouter();
|
||||
const PageButton = ({ number }: { number: number }) => {
|
||||
const redirectQueryData: ParsedUrlQueryInput = { ...query };
|
||||
redirectQueryData.page = number;
|
||||
|
||||
return (
|
||||
<li>
|
||||
<Link
|
||||
className={
|
||||
"py m-1 block rounded px-[9px] " +
|
||||
(currentPage !== number
|
||||
? "hover:bg-neutral-400 hover:text-white"
|
||||
: "bg-neutral-800 text-white")
|
||||
}
|
||||
href={{ pathname: `/resources`, query: { ...redirectQueryData } }}
|
||||
>
|
||||
<span className={"text-center text-lg"}>{number}</span>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
const pages = Array.from(Array(pageCount).keys()).map((pageNumber) => {
|
||||
return <PageButton key={pageNumber} number={pageNumber + 1} />;
|
||||
});
|
||||
|
||||
const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
|
||||
if (!query) {
|
||||
router
|
||||
.push({
|
||||
pathname: "/resources",
|
||||
query: {
|
||||
perPage: event.target.value,
|
||||
},
|
||||
})
|
||||
.catch((reason) => {
|
||||
console.error(reason);
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
query["perPage"] = event.target.value;
|
||||
router
|
||||
.push({
|
||||
pathname: "/resources",
|
||||
query: {
|
||||
...query,
|
||||
},
|
||||
})
|
||||
.catch((reason) => {
|
||||
console.error(reason);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-row justify-between bg-amber-100 py-2 pl-2 pr-4">
|
||||
<div className="flex w-64 flex-row space-x-2">
|
||||
<div className="relative inline-flex">
|
||||
<select
|
||||
className="focus:shadow-outline block w-full appearance-none rounded border border-gray-400 bg-white px-4 py-2 pr-8 leading-tight shadow hover:border-gray-500 focus:outline-none"
|
||||
value={resultsPerPage}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value={5}>5</option>
|
||||
<option value={10}>10</option>
|
||||
<option value={20}>20</option>
|
||||
</select>
|
||||
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
|
||||
<ChevronDownIcon className="h-4 w-4" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="m-auto">
|
||||
<h1 className="text-md"> Results Per Page</h1>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="my-auto flex max-w-[10rem] flex-row overflow-x-auto rounded border border-gray-400 bg-white shadow hover:border-gray-500 sm:max-w-none">
|
||||
{pages}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ResourceTable = ({
|
||||
resources,
|
||||
resourcesPerPage,
|
||||
currentPage,
|
||||
totalPages,
|
||||
query,
|
||||
}: {
|
||||
resources: AuditoryResource[];
|
||||
resourcesPerPage: number;
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
query: ParsedUrlQuery;
|
||||
}) => {
|
||||
const resourceElements = resources.map((resource, index) => {
|
||||
return (<ResourceEntry key={index} resource={resource} />);
|
||||
const resourceElements =
|
||||
resources.map((resource, index) => {
|
||||
return <ResourceEntry key={index} resource={resource} />;
|
||||
}) ?? [];
|
||||
|
||||
return(
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="mx-auto rounded-xl overflow-hidden border border-neutral-400 drop-shadow-md overflow-hidden">
|
||||
<PagesNavigation query={query} resultsPerPage={resourcesPerPage} currentPage={currentPage} pageCount={totalPages} />
|
||||
<table className="w-full table-fixed bg-neutral-200 border-b border-neutral-400">
|
||||
<thead className="bg-gradient-to-t from-neutral-900 to-neutral-700 drop-shadow-md">
|
||||
<tr>
|
||||
<th className="w-1/3 max-w-xs">
|
||||
<span className="text-gray-300 block px-4 py-2 text-left">
|
||||
Resource
|
||||
</span>
|
||||
</th>
|
||||
<th className="w-1/4 max-w-xs">
|
||||
<span className="text-gray-300 block px-4 py-2 text-left">
|
||||
Skills
|
||||
</span>
|
||||
</th>
|
||||
<th className="hidden md:table-cell">
|
||||
<span className="text-gray-300 block px-4 py-2 text-left">
|
||||
Description
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y-[1px] divide-slate-400 overflow-y-scroll">
|
||||
{resourceElements}
|
||||
</tbody>
|
||||
</table>
|
||||
{(resources && resources.length > 4) ?
|
||||
<PagesNavigation query={query} resultsPerPage={resourcesPerPage} currentPage={currentPage} pageCount={totalPages} />
|
||||
: undefined}
|
||||
</div>
|
||||
<div className="mx-auto overflow-hidden overflow-hidden rounded-xl border border-neutral-400 drop-shadow-md">
|
||||
<PagesNavigation
|
||||
query={query}
|
||||
resultsPerPage={resourcesPerPage}
|
||||
currentPage={currentPage}
|
||||
pageCount={totalPages}
|
||||
/>
|
||||
<table className="w-full table-fixed border-b border-neutral-400 bg-neutral-200">
|
||||
<thead className="bg-gradient-to-t from-neutral-900 to-neutral-700 drop-shadow-md">
|
||||
<tr>
|
||||
<th className="w-1/3 max-w-xs">
|
||||
<span className="block px-4 py-2 text-left text-gray-300">
|
||||
Resource
|
||||
</span>
|
||||
</th>
|
||||
<th className="w-1/4 max-w-xs">
|
||||
<span className="block px-4 py-2 text-left text-gray-300">
|
||||
Skills
|
||||
</span>
|
||||
</th>
|
||||
<th className="hidden md:table-cell">
|
||||
<span className="block px-4 py-2 text-left text-gray-300">
|
||||
Description
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y-[1px] divide-slate-400 overflow-y-scroll">
|
||||
{resourceElements}
|
||||
</tbody>
|
||||
</table>
|
||||
{resources && resources.length > 4 ? (
|
||||
<PagesNavigation
|
||||
query={query}
|
||||
resultsPerPage={resourcesPerPage}
|
||||
currentPage={currentPage}
|
||||
pageCount={totalPages}
|
||||
/>
|
||||
) : undefined}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
export default ResourceTable;
|
||||
|
||||
@ -1,274 +1,383 @@
|
||||
import { type PaymentType, type Platform, type Skill, type SkillLevel } from "@prisma/client"
|
||||
import {
|
||||
type PaymentType,
|
||||
type Platform,
|
||||
type Skill,
|
||||
type SkillLevel,
|
||||
} from "@prisma/client";
|
||||
import { type Dispatch, type SetStateAction, useState, useEffect } from "react";
|
||||
|
||||
export type QuestionTypes = Platform | Skill | SkillLevel | PaymentType | string;
|
||||
export type QuestionTypes =
|
||||
| Platform
|
||||
| Skill
|
||||
| SkillLevel
|
||||
| PaymentType
|
||||
| string;
|
||||
|
||||
export interface Option<T> {
|
||||
label: string,
|
||||
value: T,
|
||||
label: string;
|
||||
value: T;
|
||||
}
|
||||
|
||||
export interface Question<T> {
|
||||
for: string,
|
||||
header: string,
|
||||
question: string,
|
||||
maxSelect?: number,
|
||||
optional: true,
|
||||
options: Option<T>[]
|
||||
for: string;
|
||||
header: string;
|
||||
question: string;
|
||||
maxSelect?: number;
|
||||
optional: true;
|
||||
options: Option<T>[];
|
||||
}
|
||||
|
||||
const GreetingPage = ({updatePage}: {
|
||||
updatePage: (pageNumber: number) => void,
|
||||
const GreetingPage = ({
|
||||
updatePage,
|
||||
}: {
|
||||
updatePage: (pageNumber: number) => void;
|
||||
}) => {
|
||||
const getStartedClick = () => {
|
||||
updatePage(1);
|
||||
}
|
||||
const getStartedClick = () => {
|
||||
updatePage(1);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col text-center">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className="flex flex-col text-center">
|
||||
<h1 className="mb-8 max-w-sm text-center text-xl font-extrabold">
|
||||
Welcome to the auditory training resource search tool!
|
||||
</h1>
|
||||
<p className="mx-auto max-w-sm text-center italic text-neutral-500">
|
||||
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 mx-auto mt-8 rounded-md border border-neutral-900 bg-yellow-100 py-2 px-4 shadow-lg duration-200 ease-out hover:bg-yellow-300 hover:shadow-md"
|
||||
>
|
||||
Get Started!
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Single question component for a guided search
|
||||
*/
|
||||
const QuestionPage = ({isLastPage, page, question, updatePage, formData, updateFormData, dontCareData, setDontCareData}: {
|
||||
isLastPage: boolean,
|
||||
page: number,
|
||||
question: Question<QuestionTypes>,
|
||||
updatePage: (pageNumber: number) => void,
|
||||
formData: Record<string, QuestionTypes[]>,
|
||||
updateFormData: Dispatch<SetStateAction<Record<string, QuestionTypes[]>>>,
|
||||
dontCareData: Record<string, boolean>,
|
||||
setDontCareData: Dispatch<SetStateAction<Record<string, boolean>>>,
|
||||
|
||||
const QuestionPage = ({
|
||||
isLastPage,
|
||||
page,
|
||||
question,
|
||||
updatePage,
|
||||
formData,
|
||||
updateFormData,
|
||||
dontCareData,
|
||||
setDontCareData,
|
||||
}: {
|
||||
isLastPage: boolean;
|
||||
page: number;
|
||||
question: Question<QuestionTypes>;
|
||||
updatePage: (pageNumber: number) => void;
|
||||
formData: Record<string, QuestionTypes[]>;
|
||||
updateFormData: Dispatch<SetStateAction<Record<string, QuestionTypes[]>>>;
|
||||
dontCareData: Record<string, boolean>;
|
||||
setDontCareData: Dispatch<SetStateAction<Record<string, boolean>>>;
|
||||
}) => {
|
||||
const dontCare = dontCareData[question.for] ?? false;
|
||||
const dontCare = dontCareData[question.for] ?? false;
|
||||
|
||||
const OptionToggle = ({option}: {option: Option<QuestionTypes>}) => {
|
||||
const selected = formData[question.for]?.includes(option.value) ?? false;
|
||||
|
||||
const handleToggle = () => {
|
||||
const newFormData = {
|
||||
...formData
|
||||
};
|
||||
const OptionToggle = ({ option }: { option: Option<QuestionTypes> }) => {
|
||||
const selected = formData[question.for]?.includes(option.value) ?? false;
|
||||
|
||||
if (!newFormData[question.for]) {
|
||||
newFormData[question.for] = [option.value];
|
||||
} else if (newFormData[question.for]?.includes(option.value)) {
|
||||
newFormData[question.for] = newFormData[question.for]?.filter(function(item) {
|
||||
return item !== option.value
|
||||
}) ?? [];
|
||||
} else {
|
||||
newFormData[question.for] = [...newFormData[question.for] ?? [], option.value];
|
||||
}
|
||||
const handleToggle = () => {
|
||||
const newFormData = {
|
||||
...formData,
|
||||
};
|
||||
|
||||
updateFormData(newFormData);
|
||||
}
|
||||
if (!newFormData[question.for]) {
|
||||
newFormData[question.for] = [option.value];
|
||||
} else if (newFormData[question.for]?.includes(option.value)) {
|
||||
newFormData[question.for] =
|
||||
newFormData[question.for]?.filter(function (item) {
|
||||
return item !== option.value;
|
||||
}) ?? [];
|
||||
} else {
|
||||
newFormData[question.for] = [
|
||||
...(newFormData[question.for] ?? []),
|
||||
option.value,
|
||||
];
|
||||
}
|
||||
|
||||
if (dontCare) {
|
||||
return (
|
||||
<button disabled type="button" onClick={handleToggle} className={"line-through mx-auto w-64 py-2 shadow rounded-lg border border-neutral-400 " + (selected ? "bg-amber-200" : "bg-white")}>
|
||||
{option.label}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<button type="button" onClick={handleToggle} className={"mx-auto w-64 py-2 shadow rounded-lg border border-neutral-400 " + (selected ? "bg-amber-200" : "bg-white")}>
|
||||
{option.label}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!formData[question.for]) {
|
||||
const newFormData = {...formData};
|
||||
newFormData[question.for] = [];
|
||||
|
||||
updateFormData(newFormData);
|
||||
}
|
||||
});
|
||||
|
||||
const dontCareToggle = () => {
|
||||
if (formData[question.for]) {
|
||||
const newFormData = {
|
||||
...formData
|
||||
};
|
||||
|
||||
newFormData[question.for] = [];
|
||||
updateFormData(newFormData);
|
||||
}
|
||||
|
||||
const newDontCareData = {
|
||||
...dontCareData
|
||||
}
|
||||
|
||||
newDontCareData[question.for] = !dontCare;
|
||||
setDontCareData(newDontCareData);
|
||||
}
|
||||
|
||||
const nextClick = () => {
|
||||
updatePage(page + 1);
|
||||
}
|
||||
|
||||
const backClick = () => {
|
||||
updatePage(page - 1);
|
||||
}
|
||||
|
||||
const AdvanceButtons = () => {
|
||||
return (
|
||||
<section className="">
|
||||
{!isLastPage ?
|
||||
<div className="space-x-4">
|
||||
<button onClick={backClick} className="inline 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 onClick={nextClick} className="inline 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">next</button>
|
||||
</div>
|
||||
:
|
||||
<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="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>
|
||||
)
|
||||
updateFormData(newFormData);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col justify-between text-center">
|
||||
<section className="mt-4">
|
||||
<h2 className="text-neutral-400 italic text-xl">{question.header}</h2>
|
||||
<h1 className="text-neutral-900 font-bold text-xl">{question.question}</h1>
|
||||
<h3 className="text-neutral-600 text-sm">Select all that apply from below</h3>
|
||||
</section>
|
||||
if (dontCare) {
|
||||
return (
|
||||
<button
|
||||
disabled
|
||||
type="button"
|
||||
onClick={handleToggle}
|
||||
className={
|
||||
"mx-auto w-64 rounded-lg border border-neutral-400 py-2 line-through shadow " +
|
||||
(selected ? "bg-amber-200" : "bg-white")
|
||||
}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
<section className="flex flex-col space-y-1 justify-center">
|
||||
{question.options.map((option, index) => {
|
||||
return (
|
||||
<OptionToggle key={index} option={option} />
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
{question.optional ?
|
||||
<button type="button" onClick={dontCareToggle} className={"mx-auto w-64 py-2 shadow rounded-lg border border-neutral-400 " + (dontCare ? "bg-amber-200" : "bg-white")}>
|
||||
No Preference
|
||||
</button>
|
||||
: undefined}
|
||||
<div className="mb-4">
|
||||
<AdvanceButtons />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleToggle}
|
||||
className={
|
||||
"mx-auto w-64 rounded-lg border border-neutral-400 py-2 shadow " +
|
||||
(selected ? "bg-amber-200" : "bg-white")
|
||||
}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!formData[question.for]) {
|
||||
const newFormData = { ...formData };
|
||||
newFormData[question.for] = [];
|
||||
|
||||
updateFormData(newFormData);
|
||||
}
|
||||
});
|
||||
|
||||
const dontCareToggle = () => {
|
||||
if (formData[question.for]) {
|
||||
const newFormData = {
|
||||
...formData,
|
||||
};
|
||||
|
||||
newFormData[question.for] = [];
|
||||
updateFormData(newFormData);
|
||||
}
|
||||
|
||||
const newDontCareData = {
|
||||
...dontCareData,
|
||||
};
|
||||
|
||||
newDontCareData[question.for] = !dontCare;
|
||||
setDontCareData(newDontCareData);
|
||||
};
|
||||
|
||||
const nextClick = () => {
|
||||
updatePage(page + 1);
|
||||
};
|
||||
|
||||
const backClick = () => {
|
||||
updatePage(page - 1);
|
||||
};
|
||||
|
||||
const AdvanceButtons = () => {
|
||||
return (
|
||||
<section className="">
|
||||
{!isLastPage ? (
|
||||
<div className="space-x-4">
|
||||
<button
|
||||
onClick={backClick}
|
||||
className="bottom-0 mx-auto mx-auto inline rounded-md border border-neutral-900 bg-yellow-100 py-2 px-4 shadow-lg duration-200 ease-out hover:bg-yellow-300 hover:shadow-md"
|
||||
>
|
||||
back
|
||||
</button>
|
||||
<button
|
||||
onClick={nextClick}
|
||||
className="bottom-0 mx-auto mx-auto inline rounded-md border border-neutral-900 bg-yellow-100 py-2 px-4 shadow-lg duration-200 ease-out hover:bg-yellow-300 hover:shadow-md"
|
||||
>
|
||||
next
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-4 flex flex-col space-y-2">
|
||||
<button
|
||||
onClick={backClick}
|
||||
className="bottom-0 mx-auto mx-auto rounded-md border border-neutral-900 bg-yellow-100 py-2 px-4 shadow-lg duration-200 ease-out hover:bg-yellow-300 hover:shadow-md"
|
||||
>
|
||||
back
|
||||
</button>
|
||||
<button
|
||||
form="search-form"
|
||||
type="submit"
|
||||
className="bottom-0 mx-auto mx-auto rounded-md border border-neutral-900 bg-yellow-100 py-2 px-4 shadow-lg duration-200 ease-out hover:bg-yellow-300 hover:shadow-md"
|
||||
>
|
||||
submit
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col justify-between text-center">
|
||||
<section className="mt-4">
|
||||
<h2 className="text-xl italic text-neutral-400">{question.header}</h2>
|
||||
<h1 className="text-xl font-bold text-neutral-900">
|
||||
{question.question}
|
||||
</h1>
|
||||
<h3 className="text-sm text-neutral-600">
|
||||
Select all that apply from below
|
||||
</h3>
|
||||
</section>
|
||||
|
||||
<section className="flex flex-col justify-center space-y-1">
|
||||
{question.options.map((option, index) => {
|
||||
return <OptionToggle key={index} option={option} />;
|
||||
})}
|
||||
</section>
|
||||
{question.optional ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={dontCareToggle}
|
||||
className={
|
||||
"mx-auto w-64 rounded-lg border border-neutral-400 py-2 shadow " +
|
||||
(dontCare ? "bg-amber-200" : "bg-white")
|
||||
}
|
||||
>
|
||||
No Preference
|
||||
</button>
|
||||
) : undefined}
|
||||
<div className="mb-4">
|
||||
<AdvanceButtons />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Wrapper for last and current page to enable the transition animation
|
||||
*/
|
||||
const PageTransition = ({backwards, lastPage, currentPage}: {
|
||||
backwards: boolean,
|
||||
lastPage: JSX.Element | null,
|
||||
currentPage: JSX.Element,
|
||||
const PageTransition = ({
|
||||
backwards,
|
||||
lastPage,
|
||||
currentPage,
|
||||
}: {
|
||||
backwards: boolean;
|
||||
lastPage: JSX.Element | null;
|
||||
currentPage: JSX.Element;
|
||||
}) => {
|
||||
return (
|
||||
<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>
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
"flex h-[500px] w-[200%] " +
|
||||
(backwards
|
||||
? "animate-slide_search_page_backwards flex-row"
|
||||
: "translate-x-[-50%] animate-slide_search_page flex-row-reverse")
|
||||
}
|
||||
>
|
||||
<div className="relative grid h-full w-1/2 place-items-center">
|
||||
{currentPage}
|
||||
</div>
|
||||
|
||||
{/** last page */}
|
||||
<div className="relative w-1/2 h-full grid place-items-center">
|
||||
{lastPage}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
{/** last page */}
|
||||
<div className="relative grid h-full w-1/2 place-items-center">
|
||||
{lastPage}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Main guided search component.
|
||||
* Page 0 = greeting page.
|
||||
*/
|
||||
const GuidedSearch = ({questions}: {
|
||||
questions: Question<QuestionTypes>[],
|
||||
const GuidedSearch = ({
|
||||
questions,
|
||||
}: {
|
||||
questions: Question<QuestionTypes>[];
|
||||
}) => {
|
||||
const [page, setPage] = useState<number>(0);
|
||||
const [formData, setFormData] = useState<(Record<string, QuestionTypes[]>)>({});
|
||||
const [dontCareData, setDoneCareData] = useState<(Record<string, boolean>)>({});
|
||||
const [previousPage, setPreviousPage] = useState<number | undefined>(undefined);
|
||||
const [page, setPage] = useState<number>(0);
|
||||
const [formData, setFormData] = useState<Record<string, QuestionTypes[]>>({});
|
||||
const [dontCareData, setDoneCareData] = useState<Record<string, boolean>>({});
|
||||
const [previousPage, setPreviousPage] = useState<number | undefined>(
|
||||
undefined
|
||||
);
|
||||
|
||||
const updatePage = (pageNumber: number) => {
|
||||
setPreviousPage(page);
|
||||
setPage(pageNumber);
|
||||
};
|
||||
const updatePage = (pageNumber: number) => {
|
||||
setPreviousPage(page);
|
||||
setPage(pageNumber);
|
||||
};
|
||||
|
||||
const SearchPage = ({pageNumber}: {
|
||||
pageNumber?: number,
|
||||
}) => {
|
||||
if (pageNumber === undefined) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (pageNumber === 0) {
|
||||
return (
|
||||
<GreetingPage updatePage={updatePage} />
|
||||
);
|
||||
}
|
||||
|
||||
const question = questions[pageNumber-1];
|
||||
if (!question) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isLastPage = pageNumber === questions.length
|
||||
|
||||
return (
|
||||
<QuestionPage dontCareData={dontCareData} setDontCareData={setDoneCareData} isLastPage={isLastPage} page={page} formData={formData} updateFormData={setFormData} updatePage={updatePage} question={question} />
|
||||
);
|
||||
const SearchPage = ({ pageNumber }: { pageNumber?: number }) => {
|
||||
if (pageNumber === undefined) {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the hidden html form selectors
|
||||
*/
|
||||
const HTMLQuestion = ({question}: {question: Question<QuestionTypes>}) => {
|
||||
return (
|
||||
<select className="hidden" name={question.for} multiple>
|
||||
{question.options.map((option, index) => {
|
||||
return (
|
||||
<option key={index} selected={formData[question.for]?.includes(option.value)} value={option.value.toString()}>
|
||||
{option.label}
|
||||
</option>
|
||||
);
|
||||
})
|
||||
}
|
||||
</select>
|
||||
);
|
||||
if (pageNumber === 0) {
|
||||
return <GreetingPage updatePage={updatePage} />;
|
||||
}
|
||||
|
||||
const lastPage = <SearchPage pageNumber={previousPage} />;
|
||||
const currentPage = <SearchPage pageNumber={page} />;
|
||||
const backwards = (previousPage ?? -1) >= page;
|
||||
const question = questions[pageNumber - 1];
|
||||
if (!question) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isLastPage = pageNumber === questions.length;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="px-4 py-2 bg-gradient-to-t from-neutral-900 to-neutral-700 mx-auto overflow-hidden">
|
||||
<h1 className="text-gray-300 font-bold">Search</h1>
|
||||
</div>
|
||||
<QuestionPage
|
||||
dontCareData={dontCareData}
|
||||
setDontCareData={setDoneCareData}
|
||||
isLastPage={isLastPage}
|
||||
page={page}
|
||||
formData={formData}
|
||||
updateFormData={setFormData}
|
||||
updatePage={updatePage}
|
||||
question={question}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
<PageTransition backwards={backwards} key={page} lastPage={lastPage} currentPage={currentPage}/>
|
||||
/**
|
||||
* Renders the hidden html form selectors
|
||||
*/
|
||||
const HTMLQuestion = ({
|
||||
question,
|
||||
}: {
|
||||
question: Question<QuestionTypes>;
|
||||
}) => {
|
||||
return (
|
||||
<select className="hidden" name={question.for} multiple>
|
||||
{question.options.map((option, index) => {
|
||||
return (
|
||||
<option
|
||||
key={index}
|
||||
selected={formData[question.for]?.includes(option.value)}
|
||||
value={option.value.toString()}
|
||||
>
|
||||
{option.label}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
);
|
||||
};
|
||||
|
||||
{/** Hidden html */}
|
||||
<form action="/resources" id='search-form' className="hidden">
|
||||
{questions.map((question, index) => {
|
||||
return <HTMLQuestion key={index} question={question} />
|
||||
})}
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const lastPage = <SearchPage pageNumber={previousPage} />;
|
||||
const currentPage = <SearchPage pageNumber={page} />;
|
||||
const backwards = (previousPage ?? -1) >= page;
|
||||
|
||||
export {
|
||||
GuidedSearch,
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<div className="mx-auto overflow-hidden bg-gradient-to-t from-neutral-900 to-neutral-700 px-4 py-2">
|
||||
<h1 className="font-bold text-gray-300">Search</h1>
|
||||
</div>
|
||||
|
||||
<PageTransition
|
||||
backwards={backwards}
|
||||
key={page}
|
||||
lastPage={lastPage}
|
||||
currentPage={currentPage}
|
||||
/>
|
||||
|
||||
{/** Hidden html */}
|
||||
<form action="/resources" id="search-form" className="hidden">
|
||||
{questions.map((question, index) => {
|
||||
return <HTMLQuestion key={index} question={question} />;
|
||||
})}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { GuidedSearch };
|
||||
|
||||
@ -16,7 +16,7 @@ const server = z.object({
|
||||
// Since NextAuth.js automatically uses the VERCEL_URL if present.
|
||||
(str) => process.env.VERCEL_URL ?? str,
|
||||
// VERCEL_URL doesn't include `https` so it cant be validated as a URL
|
||||
process.env.VERCEL ? z.string().min(1) : z.string().url(),
|
||||
process.env.VERCEL ? z.string().min(1) : z.string().url()
|
||||
),
|
||||
// Add `.min(1) on ID and SECRET if you want to make sure they're not empty
|
||||
DISCORD_CLIENT_ID: z.string(),
|
||||
@ -70,7 +70,7 @@ if (!!process.env.SKIP_ENV_VALIDATION == false) {
|
||||
if (parsed.success === false) {
|
||||
console.error(
|
||||
"❌ Invalid environment variables:",
|
||||
parsed.error.flatten().fieldErrors,
|
||||
parsed.error.flatten().fieldErrors
|
||||
);
|
||||
throw new Error("Invalid environment variables");
|
||||
}
|
||||
@ -84,7 +84,7 @@ if (!!process.env.SKIP_ENV_VALIDATION == false) {
|
||||
throw new Error(
|
||||
process.env.NODE_ENV === "production"
|
||||
? "❌ Attempted to access a server-side environment variable on the client"
|
||||
: `❌ Attempted to access server-side environment variable '${prop}' on the client`,
|
||||
: `❌ Attempted to access server-side environment variable '${prop}' on the client`
|
||||
);
|
||||
return target[/** @type {keyof typeof target} */ (prop)];
|
||||
},
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
import sslRedirect from 'next-ssl-redirect-middleware';
|
||||
import sslRedirect from "next-ssl-redirect-middleware";
|
||||
|
||||
export default sslRedirect({});
|
||||
export default sslRedirect({});
|
||||
|
||||
@ -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} />
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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’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 />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
import { SkillLevel, Skill, Platform, type AuditoryResource } from "@prisma/client";
|
||||
import {
|
||||
SkillLevel,
|
||||
Skill,
|
||||
Platform,
|
||||
type AuditoryResource,
|
||||
} from "@prisma/client";
|
||||
import { z } from "zod";
|
||||
|
||||
import {
|
||||
createTRPCRouter, publicProcedure,
|
||||
} from "~/server/api/trpc";
|
||||
import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
|
||||
|
||||
export const auditoryResourceRouter = createTRPCRouter({
|
||||
byId: publicProcedure
|
||||
@ -12,29 +15,33 @@ export const auditoryResourceRouter = createTRPCRouter({
|
||||
const resource = await ctx.prisma.auditoryResource.findUnique({
|
||||
where: {
|
||||
id: input.id,
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
return { ...resource } as AuditoryResource;
|
||||
}),
|
||||
|
||||
getAll: publicProcedure.query(({ ctx }) => {
|
||||
return ctx.prisma.auditoryResource.findMany();
|
||||
return ctx.prisma.auditoryResource.findMany();
|
||||
}),
|
||||
|
||||
search: publicProcedure
|
||||
.input(z.object({
|
||||
take: z.number().int(),
|
||||
skip: z.number().int(),
|
||||
ages: z.object({
|
||||
min: z.number().int(),
|
||||
max: z.number().int(),
|
||||
}).optional(),
|
||||
platforms: z.nativeEnum(Platform).array().optional(),
|
||||
skill_levels: z.nativeEnum(SkillLevel).array().optional(),
|
||||
skills: z.nativeEnum(Skill).array().optional(),
|
||||
}))
|
||||
.query(async ({ input, ctx}) => {
|
||||
.input(
|
||||
z.object({
|
||||
take: z.number().int(),
|
||||
skip: z.number().int(),
|
||||
ages: z
|
||||
.object({
|
||||
min: z.number().int(),
|
||||
max: z.number().int(),
|
||||
})
|
||||
.optional(),
|
||||
platforms: z.nativeEnum(Platform).array().optional(),
|
||||
skill_levels: z.nativeEnum(SkillLevel).array().optional(),
|
||||
skills: z.nativeEnum(Skill).array().optional(),
|
||||
})
|
||||
)
|
||||
.query(async ({ input, ctx }) => {
|
||||
const search = {
|
||||
ages: {
|
||||
is: {
|
||||
@ -43,8 +50,8 @@ export const auditoryResourceRouter = createTRPCRouter({
|
||||
},
|
||||
max: {
|
||||
gte: input.ages?.max,
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
skill_levels: {
|
||||
hasEvery: input.skill_levels ?? [],
|
||||
@ -56,10 +63,10 @@ export const auditoryResourceRouter = createTRPCRouter({
|
||||
some: {
|
||||
platform: {
|
||||
in: input.platforms,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const [count, resources] = await ctx.prisma.$transaction([
|
||||
ctx.prisma.auditoryResource.count({
|
||||
@ -69,12 +76,12 @@ export const auditoryResourceRouter = createTRPCRouter({
|
||||
skip: input.skip,
|
||||
take: input.take,
|
||||
where: search,
|
||||
})
|
||||
}),
|
||||
]);
|
||||
|
||||
return {
|
||||
count,
|
||||
resources,
|
||||
}
|
||||
};
|
||||
}),
|
||||
});
|
||||
|
||||
@ -4,48 +4,48 @@ import { type Skill, type Platform } from "@prisma/client";
|
||||
* Takes a platform enum and translates it to readable form.
|
||||
*/
|
||||
export const translateEnumPlatform = (value: Platform) => {
|
||||
switch(value) {
|
||||
case "APP_ANDROID": {
|
||||
return "Android";
|
||||
}
|
||||
case "APP_IOS": {
|
||||
return "Apple";
|
||||
}
|
||||
case "PDF": {
|
||||
return "PDF Document";
|
||||
}
|
||||
case "WEBSITE": {
|
||||
return "Website"
|
||||
}
|
||||
switch (value) {
|
||||
case "APP_ANDROID": {
|
||||
return "Android";
|
||||
}
|
||||
}
|
||||
case "APP_IOS": {
|
||||
return "Apple";
|
||||
}
|
||||
case "PDF": {
|
||||
return "PDF Document";
|
||||
}
|
||||
case "WEBSITE": {
|
||||
return "Website";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Takes a skill enum value and translates it to human text
|
||||
* @param value
|
||||
* @param value
|
||||
*/
|
||||
export const translateEnumSkill = (value: Skill) => {
|
||||
switch(value) {
|
||||
case "ENVIRONMENT": {
|
||||
return "Environmental Sounds";
|
||||
}
|
||||
case "BACKGROUND": {
|
||||
return "Background";
|
||||
}
|
||||
case "DISCOURSE": {
|
||||
return "Discourse/Complex";
|
||||
}
|
||||
case "MUSIC": {
|
||||
return "Music Appreciation"
|
||||
}
|
||||
case "PHONEMES": {
|
||||
return "Phonemes";
|
||||
}
|
||||
case "SENTENCES": {
|
||||
return "Sentences"
|
||||
}
|
||||
case "WORDS": {
|
||||
return "Words"
|
||||
}
|
||||
switch (value) {
|
||||
case "ENVIRONMENT": {
|
||||
return "Environmental Sounds";
|
||||
}
|
||||
}
|
||||
case "BACKGROUND": {
|
||||
return "Background";
|
||||
}
|
||||
case "DISCOURSE": {
|
||||
return "Discourse/Complex";
|
||||
}
|
||||
case "MUSIC": {
|
||||
return "Music Appreciation";
|
||||
}
|
||||
case "PHONEMES": {
|
||||
return "Phonemes";
|
||||
}
|
||||
case "SENTENCES": {
|
||||
return "Sentences";
|
||||
}
|
||||
case "WORDS": {
|
||||
return "Words";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,75 +1,80 @@
|
||||
import { type Platform, type RangeInput, type Skill, type SkillLevel } from "@prisma/client";
|
||||
import {
|
||||
type Platform,
|
||||
type RangeInput,
|
||||
type Skill,
|
||||
type SkillLevel,
|
||||
} from "@prisma/client";
|
||||
import { type ParsedUrlQuery } from "querystring";
|
||||
|
||||
export interface ViewDetails {
|
||||
page: number;
|
||||
perPage: number;
|
||||
page: number;
|
||||
perPage: number;
|
||||
}
|
||||
|
||||
|
||||
export interface SearchQuery {
|
||||
age?: RangeInput,
|
||||
platforms?: Platform[],
|
||||
skill_levels?: SkillLevel[],
|
||||
skills?: Skill[],
|
||||
age?: RangeInput;
|
||||
platforms?: Platform[];
|
||||
skill_levels?: SkillLevel[];
|
||||
skills?: Skill[];
|
||||
}
|
||||
|
||||
export type ParsedQueryData = SearchQuery & ViewDetails;
|
||||
|
||||
export const parseQueryData = (query: ParsedUrlQuery): ParsedQueryData => {
|
||||
const view = {
|
||||
page: Number(query["page"] ?? 1),
|
||||
perPage: Number(query["perPage"] ?? 10),
|
||||
}
|
||||
const filter: SearchQuery = {};
|
||||
const view = {
|
||||
page: Number(query["page"] ?? 1),
|
||||
perPage: Number(query["perPage"] ?? 10),
|
||||
};
|
||||
const filter: SearchQuery = {};
|
||||
|
||||
if (query["ages"]) {
|
||||
const ages: number[] = [];
|
||||
if (query["ages"]) {
|
||||
const ages: number[] = [];
|
||||
|
||||
if (Array.isArray(query["ages"])) {
|
||||
const validRanges = query["ages"].filter((value) => {
|
||||
return value.split("-").length == 2;
|
||||
});
|
||||
if (Array.isArray(query["ages"])) {
|
||||
const validRanges = query["ages"].filter((value) => {
|
||||
return value.split("-").length == 2;
|
||||
});
|
||||
|
||||
validRanges.forEach((value) => {
|
||||
const split = value.split("-");
|
||||
ages.push(Number(split[0]));
|
||||
ages.push(Number(split[1]));
|
||||
});
|
||||
} else {
|
||||
const split = query["ages"].split("-");
|
||||
validRanges.forEach((value) => {
|
||||
const split = value.split("-");
|
||||
ages.push(Number(split[0]));
|
||||
ages.push(Number(split[1]));
|
||||
}
|
||||
|
||||
filter.age = {
|
||||
min: Math.min(...ages),
|
||||
max: Math.max(...ages),
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const split = query["ages"].split("-");
|
||||
ages.push(Number(split[0]));
|
||||
ages.push(Number(split[1]));
|
||||
}
|
||||
|
||||
if (query["platforms"]) {
|
||||
if (Array.isArray(query["platforms"])) {
|
||||
filter.platforms = query["platforms"] as Platform[];
|
||||
} else {
|
||||
filter.platforms = [query["platforms"]] as Platform[];
|
||||
}
|
||||
}
|
||||
filter.age = {
|
||||
min: Math.min(...ages),
|
||||
max: Math.max(...ages),
|
||||
};
|
||||
}
|
||||
|
||||
if (query["skill_levels"]) {
|
||||
if (Array.isArray(query["skill_levels"])) {
|
||||
filter.skill_levels = query["skill_levels"] as SkillLevel[];
|
||||
} else {
|
||||
filter.skill_levels = [query["skill_levels"]] as SkillLevel[];
|
||||
}
|
||||
if (query["platforms"]) {
|
||||
if (Array.isArray(query["platforms"])) {
|
||||
filter.platforms = query["platforms"] as Platform[];
|
||||
} else {
|
||||
filter.platforms = [query["platforms"]] as Platform[];
|
||||
}
|
||||
}
|
||||
|
||||
if (query["skills"]) {
|
||||
if (Array.isArray(query["skills"])) {
|
||||
filter.skills = query["skills"] as Skill[];
|
||||
} else {
|
||||
filter.skills = [query["skills"]] as Skill[];
|
||||
}
|
||||
if (query["skill_levels"]) {
|
||||
if (Array.isArray(query["skill_levels"])) {
|
||||
filter.skill_levels = query["skill_levels"] as SkillLevel[];
|
||||
} else {
|
||||
filter.skill_levels = [query["skill_levels"]] as SkillLevel[];
|
||||
}
|
||||
}
|
||||
|
||||
return {...filter, ...view};
|
||||
}
|
||||
if (query["skills"]) {
|
||||
if (Array.isArray(query["skills"])) {
|
||||
filter.skills = query["skills"] as Skill[];
|
||||
} else {
|
||||
filter.skills = [query["skills"]] as Skill[];
|
||||
}
|
||||
}
|
||||
|
||||
return { ...filter, ...view };
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user