lti-web-client/src/components/table/TableRowSizeSelector.tsx

import SelectInput from '@/components/input/SelectInput';
import { cn } from '@/lib/helper';

export interface OptionType {
  label: string;
  value: string | number;
}

interface TableRowSizeSelectorProps {
  value: number;
  onChange: (val: OptionType | OptionType[] | null) => void;
  options: OptionType[];
  children?: React.ReactNode;
  className?: string;
}

export const TableRowSizeSelector = ({
  value,
  onChange,
  options,
  children,
  className,
}: TableRowSizeSelectorProps) => {
  return (
    <div className={cn('flex flex-row gap-3 items-end justify-end', className)}>
      {children}
      <SelectInput
        label='Baris'
        options={options}
        value={{
          label: String(value),
          value: value,
        }}
        onChange={onChange}
        className={{ wrapper: 'max-w-28' }}
      />
    </div>
  );
};