react-icons/io#IoIosArrowRoundBack JavaScript Examples
The following examples show how to use
react-icons/io#IoIosArrowRoundBack.
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: index.js From layer5-ng with Apache License 2.0 | 5 votes |
|
Testimonial = () => {
const ArrowLeft = ({ currentSlide, slideCount, ...props }) => (
<button {...props} className="slick-arrow slick-prev-icon">
<IoIosArrowRoundBack />
</button>
);
const ArrowRight = ({ currentSlide, slideCount, ...props }) => (
<button {...props} className="slick-arrow slick-next-icon">
<IoIosArrowRoundForward />
</button>
);
const settings = {
customPaging: function(i) {
return (
<a>
<img src={data.thumbs[i]} alt="img" />
</a>
);
},
dots: true,
dotsClass: "slick-dots testimonial__thumb",
autoplay: true,
infinite: true,
speed: 1500,
slidesShow: 1,
slidesToScroll: 1,
prevArrow: <ArrowLeft />,
nextArrow: <ArrowRight />
};
return (
<TestimonialWrapper id="testimonial">
<Container>
<Row>
<Col xs={12}>
<SectionTitle leftAlign={true} className="testmonial__heading">
<h4>Testimonial</h4>
<h2>
<span>What our client says </span> about us
</h2>
</SectionTitle>
<SlickSlider {...settings} className="testimonial__slider">
{data.testimonials.map((testimonial, index) => (
<SliderItem key={index}>
<p>
<FaQuoteLeft />
{testimonial.quote}
</p>
<div className="slider__meta">
<img src={testimonial.thumb} alt="img" />
<div className="testimonial-client">
<h6>{testimonial.author}</h6>
<p>{testimonial.dsignation}</p>
</div>
</div>
</SliderItem>
))}
</SlickSlider>
</Col>
</Row>
</Container>
</TestimonialWrapper>
);
}
Example #2
| Source File: index.js From layer5-ng with Apache License 2.0 | 4 votes |
|
AppScreensClassic = () => {
const ArrowLeft = ({ currentSlide, slideCount, ...props }) => (
<button {...props} className="slick-arrow slick-prev-icon">
<IoIosArrowRoundBack />
</button>
);
const ArrowRight = ({ currentSlide, slideCount, ...props }) => (
<button {...props} className="slick-arrow slick-next-icon">
<IoIosArrowRoundForward />
</button>
);
const settings = {
dots: false,
autoplay: true,
infinite: true,
className: "center",
centerMode: true,
centerPadding: "170px",
slidesToShow: 3,
slidesToScroll: 1,
speed: 300,
responsive: [
{
breakpoint: 1025,
settings: {
centerPadding: "50px"
}
},
{
breakpoint: 912,
settings: {
slidesToShow: 3,
centerPadding: "80px"
}
},
{
breakpoint: 700,
settings: {
slidesToShow: 3,
centerPadding: "60px"
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3,
centerPadding: "40px"
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
centerPadding: "00px"
}
}
],
prevArrow: <ArrowLeft />,
nextArrow: <ArrowRight />
};
return (
<AppScreenSctionWrapper>
<Container>
<Row>
<Col xs={12} sm={6}>
<SectionTitle
className="section-title-block"
leftAlign={true}
UniWidth="100%"
mb={50}
>
<h4>app screens</h4>
<h2>
<span>See screenshot </span> & engage in this app.
</h2>
</SectionTitle>
</Col>
<Col xs={12} sm={6}>
<div className="view-more-button">
<Button>View on Goole Play</Button>
</div>
</Col>
</Row>
<Row>
<Col xs={12}>
<SlickSlider {...settings}>
<SliderItem key={"1"}>
<img src={screen1} alt="img" />
</SliderItem>
<SliderItem key={"2"}>
<img src={screen2} alt="img" />
</SliderItem>
<SliderItem key={"3"}>
<img src={screen3} alt="img" />
</SliderItem>
<SliderItem key={"4"}>
<img src={screen4} alt="img" />
</SliderItem>
<SliderItem key={"2"}>
<img src={screen5} alt="img" />
</SliderItem>
</SlickSlider>
</Col>
</Row>
</Container>
</AppScreenSctionWrapper>
);
}
Example #3
| Source File: EditTodoModal.js From react-portal with MIT License | 4 votes |
|
EditTodoModal = ({
visible,
handleVisible,
todo,
refresh,
setRefresh
}) => {
const [data, setData] = useState(null);
const [isTodoInputValid, setIsTodoInputValid] = useState(true);
const handleOnClose = () => {
setIsTodoInputValid(true);
handleVisible(!visible);
};
const handleOnChangeTodo = data => {
if (data && !data) {
if (!isTodoInputValid) setIsTodoInputValid(true);
setData("");
return;
}
if (data.length < 7 && isTodoInputValid) setIsTodoInputValid(false);
if (data.length >= 7 && !isTodoInputValid) setIsTodoInputValid(true);
setData(data);
};
const handleEditTodo = async data => {
if (!data || data.length < 7) return;
try {
const res = await editTodo(todo._id, { title: data });
if (!res.error && res.message === "success") {
handleVisible(!visible);
setRefresh(!refresh);
setData(null);
}
} catch (err) {
console.log(err);
}
};
useEffect(() => {
setData(todo ? todo.title : null);
}, [todo, visible]);
return (
<>
<Modal
visible={visible}
footer={null}
closable={true}
onCancel={() => handleOnClose()}
destroyOnClose={true}
>
<IoIosArrowRoundBack
onClick={() => handleVisible(!visible)}
style={{ fontSize: "28px", cursor: "pointer" }}
/>
<Wrapper
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}}
>
<Head>
<Row>Edit your ToDo</Row>
</Head>
<Row>
<Input
placeholder="Type your To Do"
allowClear
value={data}
onChange={e => {
handleOnChangeTodo(e.target.value);
}}
onPressEnter={e => handleEditTodo(e.target.value)}
style={
!isTodoInputValid ? { borderColor: "red" } : {}
}
/>
</Row>
<Row style={{ paddingTop: "20px" }}>
<SaveButton
type="primary"
htmlType="submit"
onClick={e => handleEditTodo(e.target.value)}
>
Save
</SaveButton>
</Row>
</Wrapper>
</Modal>
</>
);
}
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>
</>
);
}
Example #5
| Source File: UserProfile.js From react-portal with MIT License | 4 votes |
|
UserProfile = ({ visible, openProfile, uid }) => {
const [user, setUser] = useState(null);
const [showSkeleton, setShowSkeleton] = useState(false);
useEffect(() => {
(async () => {
setShowSkeleton(true);
try {
if (uid) {
const res = await getUserService(uid);
if (res.message === "success") {
setUser(res.data);
setShowSkeleton(false);
} else {
_notification("warning", "Error", res.message);
}
}
} catch (err) {
_notification("error", "Error", err.message);
}
})();
}, [uid]);
return (
<div>
<Modal
visible={visible}
footer={null}
closable={false}
onCancel={() => openProfile(false)}
style={{ top: "20px" }}
>
<IoIosArrowRoundBack
onClick={() => openProfile(false)}
style={{ fontSize: "28px", cursor: "pointer" }}
/>
<Skeleton loading={showSkeleton} active>
{user ? (
<Wrapper>
<Row gutter={16}>
<Col span={10}>
<Avatar
size={120}
src={
<Image
src={user.image}
alt="Profilepic"
/>
}
/>
</Col>
<Col span={14}>
<NameContainer>
<Name>
{user.name} <br />
<Row style={{ paddingTop: "10px" }}>
<Col span={12}>
<Tag
color={
user.role === "lead"
? "red"
: user.role ===
"core"
? "geekblue"
: "orange"
}
style={{
marginBottom: "5px",
textTransform:
"capitalize",
fontSize: "14px",
width: "75%",
textAlign: "center"
}}
>
{user.role}
</Tag>
</Col>
<Designation span="12">
{user.designation}
</Designation>
</Row>
</Name>
<Branch>
<Row gutter={12}>
<Col
span={2}
style={{
paddingTop: "2px"
}}
>
<FaUserGraduate />
</Col>
<Col span={6}>
{user.branch
? user.branch
: "N/A"}
</Col>
<Col
span={3}
style={{
marginTop: "2px"
}}
>
<AiFillCalendar />
</Col>
<Col>
{user.year
? user.year
: "N/A"}
</Col>
</Row>
</Branch>
</NameContainer>
</Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Personal Information
</Divider>
<Row>
<Col span={12}>
<Row>
<Col span={6}>
<Logo>
<AiFillPhone
style={{ fontSize: "26px" }}
/>
</Logo>
</Col>
<Col span={218}>
<Info>
{user.contact
? user.contact
: "Not Provided"}
</Info>
</Col>
</Row>
</Col>
<Col span={12}>
<Row>
<Col span={6}>
<Logo>
<FaBirthdayCake
style={{ fontSize: "24px" }}
/>
</Logo>
</Col>
<Col span={18}>
<Info>
{user.dob
? user.dob.split("T")[0]
: "Not Provided"}
</Info>
</Col>
</Row>
</Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Bio
</Divider>
<Row
style={{
textAlign: "center",
marginRight: "auto !important",
marginLeft: "auto !important",
justifyContent: "center",
display: "flex"
}}
>
<Col span={24}>
{user.bio ? user.bio : "No Bio Available"}
</Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Contact Me
</Divider>
<Row
style={{
textAlign: "center",
marginRight: "auto !important",
marginLeft: "auto !important",
justifyContent: "center",
display: "flex"
}}
>
<Col span={2}></Col>
{user.linkedin ? (
<Col span={4}>
<a
href={user.linkedin}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<AiFillLinkedin />
</LogoStyle>
</a>
</Col>
) : null}
{user.twitter ? (
<Col span={4}>
<a
href={user.twitter}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FaTwitterSquare />
</LogoStyle>
</a>
</Col>
) : null}
<Col span={4}>
<a
href={`mailto:${user.email}`}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<MdEmail />
</LogoStyle>
</a>
</Col>
{user.portfolio ? (
<Col span={4}>
<a
href={user.portfolio}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FiLink />
</LogoStyle>
</a>
</Col>
) : null}
{user.github ? (
<Col span={4}>
<a
href={user.github}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FaGithubSquare />
</LogoStyle>
</a>
</Col>
) : null}
<Col span={2}></Col>
</Row>
<Row
style={{
float: "right",
paddingBottom: "10px"
}}
>
<span style={{ paddingRight: "10px" }}>
Last active
</span>
<Tag color="green">
{user.lastActiveAt
? moment(user.lastActiveAt).format(
"DD MMM YYYY hh:mm"
)
: "never"}
</Tag>
</Row>
</Wrapper>
) : null}
</Skeleton>
</Modal>
</div>
);
}
