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';

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>
  );
};

/* ---------- Settings panel ---------- */

const SearchBarSettings: React.FC = () => {
  const { actions: { setProp }, props } = useNode((node) => ({
    props: node.data.props as SearchBarProps,
  }));

  const labelStyle: CSSProperties = { fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 };
  const inputStyle: CSSProperties = {
    width: '100%', padding: '4px 8px', background: '#27272a', color: '#e4e4e7',
    border: '1px solid #3f3f46', borderRadius: 4, fontSize: 12,
  };

  return (
    <div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
      {/* Placeholder */}
      <div>
        <label style={labelStyle}>Placeholder</label>
        <input
          type="text"
          value={props.placeholder || ''}
          onChange={(e) => setProp((p: SearchBarProps) => { p.placeholder = e.target.value; })}
          placeholder="Search..."
          style={inputStyle}
        />
      </div>

      {/* Show Button */}
      <div>
        <label style={{ ...labelStyle, display: 'flex', alignItems: 'center', gap: 6 }}>
          <input
            type="checkbox"
            checked={props.showButton !== false}
            onChange={(e) => setProp((p: SearchBarProps) => { p.showButton = e.target.checked; })}
          />
          Show Button
        </label>
      </div>

      {/* Button Text */}
      {props.showButton !== false && (
        <div>
          <label style={labelStyle}>Button Text</label>
          <input
            type="text"
            value={props.buttonText || ''}
            onChange={(e) => setProp((p: SearchBarProps) => { p.buttonText = e.target.value; })}
            placeholder="Search"
            style={inputStyle}
          />
        </div>
      )}
    </div>
  );
};

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

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

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

(SearchBar as any).toHtml = (props: SearchBarProps, _childrenHtml: string) => {
  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  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"></i>${esc(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"></i>
    <input type="search" placeholder="${esc(placeholder)}" style="${inputStyleStr}" />
  </div>
  ${btnHtml}
</form>`,
  };
};