Select

import { Cell, For } from "retend";

import { Field, Select } from "innate-ui";
import classes from "../docs.module.css";

type ReleaseChannel = "" | "stable" | "beta" | "canary";
type Platform = "web" | "ios" | "android";

const releaseChannels = ["stable", "beta", "canary"] as const;
const platforms = ["web", "ios", "android"] as const;

export function SelectDemo() {
  const releaseChannel = Cell.source<ReleaseChannel>("");
  const selectedPlatforms = Cell.source<ReadonlyArray<Platform>>(["web"]);

  return (
    <div class={classes.selectDemo}>
      <Field id="release-channel-field" class={classes.selectExample}>
        <Field.Label>Release channel</Field.Label>
        <Select
          id="release-channel-select"
          value={releaseChannel}
          onChange={(value) => releaseChannel.set(value)}
          placeholder="Select channel"
        >
          {For(releaseChannels, (channel) => (
            <Select.Option value={channel}>{channel}</Select.Option>
          ))}
        </Select>
      </Field>

      <Field id="platform-field" class={classes.selectExample}>
        <Field.Label>Target platforms</Field.Label>
        <Select
          id="platform-select"
          multiple
          value={selectedPlatforms}
          onChange={(value) => selectedPlatforms.set(value)}
          placeholder="Select platforms"
        >
          {For(platforms, (platform) => (
            <Select.Option value={platform}>{platform}</Select.Option>
          ))}
        </Select>
      </Field>
    </div>
  );
}