react-icons/ai#AiOutlineHome JavaScript Examples
The following examples show how to use
react-icons/ai#AiOutlineHome.
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: BlogPage.js From developer-portfolio with Apache License 2.0 | 4 votes |
|
function BlogPage() {
const [search, setSearch] = useState('')
const { theme } = useContext(ThemeContext);
const filteredArticles = blogData.filter((blog) => {
const content = blog.title + blog.description + blog.date
return content.toLowerCase().includes(search.toLowerCase())
})
const useStyles = makeStyles((t) => ({
search : {
color: theme.tertiary,
width: '40%',
height: '2.75rem',
outline: 'none',
border: 'none',
borderRadius: '20px',
padding: '0.95rem 1rem',
fontFamily: "'Noto Sans TC', sans-serif",
fontWeight: 500,
fontSize: '0.9rem',
backgroundColor: theme.secondary,
boxShadow: theme.type === 'dark' ? 'inset 3px 3px 6px #ffffff10, inset -3px -3px 6px #00000060' : 'inset 3px 3px 6px #ffffffbd, inset -3px -3px 6px #00000030',
"&::placeholder": {
color: theme.tertiary80,
},
[t.breakpoints.down('sm')]: {
width:'350px',
},
},
home: {
color: theme.secondary,
position: 'absolute',
top: 25,
left: 25,
padding: '7px',
borderRadius: '50%',
boxSizing: 'content-box',
fontSize: '2rem',
cursor: 'pointer',
boxShadow: theme.type === 'dark' ? '3px 3px 6px #ffffff40, -3px -3px 6px #00000050' : '3px 3px 6px #ffffff40, -3px -3px 6px #00000050',
transition: 'all 0.3s ease-in-out',
"&:hover":
{
color: theme.tertiary,
transform: 'scale(1.1)',
},
[t.breakpoints.down('sm')]: {
fontSize: '1.8rem',
},
},
}));
const classes = useStyles();
return (
<div className="blogPage" style={{backgroundColor: theme.secondary}}>
<Helmet>
<title>{headerData.name} | Blog</title>
</Helmet>
<div className="blogPage--header" style={{backgroundColor: theme.primary}}>
<Link to="/">
<AiOutlineHome className={classes.home}/>
</Link>
<h1 style={{color: theme.secondary}}>Blogs</h1>
</div>
<div className="blogPage--container">
<div className="blog--search">
<input type="text" value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Seach blog..." className={classes.search}/>
</div>
<div className="blogs--container">
<Grid className="blog-grid" container direction="row" alignItems="center" justifyContent="center">
{filteredArticles.reverse().map(blog => (
<SingleBlog
theme={theme}
title={blog.title}
desc={blog.description}
date={blog.date}
image={blog.image}
url={blog.url}
key={blog.id}
id={blog.id}
/>
))}
</Grid>
</div>
</div>
</div>
)
}
Example #2
| Source File: ProjectPage.js From developer-portfolio with Apache License 2.0 | 4 votes |
|
function ProjectPage() {
const [search, setSearch] = useState('')
const { theme } = useContext(ThemeContext);
const filteredArticles = projectsData.filter((project) => {
const content = project.projectName + project.projectDesc + project.tags
return content.toLowerCase().includes(search.toLowerCase())
})
const useStyles = makeStyles((t) => ({
search : {
color: theme.tertiary,
width: '40%',
height: '2.75rem',
outline: 'none',
border: 'none',
borderRadius: '20px',
padding: '0.95rem 1rem',
fontFamily: "'Noto Sans TC', sans-serif",
fontWeight: 500,
fontSize: '0.9rem',
backgroundColor: theme.secondary,
boxShadow: theme.type === 'dark' ? 'inset 3px 3px 6px #ffffff10, inset -3px -3px 6px #00000060' : 'inset 3px 3px 6px #ffffffbd, inset -3px -3px 6px #00000030',
"&::placeholder": {
color: theme.tertiary80,
},
[t.breakpoints.down('sm')]: {
width:'350px',
},
},
home: {
color: theme.secondary,
position: 'absolute',
top: 25,
left: 25,
padding: '7px',
borderRadius: '50%',
boxSizing: 'content-box',
fontSize: '2rem',
cursor: 'pointer',
boxShadow: theme.type === 'dark' ? '3px 3px 6px #ffffff40, -3px -3px 6px #00000050' : '3px 3px 6px #ffffff40, -3px -3px 6px #00000050',
transition: 'all 0.3s ease-in-out',
"&:hover":
{
color: theme.tertiary,
transform: 'scale(1.1)',
},
[t.breakpoints.down('sm')]: {
fontSize: '1.8rem',
},
},
}));
const classes = useStyles();
return (
<div className="projectPage" style={{backgroundColor: theme.secondary}}>
<Helmet>
<title>{headerData.name} | Projects</title>
</Helmet>
<div className="projectPage-header" style={{backgroundColor:theme.primary}}>
<Link to="/">
<AiOutlineHome className={classes.home}/>
</Link>
<h1 style={{color: theme.secondary}}>Projects</h1>
</div>
<div className="projectPage-container">
<div className="projectPage-search">
<input type="text" value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search project..." className={classes.search} />
</div>
<div className="project-container">
<Grid className="project-grid" container direction="row" alignItems="center" justifyContent="center">
{filteredArticles.map(project => (
<SingleProject
theme={theme}
key={project.id}
id={project.id}
name={project.projectName}
desc={project.projectDesc}
tags={project.tags}
code={project.code}
demo={project.demo}
image={project.image}
/>
))}
</Grid>
</div>
</div>
</div>
)
}
