leadsolution / landing-base Goto Github PK

case "date":
        return (
          <Cleave
            type="tel"
            className="form-control"
            id={name}
            name={name}
            required={required}
            disabled={disabled}
            placeholder={placeholder}
            options={{
              blocks: [2, 2, 4],
              delimiters: ["/", "/"],
              numericOnly: true
            }}
          />
        );

Field component

Built-in

Tax id
Postal code
Phone number

e.g.:

type FieldProps = {
  name: string,
  label: string,
  type?: string,
  required?: boolean,
  placeholder?: string,
  children?: React.ReactNode,
}

function Field({ name, label, type = "text", required = true, children = [], placeholder = undefined }: FieldProps) {
  function input() {
    switch (type) {
      case "tel":
        return <Cleave type="tel" name={name} id={name} className="form-control" options={{ phone: true, phoneRegionCode: "br" }} required={required} placeholder={placeholder} />

      case "tax":
        return <Cleave type="tel" name={name} id={name} className="form-control" required={required} placeholder={placeholder} options={{
          blocks: [3, 3, 3, 2],
          delimiters: ['.', '.', '-'],
          numericOnly: true
        }} />

      case "select":
        return (
          <select name={name} id={name} className="form-control" required={required}>
            <option value="" selected disabled>{placeholder}</option>
            {children}
          </select>
        );

      default:
        return <input type={type} name={name} id={name} className="form-control" required={required} placeholder={placeholder} />;
    }
  }

  return (
    <div className="form-control">
      <label htmlFor={name}>{label}</label>
      {input}
    </div>
  );
}

Create color classes

Example

.color-secondary {
  color: $secondary;
}

Directus SDK out-of-the-box

Bring the Directus API out of the box!

Required field

Mark examples as required

Review directory layout

It doesn't scale to have two files for each component. Maybe the styles should go on styled tags?

Better styling for form states

They don't auto fit the form-container.

Create a tax field for CNPJ

<Cleave
            type="text"
            className="form-control"
            id={name}
            name={name}
            required={required}
            disabled={disabled}
            placeholder={placeholder}
            options={{
              blocks: [2, 3, 3, 4, 2],
              delimiters: [".", ".", "/", "-"],
              numericOnly: true,
            }}
          />

Favicon

Add a default favicon and its meta-tags

Add deploy script

Add default head

<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Hello, world!</title>

leadsolution / landing-base Goto Github PK

landing-base's People

Contributors

Watchers

Forkers

landing-base's Issues

Recommend Projects

Recommend Topics

Recommend Org