add prettier lint rule
This commit is contained in:
Brandon Egger
parent
e10f2911d9
commit
192c594d4f
@ -4,6 +4,7 @@ const config = {
|
|||||||
{
|
{
|
||||||
extends: [
|
extends: [
|
||||||
"plugin:@typescript-eslint/recommended-requiring-type-checking",
|
"plugin:@typescript-eslint/recommended-requiring-type-checking",
|
||||||
|
"prettier",
|
||||||
],
|
],
|
||||||
files: ["*.ts", "*.tsx"],
|
files: ["*.ts", "*.tsx"],
|
||||||
parserOptions: {
|
parserOptions: {
|
||||||
@ -15,9 +16,10 @@ const config = {
|
|||||||
parserOptions: {
|
parserOptions: {
|
||||||
project: "./tsconfig.json",
|
project: "./tsconfig.json",
|
||||||
},
|
},
|
||||||
plugins: ["@typescript-eslint"],
|
plugins: ["@typescript-eslint", "prettier"],
|
||||||
extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
|
extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
|
||||||
rules: {
|
rules: {
|
||||||
|
"prettier/prettier": ["error"],
|
||||||
"@typescript-eslint/consistent-type-imports": [
|
"@typescript-eslint/consistent-type-imports": [
|
||||||
"warn",
|
"warn",
|
||||||
{
|
{
|
||||||
|
|||||||
84
package-lock.json
generated
84
package-lock.json
generated
@ -37,6 +37,8 @@
|
|||||||
"autoprefixer": "^10.4.7",
|
"autoprefixer": "^10.4.7",
|
||||||
"eslint": "^8.34.0",
|
"eslint": "^8.34.0",
|
||||||
"eslint-config-next": "^13.2.1",
|
"eslint-config-next": "^13.2.1",
|
||||||
|
"eslint-config-prettier": "^8.8.0",
|
||||||
|
"eslint-plugin-prettier": "^4.2.1",
|
||||||
"postcss": "^8.4.14",
|
"postcss": "^8.4.14",
|
||||||
"prettier": "^2.8.1",
|
"prettier": "^2.8.1",
|
||||||
"prettier-plugin-tailwindcss": "^0.2.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": {
|
"node_modules/eslint-import-resolver-node": {
|
||||||
"version": "0.3.7",
|
"version": "0.3.7",
|
||||||
"resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
|
"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"
|
"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": {
|
"node_modules/eslint-plugin-react": {
|
||||||
"version": "7.32.2",
|
"version": "7.32.2",
|
||||||
"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
|
"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==",
|
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
|
||||||
"dev": true
|
"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": {
|
"node_modules/fast-glob": {
|
||||||
"version": "3.2.12",
|
"version": "3.2.12",
|
||||||
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
|
"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"
|
"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": {
|
"node_modules/prettier-plugin-tailwindcss": {
|
||||||
"version": "0.2.4",
|
"version": "0.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.4.tgz",
|
"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-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": {
|
"eslint-import-resolver-node": {
|
||||||
"version": "0.3.7",
|
"version": "0.3.7",
|
||||||
"resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
|
"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": {
|
"eslint-plugin-react": {
|
||||||
"version": "7.32.2",
|
"version": "7.32.2",
|
||||||
"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
|
"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==",
|
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
|
||||||
"dev": true
|
"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": {
|
"fast-glob": {
|
||||||
"version": "3.2.12",
|
"version": "3.2.12",
|
||||||
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
|
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
|
||||||
@ -7531,6 +7606,15 @@
|
|||||||
"integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
|
"integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
|
||||||
"dev": true
|
"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": {
|
"prettier-plugin-tailwindcss": {
|
||||||
"version": "0.2.4",
|
"version": "0.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.4.tgz",
|
||||||
|
|||||||
@ -7,6 +7,7 @@
|
|||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
"postinstall": "prisma generate",
|
"postinstall": "prisma generate",
|
||||||
"lint": "next lint",
|
"lint": "next lint",
|
||||||
|
"format": "next lint --fix",
|
||||||
"start": "next start",
|
"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();\""
|
"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",
|
"autoprefixer": "^10.4.7",
|
||||||
"eslint": "^8.34.0",
|
"eslint": "^8.34.0",
|
||||||
"eslint-config-next": "^13.2.1",
|
"eslint-config-next": "^13.2.1",
|
||||||
|
"eslint-config-prettier": "^8.8.0",
|
||||||
|
"eslint-plugin-prettier": "^4.2.1",
|
||||||
"postcss": "^8.4.14",
|
"postcss": "^8.4.14",
|
||||||
"prettier": "^2.8.1",
|
"prettier": "^2.8.1",
|
||||||
"prettier-plugin-tailwindcss": "^0.2.1",
|
"prettier-plugin-tailwindcss": "^0.2.1",
|
||||||
|
|||||||
@ -1,140 +1,173 @@
|
|||||||
import { type NextPage } from "next/types";
|
import { type NextPage } from "next/types";
|
||||||
import Image from 'next/image';
|
import Image from "next/image";
|
||||||
|
|
||||||
interface QuickLink {
|
interface QuickLink {
|
||||||
label: string,
|
label: string;
|
||||||
href: string,
|
href: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const links: QuickLink[] = [
|
const links: QuickLink[] = [
|
||||||
{
|
{
|
||||||
label: "Communication Sciences and Disorders",
|
label: "Communication Sciences and Disorders",
|
||||||
href: "https://csd.uiowa.edu/",
|
href: "https://csd.uiowa.edu/",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Wendell Johnson",
|
label: "Wendell Johnson",
|
||||||
href: "https://www.facilities.uiowa.edu/named-building/wendell-johnson-speech-and-hearing-center",
|
href: "https://www.facilities.uiowa.edu/named-building/wendell-johnson-speech-and-hearing-center",
|
||||||
}
|
},
|
||||||
]
|
];
|
||||||
|
|
||||||
const QuickLink = ({label, href}: QuickLink) => {
|
const QuickLink = ({ label, href }: QuickLink) => {
|
||||||
return (
|
return (
|
||||||
<a className="hover:underline space-x-2" target="_blank" href={href}>
|
<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" />
|
<Image
|
||||||
<span className="inline">{label}</span>
|
className="inline"
|
||||||
</a>
|
alt="external link"
|
||||||
)
|
width={16}
|
||||||
|
height={16}
|
||||||
|
src="/open-external-link-icon.svg"
|
||||||
|
/>
|
||||||
|
<span className="inline">{label}</span>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
interface ContactInfo {
|
interface ContactInfo {
|
||||||
name: string,
|
name: string;
|
||||||
title: string,
|
title: string;
|
||||||
email?: string,
|
email?: string;
|
||||||
phone?: string,
|
phone?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const contacts: ContactInfo[] = [
|
const contacts: ContactInfo[] = [
|
||||||
{
|
{
|
||||||
name: "Olivia Adamson",
|
name: "Olivia Adamson",
|
||||||
title: "Audiology Graduate Student Clinician",
|
title: "Audiology Graduate Student Clinician",
|
||||||
email: "olivia-adamson@uiowa.edu",
|
email: "olivia-adamson@uiowa.edu",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Eun Kyung (Julie) Jeon",
|
name: "Eun Kyung (Julie) Jeon",
|
||||||
title: "Clinical Assistant Professor",
|
title: "Clinical Assistant Professor",
|
||||||
email: "eunkyung-jeon@uiowa.edu",
|
email: "eunkyung-jeon@uiowa.edu",
|
||||||
phone: "3194671476"
|
phone: "3194671476",
|
||||||
}
|
},
|
||||||
]
|
];
|
||||||
|
|
||||||
const ContactInfo = ({name, title, email, phone}: ContactInfo) => {
|
const ContactInfo = ({ name, title, email, phone }: ContactInfo) => {
|
||||||
return (
|
return (
|
||||||
<section className="py-4 space-y-2">
|
<section className="space-y-2 py-4">
|
||||||
<h1 className="text-md">{name}</h1>
|
<h1 className="text-md">{name}</h1>
|
||||||
<p className="italic text-sm text-neutral-400">{title}</p>
|
<p className="text-sm italic text-neutral-400">{title}</p>
|
||||||
{ email ?
|
{email ? (
|
||||||
<section className="space-x-2">
|
<section className="space-x-2">
|
||||||
<Image className="inline" alt="email" width={20} height={20} src="/mail-icon-white.svg"/>
|
<Image
|
||||||
<h2 className="text-sm inline">{email}</h2>
|
className="inline"
|
||||||
</section>
|
alt="email"
|
||||||
: undefined}
|
width={20}
|
||||||
{ phone ?
|
height={20}
|
||||||
<section className="space-x-2">
|
src="/mail-icon-white.svg"
|
||||||
<Image className="inline" alt="phone" width={20} height={20} src="/phone-call-icon.svg"/>
|
/>
|
||||||
<h2 className="text-sm inline">{phone}</h2>
|
<h2 className="inline text-sm">{email}</h2>
|
||||||
</section>
|
|
||||||
: undefined}
|
|
||||||
</section>
|
</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}: {
|
const FooterLabeledSection = ({
|
||||||
title: string,
|
title,
|
||||||
children: JSX.Element[] | JSX.Element,
|
children,
|
||||||
|
}: {
|
||||||
|
title: string;
|
||||||
|
children: JSX.Element[] | JSX.Element;
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col px-2 sm:px-8">
|
<div className="flex flex-col px-2 sm:px-8">
|
||||||
<h1 className="font-bold text-xl text-neutral-400">{title}</h1>
|
<h1 className="text-xl font-bold text-neutral-400">{title}</h1>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
const Footer: NextPage = () => {
|
const Footer: NextPage = () => {
|
||||||
return (
|
return (
|
||||||
<div className="w-full bg-neutral-800">
|
<div className="w-full bg-neutral-800">
|
||||||
{/** yellow stripe */}
|
{/** yellow stripe */}
|
||||||
<div className="bg-yellow-400 border-t-[1px] border-neutral-400 p-[4px]"></div>
|
<div className="border-t-[1px] border-neutral-400 bg-yellow-400 p-[4px]"></div>
|
||||||
|
|
||||||
{/** Main footer area */}
|
{/** Main footer area */}
|
||||||
<div className="mx-auto max-w-5xl p-4 flex flex-col-reverse md:flex-row justify-between">
|
<div className="mx-auto flex max-w-5xl flex-col-reverse justify-between p-4 md:flex-row">
|
||||||
{/** Wendell Johnson Info */}
|
{/** Wendell Johnson Info */}
|
||||||
<div className="flex-col mt-8 sm:mt-0">
|
<div className="mt-8 flex-col sm:mt-0">
|
||||||
<Image alt="University of Iowa logo" width={128} height={64} src="/IOWA-gold-text.png" />
|
<Image
|
||||||
<div className="px-2 text-neutral-100 space-y-8">
|
alt="University of Iowa logo"
|
||||||
<section>
|
width={128}
|
||||||
<h1 className="text-yellow-300 text-md">Communication Sciences and Disorders</h1>
|
height={64}
|
||||||
<h2 className="text-yellow-100 italic text-sm">College of Liberal Arts and Sciences</h2>
|
src="/IOWA-gold-text.png"
|
||||||
</section>
|
/>
|
||||||
<section>
|
<div className="space-y-8 px-2 text-neutral-100">
|
||||||
<h3 className="text-sm italic">Wendell Johnson Speech and Hearing Center</h3>
|
<section>
|
||||||
<p className="text-sm">250 Hawkins Dr</p>
|
<h1 className="text-md text-yellow-300">
|
||||||
<p className="text-sm">Iowa City, IA 52242</p>
|
Communication Sciences and Disorders
|
||||||
</section>
|
</h1>
|
||||||
<section>
|
<h2 className="text-sm italic text-yellow-100">
|
||||||
<p className="text-sm text-neutral-400 italic">
|
College of Liberal Arts and Sciences
|
||||||
Site Designed and Built by <a target="_blank" href="https://brandonegger.com" className="hover:underline">
|
</h2>
|
||||||
Brandon Egger
|
</section>
|
||||||
</a>
|
<section>
|
||||||
</p>
|
<h3 className="text-sm italic">
|
||||||
</section>
|
Wendell Johnson Speech and Hearing Center
|
||||||
</div>
|
</h3>
|
||||||
</div>
|
<p className="text-sm">250 Hawkins Dr</p>
|
||||||
|
<p className="text-sm">Iowa City, IA 52242</p>
|
||||||
{/** Header and tabs */}
|
</section>
|
||||||
<div className="flex flex-row text-neutral-200 mx-auto md:mx-0 sm:px-4 divide-x divide-neutral-500">
|
<section>
|
||||||
<FooterLabeledSection title="Quick Links">
|
<p className="text-sm italic text-neutral-400">
|
||||||
<div className="flex flex-col pt-4 space-y-2">
|
Site Designed and Built by{" "}
|
||||||
{links.map((quickLink, index) => {
|
<a
|
||||||
return (
|
target="_blank"
|
||||||
<QuickLink key={index} {...quickLink}/>
|
href="https://brandonegger.com"
|
||||||
)
|
className="hover:underline"
|
||||||
})}
|
>
|
||||||
</div>
|
Brandon Egger
|
||||||
</FooterLabeledSection>
|
</a>
|
||||||
<FooterLabeledSection title="Contact">
|
</p>
|
||||||
<div className="flex flex-col divide-y divide-neutral-500">
|
</section>
|
||||||
{contacts.map((contactInfo, index) => {
|
</div>
|
||||||
return (
|
|
||||||
<ContactInfo key={index} {...contactInfo} />
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</FooterLabeledSection>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</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;
|
export default Footer;
|
||||||
|
|||||||
@ -1,101 +1,141 @@
|
|||||||
import { type NextPage } from "next";
|
import { type NextPage } from "next";
|
||||||
import Image from 'next/image';
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { ChevronDownIcon } from '@heroicons/react/24/outline';
|
import { ChevronDownIcon } from "@heroicons/react/24/outline";
|
||||||
|
|
||||||
interface DropdownOption {
|
interface DropdownOption {
|
||||||
label: string;
|
label: string;
|
||||||
href: string;
|
href: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface NavBarLinkProps {
|
interface NavBarLinkProps {
|
||||||
href: string;
|
href: string;
|
||||||
label: string;
|
label: string;
|
||||||
dropdown?: DropdownOption[];
|
dropdown?: DropdownOption[];
|
||||||
}
|
}
|
||||||
|
|
||||||
const NavBarLink = ({href, label, dropdown}: NavBarLinkProps) => {
|
const NavBarLink = ({ href, label, dropdown }: NavBarLinkProps) => {
|
||||||
const DropDown = ({dropdownOptions}: {dropdownOptions: DropdownOption[]}) => {
|
const DropDown = ({
|
||||||
const options = dropdownOptions.map((dropdownOption, index) => {
|
dropdownOptions,
|
||||||
return (
|
}: {
|
||||||
<Link key={index} href={dropdownOption.href}>
|
dropdownOptions: DropdownOption[];
|
||||||
<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>
|
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">
|
||||||
return (
|
{dropdownOption.label}
|
||||||
<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">
|
</span>
|
||||||
{options}
|
</Link>
|
||||||
</div>
|
);
|
||||||
)
|
});
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<li className="group relative">
|
<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">
|
||||||
<Link href={href} className={"h-14 block border-neutral-800 box-border" + (dropdown ? "" : " hover:border-b-2")}>
|
{options}
|
||||||
<div className="h-full flex flex-row space-x-[4px]">
|
</div>
|
||||||
<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>
|
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
const NavBar = () => {
|
return (
|
||||||
const resourcesDropDown: DropdownOption[] = [
|
<li className="group relative">
|
||||||
{
|
<Link
|
||||||
label: "search",
|
href={href}
|
||||||
href: "/resources/search",
|
className={
|
||||||
},
|
"box-border block h-14 border-neutral-800" +
|
||||||
{
|
(dropdown ? "" : " hover:border-b-2")
|
||||||
label: "view all",
|
|
||||||
href: "/resources"
|
|
||||||
}
|
}
|
||||||
]
|
>
|
||||||
|
<div className="flex h-full flex-row space-x-[4px]">
|
||||||
return (
|
<div className="my-auto inline-block">
|
||||||
<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">
|
<span className="align-text-middle inline-block py-2 text-lg font-bold">
|
||||||
<li className="mx-auto max-w-5xl flex flex-row sm:justify-between px-4">
|
{label}
|
||||||
<ul id="left-nav-links" className="flex flex-row space-x-10">
|
</span>
|
||||||
<NavBarLink href='/' label='Home'/>
|
</div>
|
||||||
<NavBarLink dropdown={resourcesDropDown} href='/resources' label='Resources'/>
|
{dropdown ? <ChevronDownIcon className="w-4" /> : <></>}
|
||||||
<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>
|
</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 {
|
||||||
import { CurrencyDollarIcon, ArrowPathRoundedSquareIcon } from '@heroicons/react/24/solid';
|
type PlatformLink,
|
||||||
import { ClipboardDocumentListIcon } from '@heroicons/react/24/outline';
|
type PaymentType,
|
||||||
import Image from 'next/image';
|
type AuditoryResource,
|
||||||
import Link from 'next/link';
|
type Skill,
|
||||||
import { translateEnumPlatform, translateEnumSkill } from '~/utils/enumWordLut';
|
type SkillLevel,
|
||||||
import { type ChangeEvent } from 'react';
|
type Manufacturer,
|
||||||
import { ChevronDownIcon } from '@heroicons/react/24/outline';
|
} from "@prisma/client";
|
||||||
import { type ParsedUrlQuery, type ParsedUrlQueryInput } from 'querystring';
|
import {
|
||||||
import { useRouter } from 'next/router';
|
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}) => {
|
export const ResourceInfo = ({
|
||||||
const PriceIcons = ({type}: {type: PaymentType}) => {
|
resource,
|
||||||
switch(type) {
|
showMoreInfo,
|
||||||
case "FREE": {
|
}: {
|
||||||
return (
|
resource: AuditoryResource;
|
||||||
<div className="pt-2 space-x-1" title="Free">
|
showMoreInfo?: boolean;
|
||||||
<span className="bg-amber-100 italic rounded-lg border border-neutral-900 text-black px-2 py-[1px]">
|
}) => {
|
||||||
free
|
const PriceIcons = ({ type }: { type: PaymentType }) => {
|
||||||
</span>
|
switch (type) {
|
||||||
</div>
|
case "FREE": {
|
||||||
)
|
|
||||||
}
|
|
||||||
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(', ');
|
|
||||||
|
|
||||||
return (
|
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">
|
const PlatformInfo = ({
|
||||||
<div className="h-full my-auto">
|
platformLinks,
|
||||||
{showMoreInfo ?
|
}: {
|
||||||
<Link href={`resources/${resource.id}`}>
|
platformLinks: PlatformLink[];
|
||||||
<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}/>
|
const platformsStr = platformLinks
|
||||||
<span
|
.map((platformLink) => {
|
||||||
className="block bg-neutral-900 hover:bg-neutral-500 border border-neutral-900 text-center py-[1px] text-white rounded-lg">
|
return translateEnumPlatform(platformLink.platform);
|
||||||
more info
|
})
|
||||||
</span>
|
.join(", ");
|
||||||
</div>
|
|
||||||
</Link>
|
return <p>{platformsStr}</p>;
|
||||||
:
|
};
|
||||||
<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}/>
|
return (
|
||||||
</div>
|
<div className="flex flex-row space-x-4 p-4">
|
||||||
}
|
<div className="my-auto h-full">
|
||||||
</div>
|
{showMoreInfo ? (
|
||||||
<div className="grid place-items-center">
|
<Link href={`resources/${resource.id}`}>
|
||||||
<div className="">
|
<div className="flex w-20 flex-col justify-center space-y-2 sm:w-28">
|
||||||
<h2 className="text-xs italic text-gray-600">{resource.manufacturer?.name}</h2>
|
<Image
|
||||||
<h1 className="font-bold text-xl">{resource.name}</h1>
|
className="w-full rounded-xl border border-neutral-400 bg-white drop-shadow-lg"
|
||||||
<PlatformInfo platformLinks={resource.platform_links}/>
|
src={`/resource_logos/${resource.icon}`}
|
||||||
<PriceIcons type={resource?.payment_options[0] ?? 'FREE'} />
|
alt={`${resource.name} logo`}
|
||||||
</div>
|
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>
|
</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>
|
||||||
}
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export const ResourceDescription = ({manufacturer, description}: {manufacturer: null | Manufacturer, description: string}) => {
|
export const ResourceDescription = ({
|
||||||
return (
|
manufacturer,
|
||||||
<div className="h-full flex flex-col">
|
description,
|
||||||
{ manufacturer?.required ?
|
}: {
|
||||||
<div className="bg-neutral-600 border-t-[4px] border-neutral-700 p-2">
|
manufacturer: null | Manufacturer;
|
||||||
<h3 className="text-sm font-bold text-neutral-100">IMPORTANT</h3>
|
description: string;
|
||||||
<p className="text-sm text-neutral-300">
|
}) => {
|
||||||
This resource requires the patient to have a {manufacturer.name} device
|
return (
|
||||||
</p>
|
<div className="flex h-full flex-col">
|
||||||
</div>
|
{manufacturer?.required ? (
|
||||||
: undefined}
|
<div className="border-t-[4px] border-neutral-700 bg-neutral-600 p-2">
|
||||||
<div className="p-2">
|
<h3 className="text-sm font-bold text-neutral-100">IMPORTANT</h3>
|
||||||
<p>{description}</p>
|
<p className="text-sm text-neutral-300">
|
||||||
</div>
|
This resource requires the patient to have a {manufacturer.name}{" "}
|
||||||
|
device
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)
|
) : undefined}
|
||||||
}
|
<div className="p-2">
|
||||||
|
<p>{description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const ResourceEntry = ({resource}: {resource: AuditoryResource}) => {
|
const ResourceEntry = ({ resource }: { resource: AuditoryResource }) => {
|
||||||
const ResourceSkills = ({skills, skillLevels}: {skills: Skill[], skillLevels: SkillLevel[]}) => {
|
const ResourceSkills = ({
|
||||||
const SkillRanking = ({skillLevels}: {skillLevels: SkillLevel[]}) => {
|
skills,
|
||||||
return (
|
skillLevels,
|
||||||
<div className='flex flex-row space-x-2 overflow-x-auto'>
|
}: {
|
||||||
{skillLevels.includes('BEGINNER') ?
|
skills: Skill[];
|
||||||
<div className="rounded-lg px-[3px] border-green-600 border-2 bg-green-300">
|
skillLevels: SkillLevel[];
|
||||||
<h2 className="text-neutral-900 italic text-sm text-right">Beginner</h2>
|
}) => {
|
||||||
</div> : undefined
|
const SkillRanking = ({ skillLevels }: { skillLevels: SkillLevel[] }) => {
|
||||||
}
|
|
||||||
{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) => {
|
|
||||||
return (
|
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 (
|
return (
|
||||||
<div className="flex flex-row justify-between pl-2 pr-4 py-2 bg-amber-100">
|
<div className="m-2 flex flex-col space-y-4">
|
||||||
<div className="flex flex-row w-64 space-x-2">
|
{skillsComponents.length > 0 ? (
|
||||||
<div className="relative inline-flex">
|
<div className="rounded-lg border border-neutral-900 bg-gray-100 drop-shadow">
|
||||||
<select
|
<ul className="divide-y-2">{skillsComponents}</ul>
|
||||||
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"
|
</div>
|
||||||
value={resultsPerPage}
|
) : (
|
||||||
onChange={handleChange}
|
<></>
|
||||||
>
|
)}
|
||||||
<option value={5}>5</option>
|
<SkillRanking skillLevels={skillLevels} />
|
||||||
<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>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
const ResourceTable = ({resources, resourcesPerPage, currentPage, totalPages, query}: {
|
return (
|
||||||
resources: AuditoryResource[],
|
<tr className="divide-x-[1px] divide-slate-400">
|
||||||
resourcesPerPage: number,
|
<td className="max-w-xs">
|
||||||
currentPage: number,
|
<ResourceInfo showMoreInfo resource={resource} />
|
||||||
totalPages: number,
|
</td>
|
||||||
query: ParsedUrlQuery
|
<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) => {
|
const resourceElements =
|
||||||
return (<ResourceEntry key={index} resource={resource} />);
|
resources.map((resource, index) => {
|
||||||
|
return <ResourceEntry key={index} resource={resource} />;
|
||||||
}) ?? [];
|
}) ?? [];
|
||||||
|
|
||||||
return(
|
return (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="mx-auto rounded-xl overflow-hidden border border-neutral-400 drop-shadow-md overflow-hidden">
|
<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} />
|
<PagesNavigation
|
||||||
<table className="w-full table-fixed bg-neutral-200 border-b border-neutral-400">
|
query={query}
|
||||||
<thead className="bg-gradient-to-t from-neutral-900 to-neutral-700 drop-shadow-md">
|
resultsPerPage={resourcesPerPage}
|
||||||
<tr>
|
currentPage={currentPage}
|
||||||
<th className="w-1/3 max-w-xs">
|
pageCount={totalPages}
|
||||||
<span className="text-gray-300 block px-4 py-2 text-left">
|
/>
|
||||||
Resource
|
<table className="w-full table-fixed border-b border-neutral-400 bg-neutral-200">
|
||||||
</span>
|
<thead className="bg-gradient-to-t from-neutral-900 to-neutral-700 drop-shadow-md">
|
||||||
</th>
|
<tr>
|
||||||
<th className="w-1/4 max-w-xs">
|
<th className="w-1/3 max-w-xs">
|
||||||
<span className="text-gray-300 block px-4 py-2 text-left">
|
<span className="block px-4 py-2 text-left text-gray-300">
|
||||||
Skills
|
Resource
|
||||||
</span>
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<th className="hidden md:table-cell">
|
<th className="w-1/4 max-w-xs">
|
||||||
<span className="text-gray-300 block px-4 py-2 text-left">
|
<span className="block px-4 py-2 text-left text-gray-300">
|
||||||
Description
|
Skills
|
||||||
</span>
|
</span>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
<th className="hidden md:table-cell">
|
||||||
</thead>
|
<span className="block px-4 py-2 text-left text-gray-300">
|
||||||
<tbody className="divide-y-[1px] divide-slate-400 overflow-y-scroll">
|
Description
|
||||||
{resourceElements}
|
</span>
|
||||||
</tbody>
|
</th>
|
||||||
</table>
|
</tr>
|
||||||
{(resources && resources.length > 4) ?
|
</thead>
|
||||||
<PagesNavigation query={query} resultsPerPage={resourcesPerPage} currentPage={currentPage} pageCount={totalPages} />
|
<tbody className="divide-y-[1px] divide-slate-400 overflow-y-scroll">
|
||||||
: undefined}
|
{resourceElements}
|
||||||
</div>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
{resources && resources.length > 4 ? (
|
||||||
|
<PagesNavigation
|
||||||
|
query={query}
|
||||||
|
resultsPerPage={resourcesPerPage}
|
||||||
|
currentPage={currentPage}
|
||||||
|
pageCount={totalPages}
|
||||||
|
/>
|
||||||
|
) : undefined}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ResourceTable;
|
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";
|
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> {
|
export interface Option<T> {
|
||||||
label: string,
|
label: string;
|
||||||
value: T,
|
value: T;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Question<T> {
|
export interface Question<T> {
|
||||||
for: string,
|
for: string;
|
||||||
header: string,
|
header: string;
|
||||||
question: string,
|
question: string;
|
||||||
maxSelect?: number,
|
maxSelect?: number;
|
||||||
optional: true,
|
optional: true;
|
||||||
options: Option<T>[]
|
options: Option<T>[];
|
||||||
}
|
}
|
||||||
|
|
||||||
const GreetingPage = ({updatePage}: {
|
const GreetingPage = ({
|
||||||
updatePage: (pageNumber: number) => void,
|
updatePage,
|
||||||
|
}: {
|
||||||
|
updatePage: (pageNumber: number) => void;
|
||||||
}) => {
|
}) => {
|
||||||
const getStartedClick = () => {
|
const getStartedClick = () => {
|
||||||
updatePage(1);
|
updatePage(1);
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col text-center">
|
<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>
|
<h1 className="mb-8 max-w-sm text-center text-xl font-extrabold">
|
||||||
<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>
|
Welcome to the auditory training resource search tool!
|
||||||
<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>
|
</h1>
|
||||||
</div>
|
<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
|
* Single question component for a guided search
|
||||||
*/
|
*/
|
||||||
const QuestionPage = ({isLastPage, page, question, updatePage, formData, updateFormData, dontCareData, setDontCareData}: {
|
const QuestionPage = ({
|
||||||
isLastPage: boolean,
|
isLastPage,
|
||||||
page: number,
|
page,
|
||||||
question: Question<QuestionTypes>,
|
question,
|
||||||
updatePage: (pageNumber: number) => void,
|
updatePage,
|
||||||
formData: Record<string, QuestionTypes[]>,
|
formData,
|
||||||
updateFormData: Dispatch<SetStateAction<Record<string, QuestionTypes[]>>>,
|
updateFormData,
|
||||||
dontCareData: Record<string, boolean>,
|
dontCareData,
|
||||||
setDontCareData: Dispatch<SetStateAction<Record<string, boolean>>>,
|
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 OptionToggle = ({ option }: { option: Option<QuestionTypes> }) => {
|
||||||
const selected = formData[question.for]?.includes(option.value) ?? false;
|
const selected = formData[question.for]?.includes(option.value) ?? false;
|
||||||
|
|
||||||
const handleToggle = () => {
|
|
||||||
const newFormData = {
|
|
||||||
...formData
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!newFormData[question.for]) {
|
const handleToggle = () => {
|
||||||
newFormData[question.for] = [option.value];
|
const newFormData = {
|
||||||
} else if (newFormData[question.for]?.includes(option.value)) {
|
...formData,
|
||||||
newFormData[question.for] = newFormData[question.for]?.filter(function(item) {
|
};
|
||||||
return item !== option.value
|
|
||||||
}) ?? [];
|
|
||||||
} else {
|
|
||||||
newFormData[question.for] = [...newFormData[question.for] ?? [], option.value];
|
|
||||||
}
|
|
||||||
|
|
||||||
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) {
|
updateFormData(newFormData);
|
||||||
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>
|
|
||||||
)
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
if (dontCare) {
|
||||||
<div className="h-full flex flex-col justify-between text-center">
|
return (
|
||||||
<section className="mt-4">
|
<button
|
||||||
<h2 className="text-neutral-400 italic text-xl">{question.header}</h2>
|
disabled
|
||||||
<h1 className="text-neutral-900 font-bold text-xl">{question.question}</h1>
|
type="button"
|
||||||
<h3 className="text-neutral-600 text-sm">Select all that apply from below</h3>
|
onClick={handleToggle}
|
||||||
</section>
|
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">
|
return (
|
||||||
{question.options.map((option, index) => {
|
<button
|
||||||
return (
|
type="button"
|
||||||
<OptionToggle key={index} option={option} />
|
onClick={handleToggle}
|
||||||
);
|
className={
|
||||||
})}
|
"mx-auto w-64 rounded-lg border border-neutral-400 py-2 shadow " +
|
||||||
</section>
|
(selected ? "bg-amber-200" : "bg-white")
|
||||||
{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
|
{option.label}
|
||||||
</button>
|
</button>
|
||||||
: undefined}
|
);
|
||||||
<div className="mb-4">
|
};
|
||||||
<AdvanceButtons />
|
|
||||||
</div>
|
useEffect(() => {
|
||||||
</div>
|
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
|
* Wrapper for last and current page to enable the transition animation
|
||||||
*/
|
*/
|
||||||
const PageTransition = ({backwards, lastPage, currentPage}: {
|
const PageTransition = ({
|
||||||
backwards: boolean,
|
backwards,
|
||||||
lastPage: JSX.Element | null,
|
lastPage,
|
||||||
currentPage: JSX.Element,
|
currentPage,
|
||||||
|
}: {
|
||||||
|
backwards: boolean;
|
||||||
|
lastPage: JSX.Element | null;
|
||||||
|
currentPage: JSX.Element;
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
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
|
||||||
<div className="relative w-1/2 h-full grid place-items-center">
|
className={
|
||||||
{currentPage}
|
"flex h-[500px] w-[200%] " +
|
||||||
</div>
|
(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 */}
|
{/** last page */}
|
||||||
<div className="relative w-1/2 h-full grid place-items-center">
|
<div className="relative grid h-full w-1/2 place-items-center">
|
||||||
{lastPage}
|
{lastPage}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Main guided search component.
|
* Main guided search component.
|
||||||
* Page 0 = greeting page.
|
* Page 0 = greeting page.
|
||||||
*/
|
*/
|
||||||
const GuidedSearch = ({questions}: {
|
const GuidedSearch = ({
|
||||||
questions: Question<QuestionTypes>[],
|
questions,
|
||||||
|
}: {
|
||||||
|
questions: Question<QuestionTypes>[];
|
||||||
}) => {
|
}) => {
|
||||||
const [page, setPage] = useState<number>(0);
|
const [page, setPage] = useState<number>(0);
|
||||||
const [formData, setFormData] = useState<(Record<string, QuestionTypes[]>)>({});
|
const [formData, setFormData] = useState<Record<string, QuestionTypes[]>>({});
|
||||||
const [dontCareData, setDoneCareData] = useState<(Record<string, boolean>)>({});
|
const [dontCareData, setDoneCareData] = useState<Record<string, boolean>>({});
|
||||||
const [previousPage, setPreviousPage] = useState<number | undefined>(undefined);
|
const [previousPage, setPreviousPage] = useState<number | undefined>(
|
||||||
|
undefined
|
||||||
|
);
|
||||||
|
|
||||||
const updatePage = (pageNumber: number) => {
|
const updatePage = (pageNumber: number) => {
|
||||||
setPreviousPage(page);
|
setPreviousPage(page);
|
||||||
setPage(pageNumber);
|
setPage(pageNumber);
|
||||||
};
|
};
|
||||||
|
|
||||||
const SearchPage = ({pageNumber}: {
|
const SearchPage = ({ pageNumber }: { pageNumber?: number }) => {
|
||||||
pageNumber?: number,
|
if (pageNumber === undefined) {
|
||||||
}) => {
|
return null;
|
||||||
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} />
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
if (pageNumber === 0) {
|
||||||
* Renders the hidden html form selectors
|
return <GreetingPage updatePage={updatePage} />;
|
||||||
*/
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const lastPage = <SearchPage pageNumber={previousPage} />;
|
const question = questions[pageNumber - 1];
|
||||||
const currentPage = <SearchPage pageNumber={page} />;
|
if (!question) {
|
||||||
const backwards = (previousPage ?? -1) >= page;
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const isLastPage = pageNumber === questions.length;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<QuestionPage
|
||||||
<div className="px-4 py-2 bg-gradient-to-t from-neutral-900 to-neutral-700 mx-auto overflow-hidden">
|
dontCareData={dontCareData}
|
||||||
<h1 className="text-gray-300 font-bold">Search</h1>
|
setDontCareData={setDoneCareData}
|
||||||
</div>
|
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 */}
|
const lastPage = <SearchPage pageNumber={previousPage} />;
|
||||||
<form action="/resources" id='search-form' className="hidden">
|
const currentPage = <SearchPage pageNumber={page} />;
|
||||||
{questions.map((question, index) => {
|
const backwards = (previousPage ?? -1) >= page;
|
||||||
return <HTMLQuestion key={index} question={question} />
|
|
||||||
})}
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
return (
|
||||||
GuidedSearch,
|
<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.
|
// Since NextAuth.js automatically uses the VERCEL_URL if present.
|
||||||
(str) => process.env.VERCEL_URL ?? str,
|
(str) => process.env.VERCEL_URL ?? str,
|
||||||
// VERCEL_URL doesn't include `https` so it cant be validated as a URL
|
// 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
|
// Add `.min(1) on ID and SECRET if you want to make sure they're not empty
|
||||||
DISCORD_CLIENT_ID: z.string(),
|
DISCORD_CLIENT_ID: z.string(),
|
||||||
@ -70,7 +70,7 @@ if (!!process.env.SKIP_ENV_VALIDATION == false) {
|
|||||||
if (parsed.success === false) {
|
if (parsed.success === false) {
|
||||||
console.error(
|
console.error(
|
||||||
"❌ Invalid environment variables:",
|
"❌ Invalid environment variables:",
|
||||||
parsed.error.flatten().fieldErrors,
|
parsed.error.flatten().fieldErrors
|
||||||
);
|
);
|
||||||
throw new Error("Invalid environment variables");
|
throw new Error("Invalid environment variables");
|
||||||
}
|
}
|
||||||
@ -84,7 +84,7 @@ if (!!process.env.SKIP_ENV_VALIDATION == false) {
|
|||||||
throw new Error(
|
throw new Error(
|
||||||
process.env.NODE_ENV === "production"
|
process.env.NODE_ENV === "production"
|
||||||
? "❌ Attempted to access a server-side environment variable on the client"
|
? "❌ 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)];
|
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}>
|
<SessionProvider session={session}>
|
||||||
<Head>
|
<Head>
|
||||||
<title>ATR</title>
|
<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" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
|
|||||||
@ -1,108 +1,139 @@
|
|||||||
import { type NextPage } from "next/types";
|
import { type NextPage } from "next/types";
|
||||||
import Image from 'next/image';
|
import Image from "next/image";
|
||||||
import { HandRaisedIcon } from '@heroicons/react/24/solid';
|
import { HandRaisedIcon } from "@heroicons/react/24/solid";
|
||||||
import Footer from "~/components/Footer";
|
import Footer from "~/components/Footer";
|
||||||
import Header from "~/components/Header";
|
import Header from "~/components/Header";
|
||||||
|
|
||||||
type Position = "left" | "right";
|
type Position = "left" | "right";
|
||||||
interface Biography {
|
interface Biography {
|
||||||
name: string;
|
name: string;
|
||||||
bodyName: string;
|
bodyName: string;
|
||||||
title: string;
|
title: string;
|
||||||
body: string;
|
body: string;
|
||||||
img: string;
|
img: string;
|
||||||
position: Position;
|
position: Position;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Biopgraphy = ({bodyName, name, title, body, img, position}: Biography) => {
|
const Biopgraphy = ({
|
||||||
return (
|
bodyName,
|
||||||
<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")}>
|
name,
|
||||||
<div className="space-x-8 flex flex-row mb-2 items-center">
|
title,
|
||||||
<Image src={img} alt={`${name} profile`} width={128} height={128} className="shadow-md shadow-neutral-600/50 rounded-lg border border-neutral-900" />
|
body,
|
||||||
<div className="">
|
img,
|
||||||
<h1 className="text-2xl font-bold">{name}</h1>
|
position,
|
||||||
<h2 className="text-neutral-600 italic">{title}</h2>
|
}: Biography) => {
|
||||||
</div>
|
return (
|
||||||
</div>
|
<section
|
||||||
<div className="col-span-2 p-2 bg-white rounded-lg border border-neutral-900">
|
className={
|
||||||
{bodyName} {body}
|
"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" +
|
||||||
</div>
|
(position === "right" ? " lg:col-start-2 lg:rotate-3" : " lg:-rotate-3")
|
||||||
</section>
|
}
|
||||||
);
|
>
|
||||||
|
<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[] = [
|
const biographies: Biography[] = [
|
||||||
{
|
{
|
||||||
name: "Olivia Adamson",
|
name: "Olivia Adamson",
|
||||||
bodyName: "Olivia",
|
bodyName: "Olivia",
|
||||||
title: "B.A",
|
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.",
|
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",
|
img: "/profiles/olivia-adamson.jpeg",
|
||||||
position: "right",
|
position: "right",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Dr. Eun Kyung (Julie) Jeon",
|
name: "Dr. Eun Kyung (Julie) Jeon",
|
||||||
bodyName: "Julie",
|
bodyName: "Julie",
|
||||||
title: "Au.D., Ph.D.",
|
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.",
|
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",
|
img: "/profiles/jeon-eunkyung.jpg",
|
||||||
position: "left",
|
position: "left",
|
||||||
}
|
},
|
||||||
]
|
];
|
||||||
|
|
||||||
const About: NextPage = () => {
|
const About: NextPage = () => {
|
||||||
|
return (
|
||||||
return <>
|
<>
|
||||||
<Header />
|
<Header />
|
||||||
<main>
|
<main>
|
||||||
<div style={{
|
<div
|
||||||
backgroundImage: `url("/backdrops/uiowa-aerial.jpeg")`,
|
style={{
|
||||||
backgroundPosition: `center`,
|
backgroundImage: `url("/backdrops/uiowa-aerial.jpeg")`,
|
||||||
}} className="h-96">
|
backgroundPosition: `center`,
|
||||||
<div style={{
|
}}
|
||||||
WebkitBackdropFilter: `blur(5px) contrast(50%)`,
|
className="h-96"
|
||||||
backdropFilter: `blur(5px) contrast(50%)`,
|
>
|
||||||
}} className="h-full w-full grid place-items-center">
|
<div
|
||||||
<div className="space-y-8">
|
style={{
|
||||||
<h1 className="mx-auto text-center font-extrabold text-5xl max-w-lg text-yellow-200">About Us</h1>
|
WebkitBackdropFilter: `blur(5px) contrast(50%)`,
|
||||||
</div>
|
backdropFilter: `blur(5px) contrast(50%)`,
|
||||||
</div>
|
}}
|
||||||
|
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>
|
||||||
<div className="w-full">
|
</div>
|
||||||
<div style={{
|
</div>
|
||||||
backgroundImage: `url("/backdrops/foot-steps.png")`,
|
<div className="w-full">
|
||||||
}} className="mx-auto max-w-7xl">
|
<div
|
||||||
<div style={{
|
style={{
|
||||||
WebkitBackdropFilter: `blur(2px)`,
|
backgroundImage: `url("/backdrops/foot-steps.png")`,
|
||||||
backdropFilter: `blur(2px)`,
|
}}
|
||||||
}} className="sm:p-8">
|
className="mx-auto max-w-7xl"
|
||||||
{/** Small screens */}
|
>
|
||||||
<div className="sm:hidden w-full bg-neutral-900 p-4 border-b-2 border-yellow-400">
|
<div
|
||||||
<h1 className="text-white text-4xl font-bold text-center">
|
style={{
|
||||||
Meet the Team
|
WebkitBackdropFilter: `blur(2px)`,
|
||||||
<HandRaisedIcon className="ml-4 rotate-12 text-yellow-200 inline w-12 animate-hand_wave animate-hand_pop"/>
|
backdropFilter: `blur(2px)`,
|
||||||
</h1>
|
}}
|
||||||
</div>
|
className="sm:p-8"
|
||||||
{/** 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">
|
{/** Small screens */}
|
||||||
<h1 className="text-white text-4xl font-bold text-center">
|
<div className="w-full border-b-2 border-yellow-400 bg-neutral-900 p-4 sm:hidden">
|
||||||
Meet the Team
|
<h1 className="text-center text-4xl font-bold text-white">
|
||||||
<HandRaisedIcon className="ml-4 rotate-12 text-yellow-200 inline w-12 animate-hand_wave"/>
|
Meet the Team
|
||||||
</h1>
|
<HandRaisedIcon className="animate-hand_pop ml-4 inline w-12 rotate-12 animate-hand_wave text-yellow-200" />
|
||||||
</div>
|
</h1>
|
||||||
<div className="sm:my-16 grid grid-cols-2 lg:grid-cols-3 sm:mt-4 lg:space-y-24 sm:space-y-12">
|
</div>
|
||||||
{biographies.map((biography, index) => {
|
{/** Large screens */}
|
||||||
return (
|
<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">
|
||||||
<Biopgraphy key={index} {...biography} />
|
<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" />
|
||||||
</div>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
<Footer />
|
</div>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
</>
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default About
|
export default About;
|
||||||
|
|||||||
@ -12,7 +12,7 @@ export default createNextApiHandler({
|
|||||||
env.NODE_ENV === "development"
|
env.NODE_ENV === "development"
|
||||||
? ({ path, error }) => {
|
? ({ path, error }) => {
|
||||||
console.error(
|
console.error(
|
||||||
`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
|
`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
: undefined,
|
: undefined,
|
||||||
|
|||||||
@ -3,14 +3,13 @@ import Footer from "~/components/Footer";
|
|||||||
import Header from "~/components/Header";
|
import Header from "~/components/Header";
|
||||||
|
|
||||||
const Contact: NextPage = () => {
|
const Contact: NextPage = () => {
|
||||||
|
return (
|
||||||
return <>
|
<>
|
||||||
<Header />
|
<Header />
|
||||||
<main>
|
<main></main>
|
||||||
|
<Footer />
|
||||||
</main>
|
|
||||||
<Footer />
|
|
||||||
</>
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Contact
|
export default Contact;
|
||||||
|
|||||||
@ -1,104 +1,161 @@
|
|||||||
import { type NextPage } from "next";
|
import { type NextPage } from "next";
|
||||||
import Link from "next/link";
|
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 Footer from "~/components/Footer";
|
||||||
import Header from "~/components/Header";
|
import Header from "~/components/Header";
|
||||||
|
|
||||||
const TextLink = ({href, children}: {
|
const TextLink = ({ href, children }: { href: string; children: string }) => {
|
||||||
href: string,
|
|
||||||
children: string,
|
|
||||||
}) => {
|
|
||||||
return (
|
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]">
|
<Link
|
||||||
{children}
|
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" />
|
<ArrowUpRightIcon className="inline-block w-4" />
|
||||||
</Link>
|
</Link>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
const Home: NextPage = () => {
|
const Home: NextPage = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="min-h-screen flex flex-col">
|
<div className="flex min-h-screen flex-col">
|
||||||
<Header />
|
<Header />
|
||||||
<div style={{
|
<div
|
||||||
backgroundImage: `url("/backdrops/patient-clinic-bg.jpeg")`,
|
style={{
|
||||||
backgroundPosition: `center`,
|
backgroundImage: `url("/backdrops/patient-clinic-bg.jpeg")`,
|
||||||
backgroundRepeat: `no-repeat`,
|
backgroundPosition: `center`,
|
||||||
}} className="grow flex flex-col">
|
backgroundRepeat: `no-repeat`,
|
||||||
<div style={{
|
}}
|
||||||
WebkitBackdropFilter: `blur(15px) contrast(50%)`,
|
className="flex grow flex-col"
|
||||||
backdropFilter: `blur(15px) contrast(50%)`,
|
>
|
||||||
}} className="grow min-h-[350px] w-full flex flex-col">
|
<div
|
||||||
<div className="space-y-8 my-auto h-min">
|
style={{
|
||||||
<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>
|
WebkitBackdropFilter: `blur(15px) contrast(50%)`,
|
||||||
<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">
|
backdropFilter: `blur(15px) contrast(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">
|
className="flex min-h-[350px] w-full grow flex-col"
|
||||||
Search for Auditory Resources
|
>
|
||||||
<ArrowUpRightIcon className="inline w-5" />
|
<div className="my-auto h-min space-y-8">
|
||||||
</Link>
|
<h1 className="mx-auto max-w-lg text-center text-4xl font-extrabold text-yellow-200">
|
||||||
</div>
|
Welcome to the Resource Center for Auditory Training!
|
||||||
</div>
|
</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>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<main>
|
<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">
|
<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="max-w-5xl flex justify-center flex-col-reverse md:flex-row md:divide-y-0 md:divide-x divide-neutral-700">
|
<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">
|
<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>
|
</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>
|
</div>
|
||||||
</section>
|
</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">
|
<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 max-w-5xl flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x divide-white mx-auto">
|
<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="grow h-full my-auto pr-auto text-4xl p-4 font-bold text-center text-yellow-200">Our Purpose</h1>
|
<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">
|
<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>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div className="max-w-5xl mx-auto p-4 sm:p-12 mb-12">
|
<div className="mx-auto mb-12 max-w-5xl p-4 sm:p-12">
|
||||||
<h1 className="font-extrabold text-2xl sm:text-4xl text-center">Want to learn more?</h1>
|
<h1 className="text-center text-2xl font-extrabold sm:text-4xl">
|
||||||
<div className="flex flex-col pt-8 space-y-6 mx-auto w-fit">
|
Want to learn more?
|
||||||
<section className="space-x-4 flex flex-row justify-between">
|
</h1>
|
||||||
<h2 className="italic text-md my-auto inline-block sm:text-lg">
|
<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
|
Learn more about the project
|
||||||
</h2>
|
</h2>
|
||||||
<span className="hidden sm:block grow border border-dashed border-neutral-400 h-[1px] my-auto" />
|
<span className="my-auto hidden h-[1px] grow border border-dashed border-neutral-400 sm:block" />
|
||||||
<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">
|
<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
|
About
|
||||||
<ArrowUpRightIcon className="inline-block align-middle w-5" />
|
<ArrowUpRightIcon className="inline-block w-5 align-middle" />
|
||||||
</Link>
|
</Link>
|
||||||
</section>
|
</section>
|
||||||
<section className="space-x-4 flex flex-row justify-between">
|
<section className="flex flex-row justify-between space-x-4">
|
||||||
<h2 className="italic text-md my-auto inline-block sm:text-lg">
|
<h2 className="text-md my-auto inline-block italic sm:text-lg">
|
||||||
Get in touch with the team
|
Get in touch with the team
|
||||||
</h2>
|
</h2>
|
||||||
<span className="hidden sm:block grow border border-dashed border-neutral-400 h-[1px] my-auto" />
|
<span className="my-auto hidden h-[1px] grow border border-dashed border-neutral-400 sm:block" />
|
||||||
<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">
|
<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
|
Contact
|
||||||
<ArrowUpRightIcon className="inline-block align-middle w-5" />
|
<ArrowUpRightIcon className="inline-block w-5 align-middle" />
|
||||||
</Link>
|
</Link>
|
||||||
</section>
|
</section>
|
||||||
<section className="space-x-4 flex flex-row justify-between">
|
<section className="flex flex-row justify-between space-x-4">
|
||||||
<h2 className="italic text-md my-auto inline-block sm:text-lg">
|
<h2 className="text-md my-auto inline-block italic sm:text-lg">
|
||||||
Tell us how we’re doing!
|
Tell us how we’re doing!
|
||||||
</h2>
|
</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
|
Give Feedback
|
||||||
<ArrowUpRightIcon className="inline align-middle w-5" />
|
<ArrowUpRightIcon className="inline w-5 align-middle" />
|
||||||
</a>
|
</a>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<Footer/>
|
<Footer />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,35 +1,35 @@
|
|||||||
import { type InferGetStaticPropsType, type GetStaticPropsContext } from "next";
|
import { type InferGetStaticPropsType, type GetStaticPropsContext } from "next";
|
||||||
import { GlobeAltIcon, DocumentIcon } from '@heroicons/react/24/solid';
|
import { GlobeAltIcon, DocumentIcon } from "@heroicons/react/24/solid";
|
||||||
import { createProxySSGHelpers } from '@trpc/react-query/ssg';
|
import { createProxySSGHelpers } from "@trpc/react-query/ssg";
|
||||||
import { appRouter } from "~/server/api/root";
|
import { appRouter } from "~/server/api/root";
|
||||||
import { prisma } from "~/server/db";
|
import { prisma } from "~/server/db";
|
||||||
import { api } from "~/utils/api";
|
import { api } from "~/utils/api";
|
||||||
import { ResourceDescription, ResourceInfo } from "~/components/ResourceTable";
|
import { ResourceDescription, ResourceInfo } from "~/components/ResourceTable";
|
||||||
import { type PlatformLink } from "@prisma/client";
|
import { type PlatformLink } from "@prisma/client";
|
||||||
import Image from 'next/image';
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import Footer from "~/components/Footer";
|
import Footer from "~/components/Footer";
|
||||||
import Header from "~/components/Header";
|
import Header from "~/components/Header";
|
||||||
|
|
||||||
export const getStaticPaths = async () => {
|
export const getStaticPaths = async () => {
|
||||||
const resources = (await prisma.auditoryResource.findMany({
|
const resources = await prisma.auditoryResource.findMany({
|
||||||
select: {
|
select: {
|
||||||
id: true,
|
id: true,
|
||||||
}
|
},
|
||||||
}));
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
paths: resources.map((resource) => ({
|
paths: resources.map((resource) => ({
|
||||||
params: {
|
params: {
|
||||||
id: resource.id,
|
id: resource.id,
|
||||||
}
|
},
|
||||||
})),
|
})),
|
||||||
fallback: 'blocking',
|
fallback: "blocking",
|
||||||
}
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export async function getStaticProps(
|
export async function getStaticProps(
|
||||||
context: GetStaticPropsContext<{ id: string }>,
|
context: GetStaticPropsContext<{ id: string }>
|
||||||
) {
|
) {
|
||||||
const ssg = createProxySSGHelpers({
|
const ssg = createProxySSGHelpers({
|
||||||
router: appRouter,
|
router: appRouter,
|
||||||
@ -40,7 +40,7 @@ export async function getStaticProps(
|
|||||||
});
|
});
|
||||||
const id = context.params?.id as string;
|
const id = context.params?.id as string;
|
||||||
|
|
||||||
await ssg.auditoryResource.byId.prefetch({id});
|
await ssg.auditoryResource.byId.prefetch({ id });
|
||||||
|
|
||||||
return {
|
return {
|
||||||
props: {
|
props: {
|
||||||
@ -51,97 +51,120 @@ export async function getStaticProps(
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const PlatformLinkButton = ({platformLink}: {platformLink: PlatformLink}) => {
|
const PlatformLinkButton = ({
|
||||||
|
platformLink,
|
||||||
|
}: {
|
||||||
|
platformLink: PlatformLink;
|
||||||
|
}) => {
|
||||||
const Inner = () => {
|
const Inner = () => {
|
||||||
switch (platformLink.platform) {
|
switch (platformLink.platform) {
|
||||||
case "APP_ANDROID": {
|
case "APP_ANDROID": {
|
||||||
return (
|
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": {
|
case "APP_IOS": {
|
||||||
return (
|
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": {
|
case "PDF": {
|
||||||
return (
|
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" />
|
<DocumentIcon className="w-6" />
|
||||||
<span className="font-bold text-sm my-auto">
|
<span className="my-auto text-sm font-bold">Document</span>
|
||||||
Document
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
case "WEBSITE": {
|
case "WEBSITE": {
|
||||||
return (
|
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" />
|
<GlobeAltIcon className="w-6" />
|
||||||
<span className="font-bold text-sm my-auto">
|
<span className="my-auto text-sm font-bold">Website</span>
|
||||||
Website
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link href={platformLink.link} target="_blank" rel="noopener noreferrer">
|
<Link href={platformLink.link} target="_blank" rel="noopener noreferrer">
|
||||||
<Inner />
|
<Inner />
|
||||||
</Link>
|
</Link>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
const DownloadButtons = ({platformLinks}: {platformLinks: PlatformLink[]}) => {
|
const DownloadButtons = ({
|
||||||
|
platformLinks,
|
||||||
|
}: {
|
||||||
|
platformLinks: PlatformLink[];
|
||||||
|
}) => {
|
||||||
const buttons = platformLinks.map((paltformLink, index) => {
|
const buttons = platformLinks.map((paltformLink, index) => {
|
||||||
return (
|
return <PlatformLinkButton key={index} platformLink={paltformLink} />;
|
||||||
<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 { id } = props;
|
||||||
const resourceQuery = api.auditoryResource.byId.useQuery({ id });
|
const resourceQuery = api.auditoryResource.byId.useQuery({ id });
|
||||||
|
|
||||||
if (!resourceQuery.data) {
|
if (!resourceQuery.data) {
|
||||||
return <>
|
return <></>;
|
||||||
</>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return <>
|
return (
|
||||||
<div className="min-h-screen">
|
<>
|
||||||
<Header />
|
<div className="min-h-screen">
|
||||||
<main className="mb-12">
|
<Header />
|
||||||
<div className="flex py-4 flex-col flex-col-reverse sm:flex-row divide-x max-w-2xl mx-auto">
|
<main className="mb-12">
|
||||||
<div className="text-lg flex flex-col justify-end font-bold my-5 mr-4">
|
<div className="mx-auto flex max-w-2xl flex-col flex-col-reverse divide-x py-4 sm:flex-row">
|
||||||
<div className="mx-4">
|
<div className="my-5 mr-4 flex flex-col justify-end text-lg font-bold">
|
||||||
<h1 className="border-b mb-2 border-neutral-400">Links</h1>
|
<div className="mx-4">
|
||||||
<DownloadButtons platformLinks={resourceQuery.data.platform_links} />
|
<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>
|
</div>
|
||||||
<div className="flex pb-5 flex-col justify-left">
|
</main>
|
||||||
<ResourceInfo resource={resourceQuery.data} />
|
<Footer />
|
||||||
<div className="mx-4 text-left border border-neutral-400 rounded-xl overflow-hidden bg-neutral-200 shadow">
|
</div>
|
||||||
<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>
|
|
||||||
</>
|
|
||||||
};
|
};
|
||||||
|
|
||||||
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 Link from "next/link";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import ResourceTable from "~/components/ResourceTable";
|
import ResourceTable from "~/components/ResourceTable";
|
||||||
@ -8,22 +8,22 @@ import Footer from "~/components/Footer";
|
|||||||
import Header from "~/components/Header";
|
import Header from "~/components/Header";
|
||||||
|
|
||||||
const Resources = () => {
|
const Resources = () => {
|
||||||
const router = useRouter()
|
const router = useRouter();
|
||||||
|
|
||||||
const queryData = parseQueryData(router.query);
|
const queryData = parseQueryData(router.query);
|
||||||
const currentPage = queryData.page;
|
const currentPage = queryData.page;
|
||||||
|
|
||||||
const resourceQuery = api.auditoryResource.search.useQuery({
|
const resourceQuery = api.auditoryResource.search.useQuery({
|
||||||
skip: (queryData.page - 1) * queryData.perPage,
|
skip: (queryData.page - 1) * queryData.perPage,
|
||||||
take: queryData.perPage,
|
take: queryData.perPage,
|
||||||
ages: queryData.age,
|
ages: queryData.age,
|
||||||
platforms: queryData.platforms,
|
platforms: queryData.platforms,
|
||||||
skill_levels: queryData.skill_levels,
|
skill_levels: queryData.skill_levels,
|
||||||
skills: queryData.skills,
|
skills: queryData.skills,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!resourceQuery.data) {
|
if (!resourceQuery.data) {
|
||||||
return <></>
|
return <></>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const totalPages = Math.ceil(resourceQuery.data.count / queryData.perPage);
|
const totalPages = Math.ceil(resourceQuery.data.count / queryData.perPage);
|
||||||
@ -31,24 +31,35 @@ const Resources = () => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header />
|
<Header />
|
||||||
<main className="my-6 md:px-4 max-w-6xl mx-auto">
|
<main className="my-6 mx-auto max-w-6xl md:px-4">
|
||||||
<div className="sm:mb-4 mb-2 sm:p-4 p-2 space-y-2">
|
<div className="mb-2 space-y-2 p-2 sm:mb-4 sm:p-4">
|
||||||
<h1 className="text-3xl font-bold">All Resources</h1>
|
<h1 className="text-3xl font-bold">All Resources</h1>
|
||||||
<div className="">
|
<div className="">
|
||||||
<p className="inline">Fill out the </p>
|
<p className="inline">Fill out the </p>
|
||||||
<Link href="/resources/search"
|
<Link
|
||||||
className="hover:bg-neutral-900 hover:text-white inline rounded-lg bg-neutral-200 border border-neutral-800 px-2 py-[4px]">
|
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
|
search form
|
||||||
<LinkIcon className="w-4 inline" />
|
<LinkIcon className="inline w-4" />
|
||||||
</Link>
|
</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>
|
||||||
</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>
|
</main>
|
||||||
<Footer />
|
<Footer />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Resources;
|
export default Resources;
|
||||||
|
|||||||
@ -1,121 +1,127 @@
|
|||||||
import Footer from "~/components/Footer";
|
import Footer from "~/components/Footer";
|
||||||
import Header from "~/components/Header";
|
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>[] = [
|
const questions: Question<QuestionTypes>[] = [
|
||||||
{
|
{
|
||||||
for: "ages",
|
for: "ages",
|
||||||
header: "Age of Patient",
|
header: "Age of Patient",
|
||||||
question: "How old is the patient?",
|
question: "How old is the patient?",
|
||||||
maxSelect: 1,
|
maxSelect: 1,
|
||||||
optional: true,
|
optional: true,
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
label: "Child (0-10)",
|
label: "Child (0-10)",
|
||||||
value: "0-9",
|
value: "0-9",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Teen (10-20)",
|
label: "Teen (10-20)",
|
||||||
value: "10-20",
|
value: "10-20",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Adult (21+)",
|
label: "Adult (21+)",
|
||||||
value: "21-100",
|
value: "21-100",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
for: "platforms",
|
for: "platforms",
|
||||||
header: "Desired Platforms",
|
header: "Desired Platforms",
|
||||||
question: "What platform(s) does the resource need to be on?",
|
question: "What platform(s) does the resource need to be on?",
|
||||||
optional: true,
|
optional: true,
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
label: "Apple (iOS)",
|
label: "Apple (iOS)",
|
||||||
value: "APP_IOS",
|
value: "APP_IOS",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Android",
|
label: "Android",
|
||||||
value: "APP_ANDROID",
|
value: "APP_ANDROID",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Web-Based",
|
label: "Web-Based",
|
||||||
value: "WEBSITE",
|
value: "WEBSITE",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "PDF (printable)",
|
label: "PDF (printable)",
|
||||||
value: "PDF",
|
value: "PDF",
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
for: "skills",
|
for: "skills",
|
||||||
header: "Skills Practiced",
|
header: "Skills Practiced",
|
||||||
question: "What skill(s) would you like the resource to cover?",
|
question: "What skill(s) would you like the resource to cover?",
|
||||||
optional: true,
|
optional: true,
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
label: "Phonemes",
|
label: "Phonemes",
|
||||||
value: "PHONEMES",
|
value: "PHONEMES",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Words",
|
label: "Words",
|
||||||
value: "WORDS",
|
value: "WORDS",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Sentence",
|
label: "Sentence",
|
||||||
value: "SENTENCES",
|
value: "SENTENCES",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Discourse/Complex",
|
label: "Discourse/Complex",
|
||||||
value: "DISCOURSE",
|
value: "DISCOURSE",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Music",
|
label: "Music",
|
||||||
value: "MUSIC",
|
value: "MUSIC",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Environmental Sounds",
|
label: "Environmental Sounds",
|
||||||
value: "ENVIRONMENT",
|
value: "ENVIRONMENT",
|
||||||
},
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
for: "skill_levels",
|
for: "skill_levels",
|
||||||
header: "Skill Level",
|
header: "Skill Level",
|
||||||
question: "What skill level(s) should the resource have?",
|
question: "What skill level(s) should the resource have?",
|
||||||
optional: true,
|
optional: true,
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
label: "Beginner",
|
label: "Beginner",
|
||||||
value: "BEGINNER",
|
value: "BEGINNER",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Intermediate",
|
label: "Intermediate",
|
||||||
value: "INTERMEDIATE",
|
value: "INTERMEDIATE",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Advanced",
|
label: "Advanced",
|
||||||
value: "ADVANCED",
|
value: "ADVANCED",
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
]
|
];
|
||||||
|
|
||||||
const SearchPage = () => {
|
const SearchPage = () => {
|
||||||
return <>
|
return (
|
||||||
<div className="max-h-screen overflow-y-scroll snap snap-y snap-mandatory">
|
<>
|
||||||
<div className="snap-start snap-always">
|
<div className="snap max-h-screen snap-y snap-mandatory overflow-y-scroll">
|
||||||
<Header />
|
<div className="snap-start snap-always">
|
||||||
</div>
|
<Header />
|
||||||
<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>
|
|
||||||
</div>
|
</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 { z } from "zod";
|
||||||
|
|
||||||
import {
|
import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
|
||||||
createTRPCRouter, publicProcedure,
|
|
||||||
} from "~/server/api/trpc";
|
|
||||||
|
|
||||||
export const auditoryResourceRouter = createTRPCRouter({
|
export const auditoryResourceRouter = createTRPCRouter({
|
||||||
byId: publicProcedure
|
byId: publicProcedure
|
||||||
@ -12,29 +15,33 @@ export const auditoryResourceRouter = createTRPCRouter({
|
|||||||
const resource = await ctx.prisma.auditoryResource.findUnique({
|
const resource = await ctx.prisma.auditoryResource.findUnique({
|
||||||
where: {
|
where: {
|
||||||
id: input.id,
|
id: input.id,
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
return { ...resource } as AuditoryResource;
|
return { ...resource } as AuditoryResource;
|
||||||
}),
|
}),
|
||||||
|
|
||||||
getAll: publicProcedure.query(({ ctx }) => {
|
getAll: publicProcedure.query(({ ctx }) => {
|
||||||
return ctx.prisma.auditoryResource.findMany();
|
return ctx.prisma.auditoryResource.findMany();
|
||||||
}),
|
}),
|
||||||
|
|
||||||
search: publicProcedure
|
search: publicProcedure
|
||||||
.input(z.object({
|
.input(
|
||||||
take: z.number().int(),
|
z.object({
|
||||||
skip: z.number().int(),
|
take: z.number().int(),
|
||||||
ages: z.object({
|
skip: z.number().int(),
|
||||||
min: z.number().int(),
|
ages: z
|
||||||
max: z.number().int(),
|
.object({
|
||||||
}).optional(),
|
min: z.number().int(),
|
||||||
platforms: z.nativeEnum(Platform).array().optional(),
|
max: z.number().int(),
|
||||||
skill_levels: z.nativeEnum(SkillLevel).array().optional(),
|
})
|
||||||
skills: z.nativeEnum(Skill).array().optional(),
|
.optional(),
|
||||||
}))
|
platforms: z.nativeEnum(Platform).array().optional(),
|
||||||
.query(async ({ input, ctx}) => {
|
skill_levels: z.nativeEnum(SkillLevel).array().optional(),
|
||||||
|
skills: z.nativeEnum(Skill).array().optional(),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.query(async ({ input, ctx }) => {
|
||||||
const search = {
|
const search = {
|
||||||
ages: {
|
ages: {
|
||||||
is: {
|
is: {
|
||||||
@ -43,8 +50,8 @@ export const auditoryResourceRouter = createTRPCRouter({
|
|||||||
},
|
},
|
||||||
max: {
|
max: {
|
||||||
gte: input.ages?.max,
|
gte: input.ages?.max,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
skill_levels: {
|
skill_levels: {
|
||||||
hasEvery: input.skill_levels ?? [],
|
hasEvery: input.skill_levels ?? [],
|
||||||
@ -56,10 +63,10 @@ export const auditoryResourceRouter = createTRPCRouter({
|
|||||||
some: {
|
some: {
|
||||||
platform: {
|
platform: {
|
||||||
in: input.platforms,
|
in: input.platforms,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
|
|
||||||
const [count, resources] = await ctx.prisma.$transaction([
|
const [count, resources] = await ctx.prisma.$transaction([
|
||||||
ctx.prisma.auditoryResource.count({
|
ctx.prisma.auditoryResource.count({
|
||||||
@ -69,12 +76,12 @@ export const auditoryResourceRouter = createTRPCRouter({
|
|||||||
skip: input.skip,
|
skip: input.skip,
|
||||||
take: input.take,
|
take: input.take,
|
||||||
where: search,
|
where: search,
|
||||||
})
|
}),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
count,
|
count,
|
||||||
resources,
|
resources,
|
||||||
}
|
};
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|||||||
@ -4,48 +4,48 @@ import { type Skill, type Platform } from "@prisma/client";
|
|||||||
* Takes a platform enum and translates it to readable form.
|
* Takes a platform enum and translates it to readable form.
|
||||||
*/
|
*/
|
||||||
export const translateEnumPlatform = (value: Platform) => {
|
export const translateEnumPlatform = (value: Platform) => {
|
||||||
switch(value) {
|
switch (value) {
|
||||||
case "APP_ANDROID": {
|
case "APP_ANDROID": {
|
||||||
return "Android";
|
return "Android";
|
||||||
}
|
|
||||||
case "APP_IOS": {
|
|
||||||
return "Apple";
|
|
||||||
}
|
|
||||||
case "PDF": {
|
|
||||||
return "PDF Document";
|
|
||||||
}
|
|
||||||
case "WEBSITE": {
|
|
||||||
return "Website"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
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
|
* Takes a skill enum value and translates it to human text
|
||||||
* @param value
|
* @param value
|
||||||
*/
|
*/
|
||||||
export const translateEnumSkill = (value: Skill) => {
|
export const translateEnumSkill = (value: Skill) => {
|
||||||
switch(value) {
|
switch (value) {
|
||||||
case "ENVIRONMENT": {
|
case "ENVIRONMENT": {
|
||||||
return "Environmental Sounds";
|
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"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
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";
|
import { type ParsedUrlQuery } from "querystring";
|
||||||
|
|
||||||
export interface ViewDetails {
|
export interface ViewDetails {
|
||||||
page: number;
|
page: number;
|
||||||
perPage: number;
|
perPage: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface SearchQuery {
|
export interface SearchQuery {
|
||||||
age?: RangeInput,
|
age?: RangeInput;
|
||||||
platforms?: Platform[],
|
platforms?: Platform[];
|
||||||
skill_levels?: SkillLevel[],
|
skill_levels?: SkillLevel[];
|
||||||
skills?: Skill[],
|
skills?: Skill[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export type ParsedQueryData = SearchQuery & ViewDetails;
|
export type ParsedQueryData = SearchQuery & ViewDetails;
|
||||||
|
|
||||||
export const parseQueryData = (query: ParsedUrlQuery): ParsedQueryData => {
|
export const parseQueryData = (query: ParsedUrlQuery): ParsedQueryData => {
|
||||||
const view = {
|
const view = {
|
||||||
page: Number(query["page"] ?? 1),
|
page: Number(query["page"] ?? 1),
|
||||||
perPage: Number(query["perPage"] ?? 10),
|
perPage: Number(query["perPage"] ?? 10),
|
||||||
}
|
};
|
||||||
const filter: SearchQuery = {};
|
const filter: SearchQuery = {};
|
||||||
|
|
||||||
if (query["ages"]) {
|
if (query["ages"]) {
|
||||||
const ages: number[] = [];
|
const ages: number[] = [];
|
||||||
|
|
||||||
if (Array.isArray(query["ages"])) {
|
if (Array.isArray(query["ages"])) {
|
||||||
const validRanges = query["ages"].filter((value) => {
|
const validRanges = query["ages"].filter((value) => {
|
||||||
return value.split("-").length == 2;
|
return value.split("-").length == 2;
|
||||||
});
|
});
|
||||||
|
|
||||||
validRanges.forEach((value) => {
|
validRanges.forEach((value) => {
|
||||||
const split = value.split("-");
|
const split = value.split("-");
|
||||||
ages.push(Number(split[0]));
|
|
||||||
ages.push(Number(split[1]));
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
const split = query["ages"].split("-");
|
|
||||||
ages.push(Number(split[0]));
|
ages.push(Number(split[0]));
|
||||||
ages.push(Number(split[1]));
|
ages.push(Number(split[1]));
|
||||||
}
|
});
|
||||||
|
} else {
|
||||||
filter.age = {
|
const split = query["ages"].split("-");
|
||||||
min: Math.min(...ages),
|
ages.push(Number(split[0]));
|
||||||
max: Math.max(...ages),
|
ages.push(Number(split[1]));
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (query["platforms"]) {
|
filter.age = {
|
||||||
if (Array.isArray(query["platforms"])) {
|
min: Math.min(...ages),
|
||||||
filter.platforms = query["platforms"] as Platform[];
|
max: Math.max(...ages),
|
||||||
} else {
|
};
|
||||||
filter.platforms = [query["platforms"]] as Platform[];
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (query["skill_levels"]) {
|
if (query["platforms"]) {
|
||||||
if (Array.isArray(query["skill_levels"])) {
|
if (Array.isArray(query["platforms"])) {
|
||||||
filter.skill_levels = query["skill_levels"] as SkillLevel[];
|
filter.platforms = query["platforms"] as Platform[];
|
||||||
} else {
|
} else {
|
||||||
filter.skill_levels = [query["skill_levels"]] as SkillLevel[];
|
filter.platforms = [query["platforms"]] as Platform[];
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (query["skills"]) {
|
if (query["skill_levels"]) {
|
||||||
if (Array.isArray(query["skills"])) {
|
if (Array.isArray(query["skill_levels"])) {
|
||||||
filter.skills = query["skills"] as Skill[];
|
filter.skill_levels = query["skill_levels"] as SkillLevel[];
|
||||||
} else {
|
} else {
|
||||||
filter.skills = [query["skills"]] as Skill[];
|
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