fix icon issue
This commit is contained in:
Brandon Egger
parent
c118a1a55c
commit
6802f5673d
@ -1,5 +1,5 @@
|
||||
Name,Icon,Platforms,Ages,Skills,Skill Level,Manufacturer,Payment Type,Download Link,Description
|
||||
Word Success,/resource_logos/word_success.png,APP_IOS;APP_ANDROID,10-100,WORDS;SENTENCES;MUSIC,BEGINNER;INTERMEDIATE,"Advanced Bionics, LLC",SUBSCRIPTION_WEEKLY,,"App with four different exercises that range from selecting the spoken word alone, in a senter (either in first, medial, or last position), and with or without background noise."
|
||||
Word Success,/resource_logos/word_success.png,APP_IOS;APP_ANDROID,10-100,WORDS;SENTENCES;MUSIC,BEGINNER;INTERMEDIATE,Advanced Bionics LLC,SUBSCRIPTION_WEEKLY,,App with four different exercises that range from selecting the spoken word alone, in a senter (either in first, medial, or last position), and with or without background noise."
|
||||
AB Listening Adventures,,APP_IOS,0-10,WORDS;SENTENCES;DISCOURSE,BEGINNER;INTERMEDIATE,n/a,FREE,,N/A
|
||||
Adult CI Home-Based AT,,PDF,10-100,PHONEMES;WORDS,BEGINNER;INTERMEDIATE;ADVANCED,n/a,FREE,,N/A
|
||||
Amptify,,WEBSITE,10-100,PHONEMES;WORDS,BEGINNER;INTERMEDIATE;ADVANCED,n/a,SUBSCRIPTION_WEEKLY,,testing
|
||||
|
||||
|
Can't render this file because it contains an unexpected character in line 2 and column 337.
|
@ -1,108 +1,133 @@
|
||||
import { type PaymentType } from '@prisma/client';
|
||||
import { type Platform, type PaymentType, type AuditoryResource, type Skill, type SkillLevel } from '@prisma/client';
|
||||
import { CurrencyDollarIcon, ArrowPathRoundedSquareIcon } from '@heroicons/react/24/solid';
|
||||
import { ClipboardDocumentListIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
|
||||
import { ClipboardDocumentListIcon } from '@heroicons/react/24/outline';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { translateEnumPlatform } from '~/utils/enumWordLut';
|
||||
|
||||
const ResourceInfo = () => {
|
||||
const PriceIcons = ({type}: {type: PaymentType}) => {
|
||||
|
||||
const ResourceEntry = ({resource}: {resource: AuditoryResource}) => {
|
||||
const ResourceInfo = ({resource}: {resource: AuditoryResource}) => {
|
||||
const PriceIcons = ({type}: {type: PaymentType}) => {
|
||||
|
||||
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 = ({platforms}: {platforms: Platform[]}) => {
|
||||
const platformsStr = platforms.map((platform) => {
|
||||
return translateEnumPlatform(platform);
|
||||
}).join(', ');
|
||||
|
||||
return (
|
||||
<p>{platformsStr}</p>
|
||||
)
|
||||
}
|
||||
|
||||
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 className="p-4 space-x-4 flex flex-row">
|
||||
<div className="h-full my-auto">
|
||||
<Link href="https://google.com">
|
||||
<div className="w-28 flex space-y-2 flex-col justify-center">
|
||||
<Image className="w-full rounded-xl drop-shadow-lg border border-neutral-400" src="/resource_logos/word_success.png" alt="Word Success logo" width={512} height={512}/>
|
||||
<span
|
||||
className="block bg-neutral-900 hover:bg-neutral-500 border border-neutral-900 text-center py-[1px] text-white rounded-lg">
|
||||
more info
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="grid place-items-center">
|
||||
<div className="">
|
||||
<h2 className="text-xs italic text-gray-600">{resource.manufacturer}</h2>
|
||||
<h1 className="font-bold text-xl">{resource.name}</h1>
|
||||
<PlatformInfo platforms={resource.platforms}/>
|
||||
<PriceIcons type={resource?.payment_options[0] ?? 'FREE'} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 space-x-4 flex flex-row">
|
||||
<div className="h-full">
|
||||
<Link href="https://google.com">
|
||||
<div className="flex space-y-2 flex-col">
|
||||
<Image className="w-28 rounded-xl drop-shadow-lg border border-neutral-400" src="/resource_logos/word_success.png" alt="Word Success logo" width={512} height={512}/>
|
||||
<span
|
||||
className="block bg-neutral-900 hover:bg-neutral-500 border border-neutral-900 text-center py-[1px] text-white rounded-lg">
|
||||
more info
|
||||
</span>
|
||||
const ResourceDescription = ({description}: {description: string}) => {
|
||||
return (
|
||||
<div className="flex flex-col p-2">
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const ResourceSkills = ({skills, skillLevels}: {skills: Skill[], skillLevels: SkillLevel[]}) => {
|
||||
const SkillRanking = ({skillLevels}: {skillLevels: SkillLevel[]}) => {
|
||||
return (
|
||||
<div className='flex flex-row space-x-2 overflow-x-auto'>
|
||||
{skillLevels.includes('BEGINNER') ?
|
||||
<div className="rounded-lg px-[3px] border-green-600 border-2 bg-green-300">
|
||||
<h2 className="text-neutral-900 italic text-sm text-right">Beginner</h2>
|
||||
</div> : undefined
|
||||
}
|
||||
{skillLevels.includes('INTERMEDIATE') ?
|
||||
<div className="rounded-lg px-[3px] border-orange-600 border-2 bg-orange-300">
|
||||
<h2 className="text-neutral-900 text-sm italic text-right">Intermediate</h2>
|
||||
</div> : undefined
|
||||
}
|
||||
{skillLevels.includes('ADVANCED') ?
|
||||
<div className="rounded-lg px-[3px] border-red-600 border-2 bg-red-300">
|
||||
<h2 className="text-neutral-900 text-sm italic text-right">Advanced</h2>
|
||||
</div> : undefined
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Skill = ({label}: {label:string}) => {
|
||||
return (
|
||||
<li className="space-x-2 flex flex-row px-2 py-[1px]">
|
||||
<ClipboardDocumentListIcon className="w-4" />
|
||||
<div className="inline">
|
||||
<h3>{label}</h3>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="grow grid place-items-center">
|
||||
<div className="">
|
||||
<h2 className="text-xs italic text-gray-600">Advanced Bionics, LLC</h2>
|
||||
<h1 className="font-bold text-xl">Word Success</h1>
|
||||
<p>Apple and Android</p>
|
||||
<PriceIcons type="SUBSCRIPTION_WEEKLY" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const ResourceDescription = () => {
|
||||
return (
|
||||
<div className="flex flex-col p-2">
|
||||
<p>App with four different exercises that range from selecting the spoken word alone, in a senter (either in first, medial, or last position), and with or without background noise.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const ResourceSkills = () => {
|
||||
const SkillRanking = () => {
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='flex flex-row space-x-2 overflow-x-auto'>
|
||||
<div className="rounded-lg px-[3px] border-green-600 border-2 bg-green-300">
|
||||
<h2 className="text-neutral-900 italic text-sm text-right">Beginner</h2>
|
||||
</div>
|
||||
<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 className="m-2 flex space-y-4 flex-col">
|
||||
<div className='rounded-lg bg-gray-100 drop-shadow border border-neutral-900'>
|
||||
<ul className="divide-y-2">
|
||||
<Skill label="Word Recognition" />
|
||||
<Skill label="Sentences" />
|
||||
<Skill label="Music" />
|
||||
</ul>
|
||||
</div>
|
||||
<SkillRanking skillLevels={skillLevels} />
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="m-2 flex space-y-4 flex-col">
|
||||
<div className='rounded-lg bg-gray-100 drop-shadow border border-neutral-900'>
|
||||
<ul className="divide-y-2">
|
||||
<Skill label="Word Recognition" />
|
||||
<Skill label="Sentences" />
|
||||
<Skill label="Music" />
|
||||
</ul>
|
||||
</div>
|
||||
<SkillRanking />
|
||||
</div>
|
||||
<tr className="divide-x-[1px] divide-slate-300">
|
||||
<td className="max-w-xs">
|
||||
<ResourceInfo resource={resource} />
|
||||
</td>
|
||||
<td className="w-1/4 align-center">
|
||||
<ResourceSkills skills={resource.skills} skillLevels={resource.skill_levels} />
|
||||
</td>
|
||||
<td className="align-top">
|
||||
<ResourceDescription description={resource.description} />
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
|
||||
const ResourceTable = () => {
|
||||
const ResourceEntry = () => {
|
||||
return (
|
||||
<tr className="divide-x-[1px] divide-slate-300">
|
||||
<td className="max-w-xs">
|
||||
<ResourceInfo />
|
||||
</td>
|
||||
<td className="w-1/4 align-center">
|
||||
<ResourceSkills />
|
||||
</td>
|
||||
<td className="align-top">
|
||||
<ResourceDescription />
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
const ResourceTable = ({resources}: {resources?: AuditoryResource[]}) => {
|
||||
|
||||
const resourceElements = resources?.map((resource, index) => {
|
||||
return (<ResourceEntry key={index} resource={resource} />);
|
||||
}) ?? [];
|
||||
|
||||
return(
|
||||
<div className="px-4 w-full">
|
||||
@ -128,7 +153,7 @@ const ResourceTable = () => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y-[1px] divide-slate-300 overflow-y-scroll">
|
||||
<ResourceEntry />
|
||||
{resourceElements}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -5,8 +5,7 @@ import { api } from "~/utils/api";
|
||||
|
||||
const Home: NextPage = () => {
|
||||
|
||||
//const query = api.auditoryResource.getAll.useQuery();
|
||||
//console.log(query.data);
|
||||
const query = api.auditoryResource.getAll.useQuery();
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -17,7 +16,7 @@ const Home: NextPage = () => {
|
||||
</Head>
|
||||
<main>
|
||||
<div className="my-6">
|
||||
<ResourceTable />
|
||||
<ResourceTable resources={query.data} />
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
|
||||
21
src/utils/enumWordLut.ts
Normal file
21
src/utils/enumWordLut.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { type Platform } from "@prisma/client";
|
||||
|
||||
/**
|
||||
* Takes a platform enum and translates it to readable form.
|
||||
*/
|
||||
export const translateEnumPlatform = (value: Platform) => {
|
||||
switch(value) {
|
||||
case "APP_ANDROID": {
|
||||
return "Android";
|
||||
}
|
||||
case "APP_IOS": {
|
||||
return "Apple";
|
||||
}
|
||||
case "PDF": {
|
||||
return "PDF Document";
|
||||
}
|
||||
case "WEBSITE": {
|
||||
return "Website"
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user