Input

import { Input } from "@olundot/ui";

export function StudentNumberInput() {
  return (
    <Input
      label="학번"
      name="studentNumber"
      placeholder="20260001"
      autoComplete="username"
      message="시험 카드에 표시된 학번을 입력합니다."
    />
  );
}

import { useState } from "react";
import { Input } from "@olundot/ui";

// 8자리 숫자 학번 검증 — 사용자 입력에 따라 default → error → success로 자동 전이.
// disabled는 잠금 필드 예시 (사용자 상호작용 불가).
export function InputStates() {
  const [value, setValue] = useState("");
  const isEmpty = value === "";
  const isValid = /^\d{8}$/.test(value);
  const state = isEmpty ? "default" : isValid ? "success" : "error";
  const message = isEmpty
    ? "8자리 숫자로 입력합니다."
    : isValid
      ? "유효한 학번 형식입니다."
      : "숫자 8자리(예: 20260001).";
  return (
    <div style={{ display: "grid", gap: "16px" }}>
      <Input
        label="학번"
        name="studentNumber"
        placeholder="20260001"
        maxLength={8}
        value={value}
        onChange={(event) => setValue(event.target.value)}
        state={state}
        message={message}
      />
      <Input label="비활성" name="off" defaultValue="잠금됨" disabled />
    </div>
  );
}

import { Input } from "@olundot/ui";

// fullWidth={false} → w-fit (내용 너비에 자동 맞춤).
// 기본 fullWidth=true (w-full) 유지가 대부분 form 레이아웃에 적합.
// 옆에 다른 control을 inline으로 배치하거나 자동 너비 필드가 필요할 때 사용.
export function NarrowInput() {
  return (
    <div style={{ display: "flex", gap: "8px", alignItems: "flex-end" }}>
      <Input
        label="페이지"
        name="page"
        type="number"
        defaultValue="1"
        fullWidth={false}
      />
      <Input
        label="전체"
        name="total"
        type="number"
        defaultValue="50"
        readOnly
        fullWidth={false}
      />
    </div>
  );
}

import { Input } from "@olundot/ui";

export function ReadonlyInput() {
  return (
    <Input
      label="제출 토큰"
      name="token"
      defaultValue="A4F7-2K9P"
      readOnly
      message="감독관 확인 후 자동 채워집니다."
    />
  );
}