feat: add new sample page with various input components and styling for enhanced user interaction
This commit is contained in:
parent
06967d746c
commit
a6702f52fc
240
src/app/sample/page.tsx
Normal file
240
src/app/sample/page.tsx
Normal file
@ -0,0 +1,240 @@
|
||||
'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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user