You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.4 KiB
46 lines
1.4 KiB
import React from "react"; |
|
|
|
import "./index.scss"; |
|
export default function Birthdate(props) { |
|
return ( |
|
<> |
|
{window.innerWidth < 1000 ? ( |
|
<div className="mobile-birthdate d-flex justify-content-between align-items-center"> |
|
<label>تاریخ تولد</label> |
|
<div className="mobile-birthdate__date d-flex align-items-center"> |
|
<Input name="day" placeholder="روز" maxLength={2} /> |
|
<span>/</span> |
|
<Input name="month" placeholder="ماه" maxLength={2} /> |
|
<span>/</span> |
|
<Input name="year" placeholder="سال" maxLength={4} /> |
|
</div> |
|
</div> |
|
) : null} |
|
{window.innerWidth > 1000 ? ( |
|
<div className="birthdate d-flex justify-content-between align-items-center"> |
|
<label>تاریخ تولد</label> |
|
<div className="birthdate__date d-flex align-items-center"> |
|
<Input name="day" placeholder="روز" maxLength={2} /> |
|
<span>/</span> |
|
<Input name="month" placeholder="ماه" maxLength={2} /> |
|
<span>/</span> |
|
<Input name="year" placeholder="سال" maxLength={4} /> |
|
</div> |
|
</div> |
|
) : null} |
|
</> |
|
); |
|
} |
|
|
|
const Input = (props) => { |
|
const { name, placeholder, maxLength } = props; |
|
return ( |
|
<input |
|
type="text" |
|
inputMode="numeric" |
|
name={name} |
|
placeholder={placeholder} |
|
maxLength={maxLength} |
|
/> |
|
); |
|
};
|
|
|