'use client'

import { useState } from 'react'

export default function page() {
  const [fileName, setFileName] = useState<File | null>(null) //file name value

  return (
    <>
      <div className="form-design-wrap">
        <div className="design-box">
          <h1 className="tit">Input</h1>
          <div className="design-grid-wrap">
            <input className="input-frame" type="text" placeholder="Input Frame Text" />
            <input className="input-frame" type="number" placeholder="Input Frame Number" />
            <input className="input-frame" type="password" placeholder="Input Frame Password" />
            <input className="input-frame" type="email" placeholder="Input Frame Email" />
            <input className="input-frame" type="text" placeholder="Input Frame Disabled" defaultValue={'defaultValue'} disabled />
            <input className="input-frame" type="text" placeholder="Input Frame ReadOnly" readOnly />
            <div className="filebox">
              <label className="btn-frame l-blue icon" htmlFor="file">
                <i className="btn-clip"></i>Upload File
              </label>
              <input type="file" id="file" onChange={(e) => setFileName(e.target.files?.[0] ?? null)} />
            </div>
            <div className="search-input">
              <input type="text" className="search-frame" placeholder="Input Frame Search" />
              <button className="search-icon"></button>
            </div>
            <div className="date-input">
              <button className="date-btn">
                <i className="date-icon"></i>
              </button>
              <input type="text" className="date-frame" placeholder="Input Frame Date" />
            </div>
            <div className="login-input id">
              <input type="text" className="login-frame" placeholder="Input Frame ID" />
              <button className="login-icon">
                <i className="del-icon"></i>
              </button>
            </div>
            <div className="login-input pw">
              <input type="password" className="login-frame" placeholder="Input Frame PW" />
              <button className="login-icon act">
                <i className="show-icon"></i>
              </button>
            </div>
            <div className="login-input pw change">
              <input type="password" className="login-frame" placeholder="Input Frame PW" />
              <button className="login-icon act">
                <i className="show-icon"></i>
              </button>
            </div>
          </div>
        </div>
        <div className="design-box">
          <h1 className="tit">Button</h1>
          <div className="design-grid-wrap">
            <button className="btn-frame d-blue min">Block Button</button>
            <button className="btn-frame n-blue min">Block Button</button>
            <button className="btn-frame red min">Block Button</button>
            <button className="btn-frame d-blue">Block Button</button>
            <button className="btn-frame n-blue">Block Button</button>
            <button className="btn-frame l-blue">Block Button</button>
            <button className="btn-frame red">Block Button</button>
            <button className="btn-frame d-blue icon">
              Block Icon Button<i className="btn-arr"></i>
            </button>
            <button className="btn-frame n-blue icon">
              Block Icon Button<i className="btn-arr"></i>
            </button>
            <button className="btn-frame n-blue icon">
              Block Icon Button<i className="btn-edit"></i>
            </button>
            <button className="btn-frame red icon">
              Block Icon Button<i className="btn-arr"></i>
            </button>
            <button className="btn-frame l-blue icon">
              <i className="btn-clip"></i>Block Icon Button
            </button>
            <button className="btn-frame icon login">
              Block Big Button <i className="btn-arr"></i>
            </button>
            <button className="btn-frame" disabled>
              Block Button
            </button>
          </div>
        </div>
        <div className="design-box">
          <h1 className="tit">Check Box</h1>
          <div className="design-grid-wrap">
            <div className="check-form-box">
              <input type="checkbox" id="ch01" />
              <label htmlFor="ch01">Check Box</label>
            </div>
            <div className="check-form-box">
              <input type="checkbox" id="ch02" />
              <label htmlFor="ch02">Check Box</label>
            </div>
            <div className="check-form-box">
              <input type="checkbox" id="ch03" defaultChecked />
              <label htmlFor="ch03">Check Box</label>
            </div>
            <div className="check-form-box">
              <input type="checkbox" id="ch04" defaultChecked />
              <label htmlFor="ch04">Check Box</label>
            </div>
            <div className="check-form-box">
              <input type="checkbox" id="ch05" disabled />
              <label htmlFor="ch05">Check Box</label>
            </div>
            <div className="check-form-box">
              <input type="checkbox" id="ch06" disabled />
              <label htmlFor="ch06">Check Box</label>
            </div>
          </div>
        </div>
        <div className="design-box">
          <h1 className="tit">Radio Button</h1>
          <div className="design-grid-wrap">
            <div className="radio-form-box">
              <input type="radio" name="radio01" id="ra01" />
              <label htmlFor="ra01">Radio Button</label>
            </div>
            <div className="radio-form-box">
              <input type="radio" name="radio01" id="ra02" defaultChecked />
              <label htmlFor="ra02">Radio Button</label>
            </div>
            <div className="radio-form-box">
              <input type="radio" name="radio03" id="ra05" disabled />
              <label htmlFor="ra05">Radio Button</label>
            </div>
          </div>
        </div>
        <div className="design-box">
          <h1 className="tit">Toggle Button</h1>
          <div className="design-grid-wrap">
            <div>
              <label className="toggle-btn">
                <input type="checkbox" />
                <span className="slider"></span>
              </label>
            </div>
            <div className="toggle-form">
              <label className="toggle-btn">
                <input type="checkbox" />
                <span className="slider"></span>
              </label>
              <div className="toggle-name">Q.PARTNERS</div>
            </div>
          </div>
        </div>
        <div className="design-box">
          <h1 className="tit">Select Box</h1>
          <div className="design-grid-wrap">
            <select className="select-form" name="" id="">
              <option value="">Select01</option>
              <option value="">Select02</option>
              <option value="">Select03</option>
              <option value="">Select04</option>
              <option value="">Select05</option>
            </select>
            <select className="select-form" name="" id="" disabled>
              <option value="">Select01</option>
              <option value="">Select02</option>
              <option value="">Select03</option>
              <option value="">Select04</option>
              <option value="">Select05</option>
            </select>
            <div className="select-flex-form">
              <select className="select-form" name="" id="">
                <option value="">Select01</option>
                <option value="">Select02</option>
                <option value="">Select03</option>
                <option value="">Select04</option>
                <option value="">Select05</option>
              </select>
              <select className="select-form" name="" id="">
                <option value="">Select01</option>
                <option value="">Select02</option>
                <option value="">Select03</option>
                <option value="">Select04</option>
                <option value="">Select05</option>
              </select>
              <select className="select-form" name="" id="" disabled>
                <option value="">Select01</option>
                <option value="">Select02</option>
                <option value="">Select03</option>
                <option value="">Select04</option>
                <option value="">Select05</option>
              </select>
            </div>
          </div>
        </div>
        <div className="design-box">
          <h1 className="tit">TextArea</h1>
          <div className="design-grid-wrap">
            <textarea className="textarea-form" name="" id="" placeholder="TextArea Filed"></textarea>
            <textarea className="textarea-form" name="" id="" disabled></textarea>
          </div>
        </div>
        <style jsx>
          {`
            .form-design-wrap {
              max-width: 1300px;
              margin: 0px auto;
              padding: 25px 20px;
            }
            .design-box {
              padding: 15px;
              box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
              border-radius: 5px;
              margin-bottom: 25px;
            }
            .tit {
              font-size: 24px;
              font-weight: 600;
              color: #000;
              border-bottom: 1px solid #000;
              padding-bottom: 5px;
            }
            .design-grid-wrap {
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              margin-top: 20px;
              gap: 10px;
            }
            .icon-bx {
              width: 10px;
              height: 10px;
              margin-right: 5px;
              background-color: #000;
            }
          `}
        </style>
      </div>
    </>
  )
}