Repository: plait-board/drawnix
File: packages/drawnix/src/components/toolbar/freehand-toolbar/freehand-toolbar.tsx (TypeScript)

Code before:
export interface FreehandProps {
    title: string;
    icon: React.ReactNode;
    pointer: DrawnixPointerType;
}

const FREEHANDS: FreehandProps[] = [
  {
      icon: FeltTipPenIcon,
      pointer: FreehandShape.feltTipPen,
      title: 'toolbar.pen',
    },
    {
      icon: EraseIcon,
      pointer: FreehandShape.eraser,
      title: 'toolbar.eraser',
    },
];

const ROW_FREEHANDS = splitRows(FREEHANDS, 5);

export type FreehandPickerProps = {
  onPointerUp: (pointer: DrawnixPointerType) => void;
};

export const FreehandPicker: React.FC<FreehandPickerProps> = ({
  onPointerUp,
}) => {
  const board = useBoard();
  return (
    <Island padding={1}>
      <Stack.Col gap={1}>
        {ROW_FREEHANDS.map((rowFreehands, rowIndex) => {
          return (
            <Stack.Row gap={1} key={rowIndex}>
              {rowFreehands.map((freehand, index) => {
                return (
                  <ToolButton
                    key={index}
                    className={classNames({ fillable: false })}
                    type="icon"
                    size={'small'}
                    visible={true}
                    icon={freehand.icon}
                    title={freehand.title}
                    aria-label={freehand.title}
                    onPointerDown={() => {
                      setCreationMode(board, BoardCreationMode.dnd);
                      BoardTransforms.updatePointerType(board, freehand.pointer);
                    }}
                    onPointerUp={() => {

Review comment (suggestion):
Could we define the component as `FreehandPanel`?

The component name is `FreehandPicker` and file name is `freehand-toolbar.tsx`, it's not uniform.

Code after:
export interface FreehandProps {
    title: string;
    icon: React.ReactNode;
    pointer: DrawnixPointerType;
}

const FREEHANDS: FreehandProps[] = [
  {
      icon: FeltTipPenIcon,
      pointer: FreehandShape.feltTipPen,
      title: 'toolbar.pen',
    },
    {
      icon: EraseIcon,
      pointer: FreehandShape.eraser,
      title: 'toolbar.eraser',
    },
];

const ROW_FREEHANDS = splitRows(FREEHANDS, 5);

export type FreehandPickerProps = {
  onPointerUp: (pointer: DrawnixPointerType) => void;
};

export const FreehandPanel: React.FC<FreehandPickerProps> = ({
  onPointerUp,
}) => {
  const board = useBoard();
  return (
    <Island padding={1}>
      <Stack.Col gap={1}>
        {ROW_FREEHANDS.map((rowFreehands, rowIndex) => {
          return (
            <Stack.Row gap={1} key={rowIndex}>
              {rowFreehands.map((freehand, index) => {
                return (
                  <ToolButton
                    key={index}
                    className={classNames({ fillable: false })}
                    type="icon"
                    size={'small'}
                    visible={true}
                    icon={freehand.icon}
                    title={freehand.title}
                    aria-label={freehand.title}
                    onPointerDown={() => {
                      setCreationMode(board, BoardCreationMode.dnd);
                      BoardTransforms.updatePointerType(board, freehand.pointer);
                    }}
                    onPointerUp={() => {