SelectOption

import { type ReactNode } from "react";
import { ListBox } from "react-aria-components";
import { SelectOption, cn } from "@nexera-ui/react";
import { LuBuilding2 } from "react-icons/lu";

function List({
  label,
  platform = "web",
  selectionMode = "single",
  defaultSelectedKeys = [],
  children,
}: {
  label: string;
  platform?: Platform;
  selectionMode?: "single" | "multiple";
  defaultSelectedKeys?: string[];
  children: ReactNode;
}) {
  return (
    <div data-platform={platform} className={cn(selectPopoverStyles(), "w-80 max-w-full")}>
      <SelectPlatformContext.Provider value={platform}>
        <ListBox
          aria-label={label}
          data-platform={platform}
          selectionMode={selectionMode}
          defaultSelectedKeys={defaultSelectedKeys}
          className={selectListBoxStyles()}
        >
          {children}
        </ListBox>
      </SelectPlatformContext.Provider>
    </div>
  );
}

export function Types() {
  return (
    <div className="flex flex-wrap items-start gap-8">
      {(["single", "multiple"] as const).map((selectionMode) => (
        <List
          key={selectionMode}
          label={`Type ${selectionMode}`}
          selectionMode={selectionMode}
          defaultSelectedKeys={["eng"]}
        >
          <SelectOption
            id="eng"
            label="Engineering"
            description="42 people"
            leading={<LuBuilding2 />}
          />
          <SelectOption id="design" label="Design" leading={<LuBuilding2 />} />
          <SelectOption id="finance" label="Finance" isDisabled leading={<LuBuilding2 />} />
        </List>
      ))}
    </div>
  );
}

import { type ReactNode } from "react";
import { ListBox } from "react-aria-components";
import { SelectOption, cn } from "@nexera-ui/react";
import { LuCalendarDays } from "react-icons/lu";

const platforms = ["web", "ios", "android"] as const;

function List({
  label,
  platform = "web",
  selectionMode = "single",
  defaultSelectedKeys = [],
  children,
}: {
  label: string;
  platform?: Platform;
  selectionMode?: "single" | "multiple";
  defaultSelectedKeys?: string[];
  children: ReactNode;
}) {
  return (
    <div data-platform={platform} className={cn(selectPopoverStyles(), "w-80 max-w-full")}>
      <SelectPlatformContext.Provider value={platform}>
        <ListBox
          aria-label={label}
          data-platform={platform}
          selectionMode={selectionMode}
          defaultSelectedKeys={defaultSelectedKeys}
          className={selectListBoxStyles()}
        >
          {children}
        </ListBox>
      </SelectPlatformContext.Provider>
    </div>
  );
}

export function Platforms() {
  return (
    <div className="flex flex-wrap items-start gap-8">
      {platforms.map((platform) => (
        <List
          key={platform}
          label={`Leave type ${platform}`}
          platform={platform}
          defaultSelectedKeys={["annual"]}
        >
          <SelectOption
            id="annual"
            label="Annual leave"
            description="12 days available"
            leading={<LuCalendarDays />}
          />
          <SelectOption id="sick" label="Sick leave" leading={<LuCalendarDays />} />
          <SelectOption id="unpaid" label="Unpaid leave" isDisabled leading={<LuCalendarDays />} />
        </List>
      ))}
    </div>
  );
}

import { type ReactNode } from "react";
import { ListBox } from "react-aria-components";
import { SelectOption, cn } from "@nexera-ui/react";
import { LuBuilding2 } from "react-icons/lu";

function List({
  label,
  platform = "web",
  selectionMode = "single",
  defaultSelectedKeys = [],
  children,
}: {
  label: string;
  platform?: Platform;
  selectionMode?: "single" | "multiple";
  defaultSelectedKeys?: string[];
  children: ReactNode;
}) {
  return (
    <div data-platform={platform} className={cn(selectPopoverStyles(), "w-80 max-w-full")}>
      <SelectPlatformContext.Provider value={platform}>
        <ListBox
          aria-label={label}
          data-platform={platform}
          selectionMode={selectionMode}
          defaultSelectedKeys={defaultSelectedKeys}
          className={selectListBoxStyles()}
        >
          {children}
        </ListBox>
      </SelectPlatformContext.Provider>
    </div>
  );
}

export function LongLabelAndRtl() {
  return (
    <List label="Long" defaultSelectedKeys={["a"]}>
      <SelectOption
        id="a"
        label="البحث والتطوير وضمان الجودة للمنصات المحمولة"
        description="يشمل فرق نظام التصميم وإمكانية الوصول في ثلاثة مكاتب"
        leading={<LuBuilding2 />}
      />
      <SelectOption id="b" label="العمليات" />
    </List>
  );
}