InputField

import { InputField } from "@g4rcez/components";

function BasicInputField() {
  return (
    <InputField name="username" title="Username" placeholder="Enter username" required>
      <input
        id="username"
        name="username"
        type="text"
        placeholder="Enter username"
        className="input h-input-height w-full flex-1 rounded-input-radius bg-transparent px-input-padding-x py-input-padding-y text-input-text text-foreground outline-none"
      />
    </InputField>
  );
}

import { InputField } from "@g4rcez/components";
import { MagnifyingGlassIcon } from "@phosphor-icons/react";

function WithSlots() {
  return (
    <InputField
      name="search"
      title="Search"
      placeholder="Search..."
      left={<MagnifyingGlassIcon size={16} className="text-secondary" />}
      right={<span className="text-xs text-secondary">Ctrl+K</span>}
      required
    >
      <input
        id="search"
        name="search"
        type="search"
        placeholder="Search..."
        className="input h-input-height w-full flex-1 rounded-input-radius bg-transparent px-input-padding-x py-input-padding-y text-input-text text-foreground outline-none"
      />
    </InputField>
  );
}

import { InputField } from "@g4rcez/components";

function ErrorAndInfo() {
  return (
    <div className="flex flex-col gap-4">
      <InputField
        name="email"
        title="Email"
        error="Please enter a valid email address."
        required
      >
        <input
          id="email"
          name="email"
          type="email"
          className="input h-input-height w-full flex-1 rounded-input-radius bg-transparent px-input-padding-x py-input-padding-y text-input-text text-foreground outline-none"
        />
      </InputField>
      <InputField
        name="api-key"
        title="API Key"
        info="Generate a key from your account settings."
        required
      >
        <input
          id="api-key"
          name="api-key"
          type="password"
          placeholder="sk-..."
          className="input h-input-height w-full flex-1 rounded-input-radius bg-transparent px-input-padding-x py-input-padding-y text-input-text text-foreground outline-none"
        />
      </InputField>
    </div>
  );
}