Number field

"use client"

import { useState } from "react"
import { NumberField } from "@/components/keyline/ui/number-field"

const IN_STOCK = 480

export function Reorder() {
  const [cases, setCases] = useState<number | null>(24)
  const over = cases != null && cases > IN_STOCK

  return (
    <div className="grid max-w-[320px] gap-3">
      <NumberField
        label="Reorder for Blue Cross"
        unit="cases"
        min={1}
        largeStep={10}
        value={cases}
        onValueChange={setCases}
        invalid={over}
        error={`The warehouse has ${IN_STOCK}. Split it into two deliveries.`}
        description="Shift + arrow keys step by 10."
      />
      <p role="status" className="text-[14px] text-kl-ink-2">
        {cases == null ? "Enter a quantity." : over ? "Not sent." : `${cases * 10} reams, on Thursday's truck.`}
      </p>
    </div>
  )
}

"use client"

import { useState } from "react"
import { NumberField } from "@/components/keyline/ui/number-field"

export function UnitPrice() {
  const [price, setPrice] = useState<number | null>(42)

  return (
    <div className="grid max-w-[320px] gap-3">
      <NumberField
        label="Price per case"
        locale="en-US"
        format={{ style: "currency", currency: "USD" }}
        min={0}
        step={0.5}
        steppers={false}
        value={price}
        onValueChange={setPrice}
      />
      <p role="status" className="text-[14px] text-kl-ink-2">
        {price == null ? "No price yet." : price < 38 ? "Below the floor corporate set. Jan will call." : "Within the price list."}
      </p>
    </div>
  )
}