Choice with device

Component này là dạng bọc 1 component khác và tạo cho nó phần action responsive theo device

Ví dụ

import { Choice } from '@xobuilder/ui';
import { Editor } from '@xobuilder/editor';

export const Demo = () => {
  const { setDevice } = Editor.useDevice();

  const [deviceList, setDeviceList] = useState<DeviceValue[]>(['desktop']);

  const handleRemove = (mode: DeviceValue) => {
    setDeviceList(deviceList.filter(item => item !== mode));
  };

  return (
    <Choice
      title="Sample title"
      helpText="Sample description"
      primaryComponent={<Choice.Device deviceList={deviceList} deviceOmit={[]} onChange={setDevice} onRemove={handleRemove} />}
    >
      <p>Children here...</p>
    </Choice>
  );
};

Props

Name	Type	Default	Description
title	string	-	Title của wrapper
helpText	string	-	Help text của wrapper
primaryComponent	React.ReactNode	-	Primary component của Choice
children	React.ReactNode	-	Children hiển thị bên trong wrapper