Skip to content

Commit

Permalink
feat(no-results-page): add contact us block with inline css for now
Browse files Browse the repository at this point in the history
  • Loading branch information
@willian-viana @wri7tno
willian-viana authored and wri7tno committed Mar 7, 2024
1 parent 4502f53 commit a8f957c
Show file tree
Hide file tree
Showing 3 changed files with 172 additions and 91 deletions.
Binary file added assets/images/no-results-bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
263 changes: 172 additions & 91 deletions layouts/archive/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
theme,
Loader,
Button,
ContactUsModal,
} from '@worldresources/gfw-components';
import compact from 'lodash/compact';

Expand All @@ -17,6 +18,7 @@ import { translateText } from 'utils/lang';
import Card from 'components/card';
import Breadcrumbs from 'components/breadcrumbs';
import Dropdown from 'components/dropdown';
// import Slider from 'components/slider'

import {
Wrapper,
Expand Down Expand Up @@ -77,6 +79,7 @@ const ArchivePage = ({
const [posts, setPosts] = useState(firstPagePosts || []);
const [page, setPage] = useState(1);
const [loading, setLoading] = useState(false);
const [open, setOpen] = useState(false);

useEffect(() => {
setPosts(firstPagePosts);
Expand Down Expand Up @@ -110,119 +113,197 @@ const ArchivePage = ({
}, [page]);

return (
<Wrapper>
<Row
css={css`
position: relative;
min-height: 40px;
`}
>
<Column width={[3 / 4]}>
<Breadcrumbs
css={css`
margin-bottom: 25px;
${theme.mediaQueries.small} {
margin-bottom: 40px;
}
`}
links={breadCrumbs}
/>
</Column>
{!isSearch && (
<Column width={[1 / 4]}>
<SearchMobile expandable />
</Column>
)}
{isSearch && (
<>
<Column>
<SearchDesktop expanded isSearch />
</Column>
</>
)}
</Row>
{!isSearch && (
<>
<Wrapper>
<Row
css={css`
position: relative;
min-height: 40px;
`}
>
<Column width={[1, 2 / 3]}>
<Dropdown items={allTaxOptions} selected={tax?.id} />
<Column width={[3 / 4]}>
<Breadcrumbs
css={css`
margin-bottom: 25px;
${theme.mediaQueries.small} {
margin-bottom: 40px;
}
`}
links={breadCrumbs}
/>
</Column>
<Column width={[1, 1 / 3]}>
<SearchDesktop showTitle expandable />
{!isSearch && (
<Column width={[1 / 4]}>
<SearchMobile expandable />
</Column>
)}
{isSearch && (
<>
<Column>
<h1
css={css`
font-size: 3.75rem;
`}
>
No Results for Lorem Ipsum
</h1>
{/* <SearchDesktop expanded isSearch /> */}
</Column>
</>
)}
</Row>
{!isSearch && (
<Row
css={css`
position: relative;
`}
>
<Column width={[1, 2 / 3]}>
<Dropdown items={allTaxOptions} selected={tax?.id} />
</Column>
<Column width={[1, 1 / 3]}>
<SearchDesktop showTitle expandable />
</Column>
{tax?.description && (
<Column
width={[1, 3 / 4]}
css={css`
margin-bottom: 20px !important;
`}
>
<CategoryDescription>{tax.description}</CategoryDescription>
</Column>
)}
</Row>
)}
<Row>
<Column
css={css`
margin-bottom: 20px !important;
`}
>
<ResultsStatement>
{translateText(resultsStatement, { totalPosts })}
</ResultsStatement>
</Column>
{tax?.description && (
{posts?.map(({ id, ...rest }) => (
<Column
width={[1, 3 / 4]}
width={[1, 1 / 2, 1 / 3]}
css={css`
margin-bottom: 20px !important;
margin-bottom: 40px !important;
`}
key={id}
>
<CategoryDescription>{tax.description}</CategoryDescription>
<Card {...rest} />
</Column>
)}
))}
<Column>
<Row nested>
<Column width={[1 / 12, 1 / 3]} />
<LoadMoreWrapper width={[5 / 6, 1 / 3]}>
{loading && (
<div
style={{
position: 'relative',
width: '50px',
height: '50px',
}}
>
<Loader />
</div>
)}
{!loading && page < totalPages && (
<Button
onClick={() => {
setPage(page + 1);
trackEvent({
category: 'GFW Blog',
label: 'User clicks on more articles button',
action: 'Load more articles',
});
}}
css={css`
width: 100%;
`}
>
Load more articles
</Button>
)}
</LoadMoreWrapper>
</Row>
</Column>
</Row>
)}
<Row>

<Row>
{/* <Slider cards={[mainPost, ...subPosts]} title="Featured Articles" /> */}
</Row>
{/* <Row
css={css`
${theme.mediaQueries.small} {
display: none;
}
`}
>
<Slider
cards={relatedPosts}
title='Explore More Articles'
backgroundImageUrl='../../images/prefooter-mobile.png'
/>
</Row> */}
</Wrapper>
<Row
css={css`
background-size: cover;
background-image: url('images/hero-bg-mobile.png');
max-width: 100%;
width: 100%;
height: 20.5625rem;
${theme.mediaQueries.small} {
background-image: url('images/hero-bg-desktop.png');
}
`}
>
<Column
css={css`
margin-bottom: 20px !important;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
background-size: cover;
background-position: center;
background-image: url('../../images/no-results-bg.png');
`}
>
<ResultsStatement>
{translateText(resultsStatement, { totalPosts })}
</ResultsStatement>
</Column>
{posts?.map(({ id, ...rest }) => (
<Column
width={[1, 1 / 2, 1 / 3]}
<h2
css={css`
margin-bottom: 40px !important;
font-size: 2.5rem;
color: #fff;
margin-bottom: 2.25rem;
font-family: Fira Sans;
font-style: normal;
font-weight: 400;
line-height: 3rem;
letter-spacing: 0.01563rem;
text-align: center;
`}
key={id}
>
<Card {...rest} />
</Column>
))}
<Column>
<Row nested>
<Column width={[1 / 12, 1 / 3]} />
<LoadMoreWrapper width={[5 / 6, 1 / 3]}>
{loading && (
<div
style={{
position: 'relative',
width: '50px',
height: '50px',
}}
>
<Loader />
</div>
)}
{!loading && page < totalPages && (
<Button
onClick={() => {
setPage(page + 1);
trackEvent({
category: 'GFW Blog',
label: 'User clicks on more articles button',
action: 'Load more articles',
});
}}
css={css`
width: 100%;
`}
>
Load more articles
</Button>
)}
</LoadMoreWrapper>
</Row>
Not Finding What You&apos;re Looking For?
</h2>
<Button
css={css`
color: rgb(151, 190, 50);
font-size: 1rem;
`}
onClick={() => setOpen(!open)}
light
size="large"
>
Contact Us
</Button>
</Column>
</Row>
</Wrapper>
<ContactUsModal open={open} onRequestClose={() => setOpen(false)} />
</>
);
};

Expand Down
Binary file added public/images/no-results-bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a8f957c

Please sign in to comment.