mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2025-01-04 16:47:40 +01:00
Code Issues Wiki Activity

Merge pull request #110 from JamesHawkinss/dev

Browse source 
Fix dropdown not rendering
This commit is contained in:
James Hawkins 2022-12-19 07:10:03 +00:00 committed by GitHub
commit 4c50436a9e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/locales/en-GB/translation.json
View file

@ -20,6 +20,10 @@
"invalidUrl": "Your URL may be invalid", "invalidUrl": "Your URL may be invalid",
"arrowText": "Go back" "arrowText": "Go back"
}, },
"seasons": {
"season": "Season {{season}}",
"failed": "Failed to get season data"
},
"notFound": { "notFound": {
"backArrow": "Back to home", "backArrow": "Back to home",
"media": { "media": {

84
src/components/Dropdown.tsx
View file

@ -15,45 +15,47 @@ interface DropdownProps {
} }
export function Dropdown(props: DropdownProps) { export function Dropdown(props: DropdownProps) {
<div className="relative my-4 max-w-[18rem]"> return (
<Listbox value={props.selectedItem} onChange={props.setSelectedItem}> <div className="relative my-4 max-w-[18rem]">
{({ open }) => ( <Listbox value={props.selectedItem} onChange={props.setSelectedItem}>
<> {({ open }) => (
<Listbox.Button className="relative w-full cursor-default rounded-lg bg-denim-500 py-2 pl-3 pr-10 text-left text-white shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-bink-500 focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-bink-300 sm:text-sm"> <>
<span className="block truncate">{props.selectedItem.name}</span> <Listbox.Button className="relative w-full cursor-default rounded-lg bg-denim-500 py-2 pl-3 pr-10 text-left text-white shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-bink-500 focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-bink-300 sm:text-sm">
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"> <span className="block truncate">{props.selectedItem.name}</span>
<Icon <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
icon={Icons.CHEVRON_DOWN} <Icon
className={`transform transition-transform ${ icon={Icons.CHEVRON_DOWN}
open ? "rotate-180" : "" className={`transform transition-transform ${
}`} open ? "rotate-180" : ""
/> }`}
</span> />
</Listbox.Button> </span>
<Transition </Listbox.Button>
as={Fragment} <Transition
leave="transition ease-in duration-100" as={Fragment}
leaveFrom="opacity-100" leave="transition ease-in duration-100"
leaveTo="opacity-0" leaveFrom="opacity-100"
> leaveTo="opacity-0"
<Listbox.Options className="absolute bottom-11 left-0 right-0 z-10 mt-1 max-h-60 overflow-auto rounded-md bg-denim-500 py-1 text-white shadow-lg ring-1 ring-black ring-opacity-5 scrollbar-thin scrollbar-track-denim-400 scrollbar-thumb-denim-200 focus:outline-none sm:bottom-10 sm:text-sm"> >
{props.options.map((opt) => ( <Listbox.Options className="absolute bottom-11 left-0 right-0 z-10 mt-1 max-h-60 overflow-auto rounded-md bg-denim-500 py-1 text-white shadow-lg ring-1 ring-black ring-opacity-5 scrollbar-thin scrollbar-track-denim-400 scrollbar-thumb-denim-200 focus:outline-none sm:bottom-10 sm:text-sm">
<Listbox.Option {props.options.map((opt) => (
className={({ active }) => <Listbox.Option
`relative cursor-default select-none py-2 pl-10 pr-4 ${ className={({ active }) =>
active ? "bg-denim-400 text-bink-700" : "text-white" `relative cursor-default select-none py-2 pl-10 pr-4 ${
}` active ? "bg-denim-400 text-bink-700" : "text-white"
} }`
key={opt.id} }
value={opt} key={opt.id}
> value={opt}
{opt.name} >
</Listbox.Option> {opt.name}
))} </Listbox.Option>
</Listbox.Options> ))}
</Transition> </Listbox.Options>
</> </Transition>
)} </>
</Listbox> )}
</div>; </Listbox>
</div>
)
} }

2
src/components/layout/Seasons.tsx
View file

@ -75,7 +75,7 @@ export function Seasons(props: SeasonsProps) {
const mapSeason = (season: MWMediaSeason) => ({ const mapSeason = (season: MWMediaSeason) => ({
id: season.id, id: season.id,
name: season.title || `${t('seasons.season')} ${season.sort}`, name: season.title || `${t('seasons.season', { season: season.sort })}`,
}); });
const options = seasons.seasons.map(mapSeason); const options = seasons.seasons.map(mapSeason);