Text Input

import {ReactNode} from "react"

import {Search} from "lucide-react"

import {QTextInput} from "@qui/react"

export default function Showcase(): ReactNode {
  return (
    <div className="grid grid-cols-[160px,300px] items-center justify-center gap-4 py-1">
      <div className="text-primary q-font-heading-xs">Small (s)</div>
      <QTextInput
        fullWidth
        placeholder="Search..."
        size="s"
        startIcon={Search}
      />

      <div className="text-primary q-font-heading-xs">Medium (m)</div>
      <QTextInput
        fullWidth
        placeholder="Search..."
        size="m"
        startIcon={Search}
      />

      <div className="text-primary q-font-heading-xs">Large (l)</div>
      <QTextInput
        fullWidth
        placeholder="Search..."
        size="l"
        startIcon={Search}
      />
    </div>
  )
}

import {ReactNode} from "react"

import {Search} from "lucide-react"

import {QTextInput} from "@qui/react"

export default function Customization(): ReactNode {
  return (
    <div className="grid justify-center gap-y-5">
      <QTextInput
        endIcon={Search}
        fullWidth
        hint="Hint"
        label="Label"
        placeholder="Search..."
      />

      <QTextInput
        endIcon={Search}
        fullWidth
        hint={
          <span className="text-primary q-font-metadata-sm">Custom Hint</span>
        }
        label={
          <span className="text-primary q-font-heading-xxs">Custom Label</span>
        }
        placeholder="Search..."
      />

      <QTextInput
        endIcon={Search}
        error="Error"
        fullWidth
        label="Label"
        placeholder="Search..."
      />
    </div>
  )
}

import {ReactNode} from "react"

import {Lock, Search} from "lucide-react"

import {QTextInput} from "@qui/react"

export default function States(): ReactNode {
  return (
    <div className="grid justify-center">
      <div className="grid w-[225px] gap-2">
        <div className="text-primary q-font-heading-xs">Disabled</div>
        <QTextInput
          defaultValue="Foo"
          disabled
          endIcon={Search}
          label="Label"
          placeholder="Search..."
        />

        <div className="mt-4 text-primary q-font-heading-xs">Read Only</div>
        <QTextInput
          defaultValue="Bar"
          endIcon={Lock}
          label="Name"
          placeholder="Enter your name..."
          readOnly
        />
      </div>
    </div>
  )
}

import {ReactNode, useState} from "react"

import {Eye, EyeOff} from "lucide-react"

import {QIconButton, QTextInput} from "@qui/react"

export default function InputProps(): ReactNode {
  const [showPassword, setShowPassword] = useState(false)

  return (
    <div className="grid justify-center gap-4">
      <QTextInput
        className="min-w-[225px]"
        defaultValue={50}
        inputProps={{type: "number"}}
        label="Number Input"
      />
      <QTextInput
        className="min-w-[225px]"
        defaultValue="password"
        endIcon={
          <QIconButton
            aria-label={showPassword ? "Hide Password" : "Show Password"}
            dense
            icon={showPassword ? EyeOff : Eye}
            onClick={() => setShowPassword((prevState) => !prevState)}
            style={{paddingLeft: 0, paddingRight: 0}}
          />
        }
        inputProps={{type: showPassword ? "text" : "password"}}
        label="Password Input"
      />
    </div>
  )
}

import {ReactNode, useState} from "react"

import {QTextInput} from "@qui/react"

export default function Controlled(): ReactNode {
  const [value, setValue] = useState("foo")

  return (
    <div className="grid justify-center">
      <div className="flex flex-col gap-4 sm:flex-row">
        <QTextInput
          className="min-w-[200px]"
          label="Controlled"
          onChange={(event, value) => {
            setValue(value)
          }}
          value={value}
        />

        <QTextInput
          className="min-w-[200px]"
          defaultValue="bar"
          label="Uncontrolled"
        />
      </div>
    </div>
  )
}