site-builder/craft/src/components/basic/SearchBar.tsx

import React, { CSSProperties } from 'react';
import { useNode, UserComponent } from '@craftjs/core';
import { cssPropsToString } from '../../utils/style-helpers';
import { escapeHtml, escapeAttr } from '../../utils/escape';

interface SearchBarProps {
  placeholder?: string;
  buttonText?: string;
  showButton?: boolean;
  style?: CSSProperties;
}

export const SearchBar: UserComponent<SearchBarProps> = ({
  placeholder = 'Search...',
  buttonText = 'Search',
  showButton = true,
  style = {},
}) => {
  const {
    connectors: { connect, drag },
    selected,
  } = useNode((node) => ({
    selected: node.events.selected,
  }));

  return (
    <form
      ref={(ref: HTMLFormElement | null): void => { if (ref) connect(drag(ref)); }}
      role="search"
      onSubmit={(e) => e.preventDefault()}
      style={{
        display: 'flex',
        alignItems: 'center',
        maxWidth: '560px',
        outline: selected ? '2px solid #3b82f6' : 'none',
        ...style,
      }}
    >
      <div style={{ position: 'relative', flex: 1 }}>
        <i
          className="fa fa-search"
          style={{
            position: 'absolute',
            left: '14px',
            top: '50%',
            transform: 'translateY(-50%)',
            color: '#9ca3af',
            fontSize: '14px',
            pointerEvents: 'none',
          }}
        />
        <input
          type="search"
          placeholder={placeholder}
          style={{
            width: '100%',
            padding: '12px 16px 12px 40px',
            fontSize: '15px',
            fontFamily: 'Inter, sans-serif',
            border: '1px solid #d1d5db',
            borderRadius: showButton ? '8px 0 0 8px' : '8px',
            backgroundColor: '#ffffff',
            color: '#1f2937',
            outline: 'none',
            boxSizing: 'border-box',
          }}
        />
      </div>
      {showButton && (
        <button
          type="submit"
          style={{
            padding: '12px 20px',
            fontSize: '15px',
            fontWeight: '600',
            fontFamily: 'Inter, sans-serif',
            color: '#ffffff',
            backgroundColor: '#3b82f6',
            border: 'none',
            borderRadius: '0 8px 8px 0',
            cursor: 'pointer',
            whiteSpace: 'nowrap',
            display: 'flex',
            alignItems: 'center',
            gap: '6px',
          }}
        >
          <i className="fa fa-search" style={{ fontSize: '13px' }} />
          {buttonText}
        </button>
      )}
    </form>
  );
};

/* ---------- Craft config ---------- */

SearchBar.craft = {
  displayName: 'Search Bar',
  props: {
    placeholder: 'Search...',
    buttonText: 'Search',
    showButton: true,
    style: {},
  },
  rules: {
    canDrag: () => true,
    canMoveIn: () => false,
    canMoveOut: () => true,
  },
};

/* ---------- HTML export ---------- */

(SearchBar as any).toHtml = (props: SearchBarProps, _childrenHtml: string) => {
  const {
    placeholder = 'Search...',
    buttonText = 'Search',
    showButton = true,
    style = {},
  } = props;

  const formStyle = cssPropsToString({
    display: 'flex',
    alignItems: 'center',
    maxWidth: '560px',
    ...style,
  });

  const inputStyleStr = `width:100%;padding:12px 16px 12px 40px;font-size:15px;font-family:Inter,sans-serif;border:1px solid #d1d5db;border-radius:${showButton ? '8px 0 0 8px' : '8px'};background-color:#ffffff;color:#1f2937;outline:none;box-sizing:border-box`;

  const btnHtml = showButton
    ? `<button type="submit" style="padding:12px 20px;font-size:15px;font-weight:600;font-family:Inter,sans-serif;color:#ffffff;background-color:#3b82f6;border:none;border-radius:0 8px 8px 0;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px"><i class="fa fa-search" style="font-size:13px" aria-hidden="true"></i>${escapeHtml(buttonText)}</button>`
    : '';

  return {
    html: `<form role="search"${formStyle ? ` style="${formStyle}"` : ''}>
  <div style="position:relative;flex:1">
    <i class="fa fa-search" style="position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:14px;pointer-events:none" aria-hidden="true"></i>
    <input type="search" placeholder="${escapeAttr(placeholder)}" style="${inputStyleStr}" />
  </div>
  ${btnHtml}
</form>`,
  };
};