trending: added region switcher
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
6de055dc50
commit
e1c0a1082c
@ -0,0 +1,33 @@
|
||||
"use client";
|
||||
|
||||
import { Component } from "@/typings/component";
|
||||
import { Region } from "@/utils/getRegionCodes";
|
||||
|
||||
import { Autocomplete, AutocompleteItem } from "@nextui-org/autocomplete";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export const RegionSwitcher: Component<{
|
||||
regions: Region[];
|
||||
currentRegion: Region | null;
|
||||
}> = ({ currentRegion, regions }) => {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<Autocomplete
|
||||
defaultItems={regions}
|
||||
label="Region"
|
||||
placeholder="Select your region"
|
||||
isClearable={false}
|
||||
selectedKey={currentRegion?.code}
|
||||
onSelectionChange={(key) => {
|
||||
if (typeof key === "string" && key.length != 0)
|
||||
return router.push(`/trending?region=${key}`);
|
||||
}}
|
||||
className="max-w-xs"
|
||||
>
|
||||
{(item) => (
|
||||
<AutocompleteItem key={item.code}>{item.name}</AutocompleteItem>
|
||||
)}
|
||||
</Autocomplete>
|
||||
);
|
||||
};
|
@ -1,9 +1,13 @@
|
||||
import { Suspense } from "react";
|
||||
import { Trending } from "./Trending";
|
||||
import { LoadingPage } from "@/components/LoadingPage";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<Trending />
|
||||
<Suspense fallback={<LoadingPage />}>
|
||||
<Trending />
|
||||
</Suspense>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -0,0 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { Component } from "@/typings/component";
|
||||
import { CircularProgress } from "@nextui-org/progress";
|
||||
|
||||
export const LoadingPage: Component = () => {
|
||||
return (
|
||||
<div className="h-screen container mx-auto flex items-center justify-center">
|
||||
<CircularProgress aria-label="Loading page..." />
|
||||
</div>
|
||||
);
|
||||
};
|
@ -0,0 +1 @@
|
||||
export const defaultRegion = "US" as const;
|
@ -0,0 +1,15 @@
|
||||
import { allCountries } from "country-region-data";
|
||||
|
||||
export interface Region {
|
||||
code: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const getRegionCodes = (): Region[] => {
|
||||
return allCountries.map((country) => ({
|
||||
name: country[0],
|
||||
code: country[1]
|
||||
}));
|
||||
};
|
||||
|
||||
export default getRegionCodes;
|
Loading…
Reference in new issue