add free icon for free apps

This commit is contained in:
Brandon Egger 2023-03-16 22:22:37 -05:00
parent 53237fc22e
commit 06951eb5ff
2 changed files with 38 additions and 18 deletions

View File

@ -10,13 +10,31 @@ import { ChevronDownIcon } from '@heroicons/react/24/outline';
const ResourceEntry = ({resource}: {resource: AuditoryResource}) => { const ResourceEntry = ({resource}: {resource: AuditoryResource}) => {
const ResourceInfo = ({resource}: {resource: AuditoryResource}) => { const ResourceInfo = ({resource}: {resource: AuditoryResource}) => {
const PriceIcons = ({type}: {type: PaymentType}) => { const PriceIcons = ({type}: {type: PaymentType}) => {
switch(type) {
return ( case "FREE": {
<div className="space-x-1" title="Weekly recurring subscription"> return (
<ArrowPathRoundedSquareIcon className="inline h-6 w-6" /> <div className="pt-2 space-x-1" title="Free">
<CurrencyDollarIcon className="inline h-6 w-6 text-lime-800"/> <span className="bg-amber-100 italic rounded-lg border border-neutral-900 text-black px-2 py-[1px]">
</div> free
) </span>
</div>
)
}
case "SUBSCRIPTION_MONTHLY": {
<div className="space-x-1" title="Monthly recurring subscription">
<ArrowPathRoundedSquareIcon className="inline h-6 w-6" />
<CurrencyDollarIcon className="inline h-6 w-6 text-lime-800"/>
</div>
}
case "SUBSCRIPTION_WEEKLY": {
return (
<div className="space-x-1" title="Weekly recurring subscription">
<ArrowPathRoundedSquareIcon className="inline h-6 w-6" />
<CurrencyDollarIcon className="inline h-6 w-6 text-lime-800"/>
</div>
)
}
}
} }
const PlatformInfo = ({platformLinks}: {platformLinks: PlatformLink[]}) => { const PlatformInfo = ({platformLinks}: {platformLinks: PlatformLink[]}) => {
@ -102,11 +120,13 @@ const ResourceEntry = ({resource}: {resource: AuditoryResource}) => {
return ( return (
<div className="m-2 flex space-y-4 flex-col"> <div className="m-2 flex space-y-4 flex-col">
<div className='rounded-lg bg-gray-100 drop-shadow border border-neutral-900'> { skillsComponents.length > 0 ?
<ul className="divide-y-2"> <div className='rounded-lg bg-gray-100 drop-shadow border border-neutral-900'>
{skillsComponents} <ul className="divide-y-2">
</ul> {skillsComponents}
</div> </ul>
</div> : <></>
}
<SkillRanking skillLevels={skillLevels} /> <SkillRanking skillLevels={skillLevels} />
</div> </div>
) )
@ -117,7 +137,7 @@ const ResourceEntry = ({resource}: {resource: AuditoryResource}) => {
<td className="max-w-xs"> <td className="max-w-xs">
<ResourceInfo resource={resource} /> <ResourceInfo resource={resource} />
</td> </td>
<td className="w-1/4 align-center"> <td className="w-1/4 align-top">
<ResourceSkills skills={resource.skills} skillLevels={resource.skill_levels} /> <ResourceSkills skills={resource.skills} skillLevels={resource.skill_levels} />
</td> </td>
<td className="align-top hidden sm:table-cell"> <td className="align-top hidden sm:table-cell">

View File

@ -27,25 +27,25 @@ export const translateEnumPlatform = (value: Platform) => {
export const translateEnumSkill = (value: Skill) => { export const translateEnumSkill = (value: Skill) => {
switch(value) { switch(value) {
case "ENVIRONMENT": { case "ENVIRONMENT": {
return "not done"; return "Environmental Sounds";
} }
case "BACKGROUND": { case "BACKGROUND": {
return "not done"; return "not done";
} }
case "DISCOURSE": { case "DISCOURSE": {
return "not done"; return "Discourse Level";
} }
case "MUSIC": { case "MUSIC": {
return "Music" return "Music Appreciation"
} }
case "PHONEMES": { case "PHONEMES": {
return "not done"; return "Word Recognition (phonemes)";
} }
case "SENTENCES": { case "SENTENCES": {
return "Sentences" return "Sentences"
} }
case "WORDS": { case "WORDS": {
return "Word Recognition" return "Words (stressed syllables)"
} }
} }
} }