202 lines
8.5 KiB
TypeScript
202 lines
8.5 KiB
TypeScript
'use client'
|
|
import { useState } from "react"
|
|
|
|
export default function InputCommon() {
|
|
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">
|
|
<input className="input-frame" placeholder="Input Frame File" defaultValue={fileName?.name} readOnly />
|
|
<label className="file-upload" htmlFor="file">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="text" 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 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>
|
|
</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>
|
|
)
|
|
} |