47 lines
1.1 KiB
TypeScript
Executable File
47 lines
1.1 KiB
TypeScript
Executable File
import { useLocal } from "@/utils/use-local";
|
|
import { FC, useEffect } from "react";
|
|
import { Button } from "../../ui/button";
|
|
|
|
export const ButtonOptions: FC<{
|
|
on_select: (val: any) => void;
|
|
options: () => Promise<{ value: string; label: string }[]>;
|
|
value: string
|
|
}> = ({ options, on_select, value }) => {
|
|
const local = useLocal({
|
|
list: [] as { value: string; label: string }[],
|
|
status: "init" as "init" | "loading" | "ready",
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (local.status === "init") {
|
|
local.status = "loading";
|
|
local.render();
|
|
options().then((result) => {
|
|
local.list = result;
|
|
|
|
local.status = "ready";
|
|
local.render();
|
|
});
|
|
}
|
|
}, [options]);
|
|
|
|
return (
|
|
<div>
|
|
{!!local.list &&
|
|
local.list.map((item, index) => (
|
|
<Button
|
|
key={index}
|
|
onClick={() => {
|
|
on_select(item.value);
|
|
local.render();
|
|
}}
|
|
className="c-mr-3"
|
|
variant={item.value === value ? "default" : "outline"}
|
|
>
|
|
<span>{item.label}</span>
|
|
</Button>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|