react-icons/ai#AiOutlineRight JavaScript Examples
The following examples show how to use
react-icons/ai#AiOutlineRight.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: styles.js From plataforma-sabia with MIT License | 5 votes |
|
ArrowRightIcon = styled(AiOutlineRight)`
margin-left: 0.5rem;
${arrowIconSize}
`
Example #2
| Source File: HomeNotice.js From airdnd-frontend with MIT License | 4 votes |
|
HomeNotice = ({ home }) => {
const { rules, safeties } = home.notice;
const [modalState, setModalState] = useState(false);
const renderRules = () =>
rules.map((rule, i) => {
const iconObj = icons.find(v => rule.name.includes(v.name));
return (
<StNotice key={i}>
{iconObj ? (
<svg
viewBox={iconObj.viewBox || '0 0 22 22'}
fill="currentColor"
dangerouslySetInnerHTML={{ __html: iconObj.icon }}
/>
) : (
<MdCheckCircle />
)}
{rule.name}
</StNotice>
);
});
return (
<Division title="알아두어야 할 사항" border="none">
<StWrapper>
<strong>숙소 이용규칙</strong>
<ul>{renderRules()}</ul>
<StButton onClick={() => setModalState(true)}>
모두 보기 <AiOutlineRight />
</StButton>
</StWrapper>
<StModal
modalState={modalState}
setModalState={setModalState}
header
width="78rem"
height="80rem"
>
<StModalWrapper>
<h4>숙소 이용 규칙</h4>
{renderRules()}
<strong>추가 이용 규칙</strong>
<span>
모든 객실의 비품과 가구, 또 가구 위치 등은 사진과 다를수 있으면
계절과 상황에 따라 비품과 가구 , 가구의 위치 등은 항상 변할수
있습니다. 사진은 예시에 불과합니다. <br />
<br /> 본 객실은 1인 세팅이 기본으로 1인 이상 인원 추가시 인당
추가요금이 붙습니다. 인당 추가요금은 에어비앤비 상에서 예약시,
정확한 인원을 선택하시면 자동으로 요금이 추가 되실겁니다. 인당 추가
되는 금액은 상황에 따라 조금씩 변동이 있으나, 에어비앤비 상에서만
정확한 인원 선택하시면 자동으로 예약 요금에 반영 되오니 편하게
이용하세요~ 예를 들어 , 1명 예약하심 방에 딱 한분만 입실가능하세용.
방에 다른분 방문도 힘들고 중간에 인원변경도 힘들어서요. 처음부터
최대 방문인원으로 예약하셔야해요.
<br />
<br /> 건물 내 모든 구역에서 금연이며, 애완동물은 동반 불가합니다.
<br /> 차량 렌트 시에는 가급적 주차타워 이용이 가능한 높지 않은
승용차로 렌트 해 주시고, 기계식 주차가 불가한 경우나 주차장이 만차인
경우 주변 유무료 주차장에 주차 하셔야 합니다. 차량 만차인 경우 외,
주차장의 수리 ,공사 등으로 주차장 이용이 불가시 주차장 이용이
불가하실수 있고, 차를 가져오시면 꼭 미리 말씀해주셔야 합니다.
주차타워 이용 가능한 차량의 최대 크기는 아래 개시하였습니다. 주차는
서비스로 제공해드리고 있으므로 의무적으로 주차장을 제공해드리지는
않고 있습니다.
<br /> 기본적으로 데우기 정도는 가능하지만 냄새가 나거나 연기가 나는
음식, 기름지거나 기름이 튀는 음식 , 고기나 생선류 등을 구워 드시면
큰 문제가 될 수 있으니 절대 금지 부탁 드립니다. 다음과 같은 경우에는
부득이하게 추가 비용을 청구합니다:
<br />
<br /> - 예약된 인원보다 초과되어 시설을 이용하는 경우
<br /> - 타월이나 비치된 물품을 가져가신 경우
<br />
- 비품이나 집기 등이 파손되거나 침구류 등이 오염되어 수리,
세탁하거나 재구매 해야 하는 경우 <br />
건물 내에서는 모든 구역이 금연이시고, 실내에서 떠들거나 민원이
들어오시지 않도록 부탁드리며 항상 주위에 피해가 가지 않도록 주의
부탁 드립니다. <br />
<br />
No smoking inside of the room or building, No pets are allowed.
<br />
If you want to rent a car, please rent a sedan. You need to find a
parking space nearby when all the parking spaces are taken or when
you rent a RV(SUV) car which cannot be parked in our car lift. You
can cook inside of the room but it could be a big problem if you
make a barbeque or smelly food. We have to charge you extra cost in
following cases:
<br />
<br /> - When the actual number of guests exceeding the number of
guests reserved.
<br /> - When you take away our towels or any other amenities.
<br /> - When extra cost is required for fixing or purchase due to
an amenity/equipment/bedding is (partially)broken or stained Please
always be careful not to make loud voice or sound.
<br />
<br />
</span>
</StModalWrapper>
</StModal>
<StWrapper>
<strong>건강과 안전</strong>
<ul>
{safeties.map((safety, i) => (
<StNotice key={i}>
<MdCheckCircle />
{safety.name}
</StNotice>
))}
</ul>
<StButton>
모두 보기 <AiOutlineRight />
</StButton>
</StWrapper>
<StWrapper>
<strong>환불 정책</strong>
<span>체크인 30일 전까지 취소하시면 전액이 환불됩니다.</span>
<StButton>
자세한 정보 <AiOutlineRight />
</StButton>
</StWrapper>
</Division>
);
}
Example #3
| Source File: Calendar.js From airdnd-frontend with MIT License | 4 votes |
|
Calendar = ({
responsiveScreen,
thisMonth,
nextMonth,
thisMonthDates,
nextMonthDates,
onClickBeforeMonth,
onClickNextMonth,
checkin,
checkout,
onClickCheckDate,
onMouseenter,
onMouseLeave,
getDiff,
hoverDate,
reservedDates,
isDetailPage,
onClickWrapper,
checkAfterReserved,
checkBeforeCheckin,
beforeToday,
stayDates,
minimumStay,
isReservationBox,
...rest
}) => {
const addZero = num => ((num + '').length === 1 ? '0' + num : num);
const renderCalendar = (nowMonthDates, nowMonth) => {
const _nowMonth = addZero(nowMonth.month);
return (
<StCalendarWrapper>
<StMonth>
{nowMonth.month}월 {nowMonth.year}
</StMonth>
<StDays>
<li>일</li>
<li>월</li>
<li>화</li>
<li>수</li>
<li>목</li>
<li>금</li>
<li>토</li>
</StDays>
<StDates onMouseLeave={onMouseLeave}>
{nowMonthDates.map((date, i) => {
const _date = addZero(date);
const nowDate = `${nowMonth.year}.${_nowMonth}.${_date}`;
const dateTime = new Date(nowDate).getTime();
const reserved = reservedDates.find(v => v === nowDate);
const isAfterReserved = reserved || checkAfterReserved(dateTime);
const isCheckin = checkin === nowDate;
const isCheckout = checkout === nowDate;
const stayDate = stayDates.find(v => v === nowDate);
return (
<StDateWrapper
key={i}
onClick={onClickWrapper}
margin={nowMonth.firstDay}
darken={checkin && !isAfterReserved && getDiff(dateTime)}
checkin={isCheckin}
checkout={isCheckout}
hoverDate={hoverDate === nowDate}
stayDate={stayDate}
reserved={reserved}
beforeToday={beforeToday(dateTime)}
afterReserved={isAfterReserved && !checkout}
beforeCheckin={
isDetailPage && !checkout && checkBeforeCheckin(dateTime)
}
>
<StDateBtn
id={`dateId-${nowMonth.year}.${_nowMonth}.${_date}`}
onClick={e => onClickCheckDate(e, dateTime, reserved)}
onMouseEnter={onMouseenter}
checkin={isCheckin}
checkout={isCheckout}
hoverDate={hoverDate === nowDate && !isAfterReserved}
stayDate={stayDate}
btnType="circle"
>
{date}
</StDateBtn>
{isDetailPage && (isCheckin || isCheckout || stayDate) && (
<StTooltipWrapper>
<div className="tooltip">
<div>
{stayDates.length
? `최소 ${minimumStay}박`
: isCheckin
? '체크인 요일'
: '체크아웃 요일'}
</div>
<svg role="presentation" focusable="false">
<path className="arrow1" d="M0,0 20,0 10,10z"></path>
<path className="arrow2" d="M0,0 10,10 20,0"></path>
</svg>
</div>
</StTooltipWrapper>
)}
</StDateWrapper>
);
})}
</StDates>
</StCalendarWrapper>
);
};
return (
<>
<StWrapper isDetailPage={isDetailPage} {...rest}>
<StNextMonthBtn btnType="circle" onClick={onClickBeforeMonth}>
<AiOutlineLeft />
</StNextMonthBtn>
<StNextMonthBtn btnType="circle" onClick={onClickNextMonth}>
<AiOutlineRight />
</StNextMonthBtn>
{renderCalendar(thisMonthDates, thisMonth)}
{(!responsiveScreen || isReservationBox) &&
renderCalendar(nextMonthDates, nextMonth)}
</StWrapper>
</>
);
}
Example #4
| Source File: Navigator.js From react-portal with MIT License | 4 votes |
|
Navigator = props => {
const [isCollapsed, setIsCollapsed] = useState(false);
const [visible, setVisible] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const Creds = getRole();
const handleSignOut = state => {
if (state) {
setIsLoading(true);
setTimeout(() => {
localStorage.clear();
props.history.push("/login");
}, 1000);
} else {
setVisible(state);
}
};
const Wrapper = styled.div`
padding: 10px 20px;
`;
const Head = styled.div`
padding-bottom: 20px;
font-size: 16px;
`;
const NoButton = styled(Button)`
background-color: #ffffff !important;
color: #1890ff !important;
border: 2px solid #1890ff !important;
`;
useEffect(() => {
if (window.innerWidth <= 568) {
setIsCollapsed(true);
}
}, []);
return (
<>
<Layout>
<Sider
width={200}
className="side-nav"
theme="dark"
trigger={null}
collapsible
collapsed={isCollapsed}
>
<div className="logo">
<img
onClick={() => setIsCollapsed(!isCollapsed)}
src={isCollapsed ? logoCollapse : logo}
width={`${isCollapsed ? "80" : "160"}`}
style={{ padding: "12px 24px", cursor: "pointer" }}
alt=""
/>
</div>
<hr style={{ margin: 0, padding: 0 }} />
<Menu
theme="dark"
height="100%"
mode="inline"
defaultSelectedKeys={"dashboard"}
>
{routes.map(route => {
if (
Creds.role === "member" &&
route.key === "participants"
) {
return null;
} else {
return (
<Menu.Item
title={route.name}
style={{
alignItems: "center"
}}
key={route.key}
onClick={() => {
localStorage.setItem(
"routeKey",
route.key
);
}}
>
<route.icon
style={{ fontSize: "18px" }}
/>
{isCollapsed ? null : (
<span
style={{
paddingLeft: "10px"
}}
>
{route.name}
</span>
)}
<Link to={route.path} />
</Menu.Item>
);
}
})}
<Menu.Item
key={"signout"}
title={"Sign-out"}
onClick={() => setVisible(true)}
>
<AiOutlineLock />
{isCollapsed ? null : (
<span style={{ paddingLeft: "10px" }}>
Sign Out
</span>
)}
</Menu.Item>
<Menu.Item
title={isCollapsed ? "Show" : "Hide"}
key={"collapse"}
onClick={() => setIsCollapsed(!isCollapsed)}
>
{isCollapsed ? (
<AiOutlineRight />
) : (
<AiOutlineLeft />
)}
{isCollapsed ? null : (
<span style={{ paddingLeft: "10px" }}>
Hide
</span>
)}
</Menu.Item>
</Menu>
</Sider>
<Layout
style={{
minHeight: "100vh",
marginLeft: `${isCollapsed ? "80px" : "200px"}`
}}
className="side-nav-layout"
>
<Content
style={{
margin: 12,
padding: 20,
background: "#f9f9f9",
minHeight: "280"
}}
>
<Switch>
<PrivateRoute
exact
path="/"
component={Dashboard}
data={Creds}
/>
<PrivateRoute
exact
path="/events"
component={EventList}
data={Creds}
/>
<PrivateRoute
exact
path="/participants"
component={ParticipantsList}
data={Creds}
/>
<PrivateRoute
exact
path="/team"
component={TeamList}
data={Creds}
/>
<PrivateRoute
exact
path="/profile"
component={Profile}
data={Creds}
/>
<PrivateRoute
exact
path="/groups"
component={ManageGroups}
data={Creds}
/>
<PrivateRoute
exact
path="/certificate"
component={AddCertificate}
data={Creds}
/>
<PrivateRoute
exact
path="/tasks/:id"
component={ManageTasks}
data={Creds}
/>
<PrivateRoute
exact
path="/task/:id"
component={Task}
data={Creds}
/>
<Redirect from="/dashboard" to="/" />
<Redirect to="/" />
</Switch>
</Content>
</Layout>
</Layout>
<Modal
visible={visible}
footer={null}
closable={false}
onCancel={() => handleSignOut(false)}
>
<IoIosArrowRoundBack
onClick={() => handleSignOut(false)}
style={{ fontSize: "28px", cursor: "pointer" }}
/>
<Wrapper>
<Head>
<Row>
<Col xs={5}></Col>
<Col>Do you really want to sign out ?</Col>
<Col xs={5}></Col>
</Row>
</Head>
<Row>
<Col xs={5}></Col>
<Col xs={6} style={{ paddingLeft: "8px" }}>
<NoButton
type="primary"
onClick={() => handleSignOut(false)}
>
No
</NoButton>
</Col>
<Col
xs={7}
style={{
display: "flex",
justifyContent: "flex-end"
}}
>
<Button
type="primary"
loading={isLoading}
onClick={() => handleSignOut(true)}
>
Yes
</Button>
</Col>
<Col xs={5}></Col>
</Row>
</Wrapper>
</Modal>
</>
);
}
