diff --git a/public/app-store-badge.png b/public/app-store-badge.png new file mode 100644 index 0000000..27e5336 Binary files /dev/null and b/public/app-store-badge.png differ diff --git a/public/google-play-badge.png b/public/google-play-badge.png new file mode 100644 index 0000000..2c172da Binary files /dev/null and b/public/google-play-badge.png differ diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 88e79dc..f1c2693 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -44,7 +44,7 @@ const NavBar = () => { const Header: NextPage = () => { return <> -
+
Ear listening
diff --git a/src/components/ResourceTable.tsx b/src/components/ResourceTable.tsx index 97936df..70480b8 100644 --- a/src/components/ResourceTable.tsx +++ b/src/components/ResourceTable.tsx @@ -8,49 +8,49 @@ import { type ChangeEvent, type Dispatch, type SetStateAction, useState } from ' import { ChevronDownIcon } from '@heroicons/react/24/outline'; import { type ParsedUrlQuery, type ParsedUrlQueryInput } from 'querystring'; -const ResourceEntry = ({resource}: {resource: AuditoryResource}) => { - const ResourceInfo = ({resource}: {resource: AuditoryResource}) => { - const PriceIcons = ({type}: {type: PaymentType}) => { - switch(type) { - case "FREE": { - return ( -
- - free - -
- ) - } - case "SUBSCRIPTION_MONTHLY": { -
+export const ResourceInfo = ({resource, showMoreInfo}: {resource: AuditoryResource, showMoreInfo?: boolean}) => { + const PriceIcons = ({type}: {type: PaymentType}) => { + switch(type) { + case "FREE": { + return ( +
+ + free + +
+ ) + } + case "SUBSCRIPTION_MONTHLY": { +
+ + +
+ } + case "SUBSCRIPTION_WEEKLY": { + return ( +
- } - case "SUBSCRIPTION_WEEKLY": { - return ( -
- - -
- ) - } + ) } } - - const PlatformInfo = ({platformLinks}: {platformLinks: PlatformLink[]}) => { - const platformsStr = platformLinks.map((platformLink) => { - return translateEnumPlatform(platformLink.platform); - }).join(', '); - - return ( -

{platformsStr}

- ) - } + } + + const PlatformInfo = ({platformLinks}: {platformLinks: PlatformLink[]}) => { + const platformsStr = platformLinks.map((platformLink) => { + return translateEnumPlatform(platformLink.platform); + }).join(', '); return ( -
-
+

{platformsStr}

+ ) + } + + return ( +
+
+ {showMoreInfo ?
{`${resource.name} @@ -58,21 +58,27 @@ const ResourceEntry = ({resource}: {resource: AuditoryResource}) => { className="block bg-neutral-900 hover:bg-neutral-500 border border-neutral-900 text-center py-[1px] text-white rounded-lg"> more info -
- -
-
-
-

{resource.manufacturer}

-

{resource.name}

- -
+ + : +
+ {`${resource.name} +
+ } +
+
+
+

{resource.manufacturer}

+

{resource.name}

+ +
- ) - } - +
+ ) +} + +const ResourceEntry = ({resource}: {resource: AuditoryResource}) => { const ResourceDescription = ({description}: {description: string}) => { return (
@@ -136,7 +142,7 @@ const ResourceEntry = ({resource}: {resource: AuditoryResource}) => { return ( - + diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 4f17496..446c291 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -12,7 +12,6 @@ const Home: NextPage = () => {
-

Nothing yet

diff --git a/src/pages/resources/[id].tsx b/src/pages/resources/[id].tsx index fac9c90..63bffa0 100644 --- a/src/pages/resources/[id].tsx +++ b/src/pages/resources/[id].tsx @@ -1,17 +1,20 @@ import { type InferGetStaticPropsType, type GetStaticPropsContext } from "next"; +import { GlobeAltIcon } from '@heroicons/react/24/solid'; import { createProxySSGHelpers } from '@trpc/react-query/ssg'; import { appRouter } from "~/server/api/root"; import { prisma } from "~/server/db"; import { api } from "~/utils/api"; +import { ResourceInfo } from "~/components/ResourceTable"; +import { type PlatformLink } from "@prisma/client"; +import Image from 'next/image'; +import Link from "next/link"; export const getStaticPaths = async () => { - //const amountPerPage = 10; const resources = (await prisma.auditoryResource.findMany({ select: { id: true, } })); - //const pages = Math.ceil(objectCount / amountPerPage); return { paths: resources.map((resource) => ({ @@ -46,13 +49,84 @@ export async function getStaticProps( }; } +const PlatformLinkButton = ({platformLink}: {platformLink: PlatformLink}) => { + switch (platformLink.platform) { + case "APP_ANDROID": { + return ( + + + {`Download + + + ) + } + case "APP_IOS": { + return ( + + {`Download + + ) + } + case "PDF": { + return ( + +
+ + + Website + +
+ + ) + } + case "WEBSITE": { + return <>; + } + } +} + +const DownloadButtons = ({platformLinks}: {platformLinks: PlatformLink[]}) => { + const buttons = platformLinks.map((paltformLink, index) => { + return ( + + ) + }); + + return ( +
+ {buttons} +
+ ) +} + const ResourceViewPage = (props: InferGetStaticPropsType) => { const { id } = props; const resourceQuery = api.auditoryResource.byId.useQuery({ id }); + if (!resourceQuery.data) { + return <> + + } + return <> -
- {resourceQuery.data?.name ?? 'loading..'} +
+
+
+

Links

+ +
+
+
+ +
+

+ {resourceQuery.data.description} +

+
+
+ Ages {resourceQuery.data.ages.min}{resourceQuery.data.ages.max >= 100 ? "+" : `-${resourceQuery.data.ages.max}`} +
+
}; diff --git a/src/pages/resources/index.tsx b/src/pages/resources/index.tsx index cfe8f69..7bbbaca 100644 --- a/src/pages/resources/index.tsx +++ b/src/pages/resources/index.tsx @@ -4,26 +4,6 @@ import ResourceTable from "~/components/ResourceTable"; import { api } from "~/utils/api"; import { parseQueryData } from "~/utils/parseSearchForm"; -/* -export async function getStaticProps() { - const ssg = createProxySSGHelpers({ - router: appRouter, - ctx: { - prisma, - session: null, - }, - }); - await ssg.auditoryResource.getAll.prefetch(); - - return { - props: { - trpcState: ssg.dehydrate(), - }, - revalidate: 1, - }; -} -*/ - const Resources = () => { const router = useRouter() diff --git a/src/server/api/routers/auditoryResources.ts b/src/server/api/routers/auditoryResources.ts index df88620..20a28b3 100644 --- a/src/server/api/routers/auditoryResources.ts +++ b/src/server/api/routers/auditoryResources.ts @@ -1,4 +1,4 @@ -import { SkillLevel, Skill, Platform } from "@prisma/client"; +import { SkillLevel, Skill, Platform, AuditoryResource } from "@prisma/client"; import { z } from "zod"; import { @@ -15,7 +15,7 @@ export const auditoryResourceRouter = createTRPCRouter({ } }); - return { ...resource }; + return { ...resource } as AuditoryResource; }), getAll: publicProcedure.query(({ ctx }) => {