Verified Commit 934747d5 authored by Rick van der Staaij's avatar Rick van der Staaij 🏋🏻
Browse files

Creating contact form component

parent f9db6462
......@@ -7,14 +7,10 @@ root = true
[*]
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_style = tab
indent_size = 4
trim_trailing_whitespace = true
# Makefiles must have tabs
[Makefile]
indent_style = tab
# Yaml should have 2 spaces due to its weird array structure
[{*.yml,*.yaml}]
indent_size = 2
......@@ -6,3 +6,4 @@ node_modules/
# Next
.next/
.env
import React, { ReactElement } from 'react';
const ContactForm = (): ReactElement => {
return (
<div>
<br />
<br />
Contact form
</div>
);
};
export default ContactForm;
export { default } from './ContactForm';
......@@ -2,78 +2,77 @@ import React, { ReactElement } from 'react';
import styled from 'styled-components';
import GlassBar from 'components/Layout/GlassBar';
import links from './links';
const Bar = styled.div`
animation-delay: 800ms;
width: 100%;
${({ theme }) => theme.background.fabric}
text-align: center;
color: ${({ theme }) => theme.color.white};
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 1rem;
gap: 1rem;
animation-delay: 800ms;
width: 100%;
${({ theme }) => theme.background.fabric}
text-align: center;
color: ${({ theme }) => theme.color.white};
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 1rem;
gap: 1rem;
> a {
display: block;
color: ${({ theme }) => theme.color.white};
font-size: 1.1rem;
margin: 0rem 1rem;
}
> a {
display: block;
color: ${({ theme }) => theme.color.white};
font-size: 1.1rem;
margin: 0rem 1rem;
}
`;
const Options = styled.div`
border-radius: ${({ theme }) => theme.border.small};
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
border-radius: ${({ theme }) => theme.border.small};
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
`;
const Option = styled.a`
display: flex;
flex-direction: row;
height: 2rem;
width: 2rem;
overflow: hidden;
transition: width 200ms;
color: ${({ theme }) => theme.color.text};
display: flex;
flex-direction: row;
height: 2rem;
width: 2rem;
overflow: hidden;
transition: width 200ms;
color: ${({ theme }) => theme.color.text};
`;
const Icon = styled.div`
height: 2rem;
width: 2rem;
flex-shrink: 0;
height: 2rem;
width: 2rem;
flex-shrink: 0;
> svg {
width: 2rem;
height: 2rem;
fill: ${({ theme }) => theme.color.primary};
}
> svg {
width: 2rem;
height: 2rem;
fill: ${({ theme }) => theme.color.primary};
}
`;
const Footer = (): ReactElement => (
<Bar className="animate__animated animate__fadeInUp">
<a rel="noreferrer" href="https://gitlab.com/FuturePortal/RickvanderStaaij/" target="_blank">
Rick van der Staaij &copy; {new Date().getFullYear()}
</a>
<Options>
{links.map((link, index) => {
const Svg = link.icon;
return (
<Option key={index} href={link.url} title={link.name} target="_blank">
<Icon>
<Svg />
</Icon>
</Option>
);
})}
</Options>
</Bar>
<Bar className="animate__animated animate__fadeInUp">
<a rel="noreferrer" href="https://gitlab.com/FuturePortal/RickvanderStaaij/" target="_blank">
Rick van der Staaij &copy; {new Date().getFullYear()}
</a>
<Options>
{links.map((link, index) => (
<Option key={index} href={link.url} title={link.name} target="_blank">
<Icon>
<link.icon />
</Icon>
</Option>
))}
</Options>
<GlassBar position="top" />
</Bar>
);
export default Footer;
......@@ -8,83 +8,83 @@ import useInternalLink from 'components/Layout/Go/useInternalLink';
import MenuToggle from 'components/Layout/MenuToggle';
import links from './links';
import {
Brand,
BrandBlock,
CurrentRouteLink,
MenuBar,
MenuContainer,
MobileToggle,
RouteLink,
Routes,
StickySpace,
Brand,
BrandBlock,
CurrentRouteLink,
MenuBar,
MenuContainer,
MobileToggle,
RouteLink,
Routes,
StickySpace,
} from './Nav.style';
type ItemProps = {
name: string;
target: string;
name: string;
target: string;
};
const Item = ({ target, name }: ItemProps) => {
const router = useRouter();
const href = useInternalLink(target);
const router = useRouter();
const href = useInternalLink(target);
if (router.pathname === target) {
return <CurrentRouteLink>{name}</CurrentRouteLink>;
}
if (router.pathname === target) {
return <CurrentRouteLink>{name}</CurrentRouteLink>;
}
return <RouteLink {...href}>{name}</RouteLink>;
return <RouteLink {...href}>{name}</RouteLink>;
};
const Nav = (): ReactElement => {
const router = useRouter();
const [menuOpen, setMenuOpen] = useState<boolean>(false);
const [isSticky, setSticky] = useState<boolean>(false);
const router = useRouter();
const [menuOpen, setMenuOpen] = useState<boolean>(false);
const [isSticky, setSticky] = useState<boolean>(false);
const closeMenuAndClearAnimationDelay = () => {
setMenuOpen(false);
AnimationDelay.clearDelay();
};
const closeMenuAndClearAnimationDelay = () => {
setMenuOpen(false);
AnimationDelay.clearDelay();
};
const onScroll = (event) => {
const scrollTop = event.target.documentElement.scrollTop;
const sticky = scrollTop > 12 * 16;
setSticky(sticky);
};
const onScroll = (event) => {
const scrollTop = event.target.documentElement.scrollTop;
const sticky = scrollTop > 12 * 16;
setSticky(sticky);
};
useEffect(() => {
router.events.on('routeChangeStart', closeMenuAndClearAnimationDelay);
window.addEventListener('page-outro', closeMenuAndClearAnimationDelay);
window.addEventListener('scroll', onScroll);
useEffect(() => {
router.events.on('routeChangeStart', closeMenuAndClearAnimationDelay);
window.addEventListener('page-outro', closeMenuAndClearAnimationDelay);
window.addEventListener('scroll', onScroll);
return () => {
router.events.off('routeChangeStart', closeMenuAndClearAnimationDelay);
window.removeEventListener('page-outro', closeMenuAndClearAnimationDelay);
window.removeEventListener('scroll', onScroll);
};
}, []);
return () => {
router.events.off('routeChangeStart', closeMenuAndClearAnimationDelay);
window.removeEventListener('page-outro', closeMenuAndClearAnimationDelay);
window.removeEventListener('scroll', onScroll);
};
}, []);
return (
<>
<MenuBar sticky={isSticky} className="animate__animated animate__fadeInDown">
<MenuContainer>
<BrandBlock>
<Brand {...useInternalLink('/')}>Rick van der Staaij</Brand>
<MobileToggle>
<MenuToggle onToggle={() => setMenuOpen(!menuOpen)} open={menuOpen} />
</MobileToggle>
</BrandBlock>
<Routes open={menuOpen} amountOfLinks={links.length}>
{links.map(({ uri, name }) => (
<Item name={name} target={uri} key={uri} />
))}
</Routes>
</MenuContainer>
<GlassBar position="top" />
<GlassBar position="bottom" />
</MenuBar>
<StickySpace />
</>
);
return (
<>
<MenuBar sticky={isSticky} className="animate__animated animate__fadeInDown">
<MenuContainer>
<BrandBlock>
<Brand {...useInternalLink('/')}>Rick van der Staaij</Brand>
<MobileToggle>
<MenuToggle onToggle={() => setMenuOpen(!menuOpen)} open={menuOpen} />
</MobileToggle>
</BrandBlock>
<Routes open={menuOpen} amountOfLinks={links.length}>
{links.map(({ uri, name }) => (
<Item name={name} target={uri} key={uri} />
))}
</Routes>
</MenuContainer>
<GlassBar position="top" />
<GlassBar position="bottom" />
</MenuBar>
<StickySpace />
</>
);
};
export default Nav;
......@@ -51,6 +51,10 @@ spec:
value: "$RECAPTCHA_SECRET"
- name: EMAIL_RECEIVER
value: "$EMAIL_RECEIVER"
- name: RECAPTCHA_SITE_KEY
value: "$RECAPTCHA_SITE_KEY"
- name: RECAPTCHA_SECRET_KEY
value: "$RECAPTCHA_SECRET_KEY"
livenessProbe:
httpGet:
path: /api/_health
......
......@@ -50,6 +50,10 @@ spec:
value: "$RECAPTCHA_SECRET"
- name: EMAIL_RECEIVER
value: "$GITLAB_USER_EMAIL"
- name: RECAPTCHA_SITE_KEY
value: "$RECAPTCHA_SITE_KEY"
- name: RECAPTCHA_SECRET_KEY
value: "$RECAPTCHA_SECRET_KEY"
livenessProbe:
httpGet:
path: /api/_health
......
import type { NextApiRequest, NextApiResponse } from 'next';
export default (req: NextApiRequest, res: NextApiResponse) => {
res.status(200).json({ name: 'John Doe' });
};
import React, { ReactElement } from 'react';
import ContactForm from 'components/ContactForm';
import ContactMap from 'components/ContactMap';
import PageMeta from 'components/Layout/PageMeta';
const Page = (): ReactElement => (
<>
<PageMeta title="Contact me" description="Check all the different ways to contact Rick." />
<ContactMap />
</>
<>
<PageMeta title="Contact me" description="Check all the different ways to contact Rick." />
<ContactForm />
<ContactMap />
</>
);
export default Page;
......@@ -3778,7 +3778,7 @@ hmac-drbg@^1.0.1:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"
hoist-non-react-statics@^3.0.0:
hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
......@@ -5599,6 +5599,15 @@ prop-types@15.7.2, prop-types@^15.7.2:
object-assign "^4.1.1"
react-is "^16.8.1"
prop-types@^15.5.0:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
dependencies:
loose-envify "^1.4.0"
object-assign "^4.1.1"
react-is "^16.13.1"
proto-list@~1.2.1:
version "1.2.4"
resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
......@@ -5721,6 +5730,14 @@ rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-async-script@^1.1.1:
version "1.2.0"
resolved "https://registry.yarnpkg.com/react-async-script/-/react-async-script-1.2.0.tgz#ab9412a26f0b83f5e2e00de1d2befc9400834b21"
integrity sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==
dependencies:
hoist-non-react-statics "^3.3.0"
prop-types "^15.5.0"
react-dom@^17.0.1:
version "17.0.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
......@@ -5730,7 +5747,15 @@ react-dom@^17.0.1:
object-assign "^4.1.1"
scheduler "^0.20.1"
react-is@16.13.1, react-is@^16.7.0, react-is@^16.8.1:
react-google-recaptcha@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz#9f6f4954ce49c1dedabc2c532347321d892d0a16"
integrity sha512-K9jr7e0CWFigi8KxC3WPvNqZZ47df2RrMAta6KmRoE4RUi7Ys6NmNjytpXpg4HI/svmQJLKR+PncEPaNJ98DqQ==
dependencies:
prop-types "^15.5.0"
react-async-script "^1.1.1"
react-is@16.13.1, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment