added dns landing page and others

This commit is contained in:
2021-08-09 16:34:04 +01:00
parent aa0ccef280
commit edb3a06076
15 changed files with 1300 additions and 5 deletions
+48 -2
View File
@@ -50,9 +50,15 @@ const Breadcrumbs = (props) => {
</Link>
</li>
<li className="govuk-breadcrumbs__list-item">
<Link href="/">
<Link
href={
router.pathname.includes("dns") ? "/dns" : "/"
}
>
<a className="govuk-breadcrumbs__link">
{t("common:service-name")}
{router.pathname.includes("dns")
? "Developments of National Significance"
: t("common:service-name")}
</a>
</Link>
</li>
@@ -238,6 +244,46 @@ const Breadcrumbs = (props) => {
) : (
""
)}
{router.pathname == "/dns" ? (
<>
<li className="govuk-breadcrumbs__list-item">
<Link href="/dns">
<a className="govuk-breadcrumbs__link">
Developments of National Significance
</a>
</Link>
</li>
</>
) : (
""
)}
{router.pathname == "/dns/application-process" ? (
<>
<li className="govuk-breadcrumbs__list-item">
Guidance
</li>
</>
) : (
""
)}
{router.pathname == "/dns/help" ? (
<>
<li className="govuk-breadcrumbs__list-item">
Help
</li>
</>
) : (
""
)}
{router.pathname == "/dns/contact-us" ? (
<>
<li className="govuk-breadcrumbs__list-item">
Contact us
</li>
</>
) : (
""
)}
{!_.isEmpty(slug) ? (
<>
<li className="govuk-breadcrumbs__list-item">
@@ -0,0 +1,44 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";
const ApplicationIntro = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<div className="govuk-grid-row">
<div className="govuk-grid-column-one-half">
<h1 className="govuk-heading-l">Applications</h1>
<p className="govuk-body">The applications listed are those:</p>
<ul className="govuk-list govuk-list--bullet">
<li>
Where the developer has advised the Planning
Inspectorate in writing that they intend to submit an
application to us in the future
</li>
<li>
Where an application has already been made to the
Planning Inspectorate and is undergoing the examination
process
</li>
<li>Where a proposal has been decided.</li>
</ul>
<p>
Use the table below to find applications by stage or type.
Alternatively, use the map by clicking on the markers to go
to the applications page. A list of key events and deadlines
for all applications is available on our calendar page.
</p>
</div>
<div className="govuk-grid-column-one-half">
<img src="https://via.placeholder.com/450" />
</div>
</div>
);
};
export default ApplicationIntro;
@@ -0,0 +1,352 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";
const ApplicationList = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<>
<div className="govuk-grid-row govuk-!-margin-top-9">
<div className="govuk-form-group">
<label className="govuk-label-s " htmlFor="sort">
Show{" "}
<select
className="govuk-select"
id="showNo"
name="showNo"
>
<option value="1">10</option>
<option value="1">25</option>
<option value="1">50</option>
<option value="1">100</option>
</select>{" "}
Entries
</label>
</div>
</div>
<div className="govuk-grid-row">
<p className="govuk-body-s">Showing 1 to 10 of 54 entries</p>
</div>
<div className="govuk-grid-row ">
<div className="govuk-grid-column-full govuk-!-padding-left-0 govuk-!-padding-right-0">
<dl className="govuk-summary-list govuk-!-margin-bottom-0 results">
<div className="govuk-summary-list__row results-headings">
<dd className="govuk-summary-list__key govuk-!-font-size-14 results_wider govuk-!-padding-left-2">
Reference
</dd>
<dd className="govuk-summary-list__key govuk-!-font-size-14">
Application
</dd>
<dd className="govuk-summary-list__key govuk-!-font-size-14">
Developer{" "}
</dd>
<dd className="govuk-summary-list__key govuk-!-font-size-14">
Type
</dd>
<dd className="govuk-summary-list__key govuk-!-font-size-14">
Status
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<span className="results-visually-hidden">
Reference:
</span>
CAS-00009-W8N6W4
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<a href="/application-view">
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Developer:
</span>
Menter Mon
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Type:
</span>
Energy
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Status:
</span>
Recommendation
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<span className="results-visually-hidden">
Reference:
</span>
CAS-00009-W8N6W4
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<a href="/application-view">
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Developer:
</span>
Menter Mon
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Type:
</span>
Energy
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Status:
</span>
Recommendation
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<span className="results-visually-hidden">
Reference:
</span>
CAS-00009-W8N6W4
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<a href="/application-view">
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Developer:
</span>
Menter Mon
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Type:
</span>
Energy
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Status:
</span>
Recommendation
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<span className="results-visually-hidden">
Reference:
</span>
CAS-00009-W8N6W4
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<a href="/application-view">
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Developer:
</span>
Menter Mon
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Type:
</span>
Energy
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Status:
</span>
Recommendation
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<span className="results-visually-hidden">
Reference:
</span>
CAS-00009-W8N6W4
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<a href="/application-view">
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Developer:
</span>
Menter Mon
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Type:
</span>
Energy
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Status:
</span>
Recommendation
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<span className="results-visually-hidden">
Reference:
</span>
CAS-00009-W8N6W4
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<a href="/application-view">
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Developer:
</span>
Menter Mon
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Type:
</span>
Energy
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Status:
</span>
Recommendation
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<span className="results-visually-hidden">
Reference:
</span>
CAS-00009-W8N6W4
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<a href="/application-view">
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Developer:
</span>
Menter Mon
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Type:
</span>
Energy
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Status:
</span>
Recommendation
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<span className="results-visually-hidden">
Reference:
</span>
CAS-00009-W8N6W4
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<a href="/application-view">
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Developer:
</span>
Menter Mon
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Type:
</span>
Energy
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Status:
</span>
Recommendation
</dd>
</div>
</dl>
</div>
</div>
<div className="govuk-grid-row ">
<p>
Previous <span>1</span>{" "}
<span>
<Link href="#">2</Link>
</span>{" "}
<span>
<Link href="#">3</Link>
</span>{" "}
<span>
<Link href="#">4</Link>
</span>{" "}
<span>
<Link href="#">5</Link>
</span>{" "}
<Link href="#">Next</Link>
</p>
</div>
</>
);
};
export default ApplicationList;
@@ -0,0 +1,26 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
const ApplicationsForComment = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<div className="govuk-panel govuk-grid-column-one-third govuk-panel--open-for-comments">
<h2 className="govuk-heading-m">Applications open for comments</h2>
<div className="govuk-panel__body">
<ul className="govuk-list">
<li>
<a className="govuk-body-s " href="">
Holyhead Harbour Revision Order
</a>
</li>
</ul>
</div>
</div>
);
};
export default ApplicationsForComment;
+78
View File
@@ -0,0 +1,78 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
const DNSLinks = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<div className="govuk-grid-column-two-thirds govuk-panel--dns-links govuk-!-padding-top-5">
<div className="govuk-grid-column-one-half">
<ul className="govuk-list">
<li>
<h3 className="govuk-heading-l govuk-!-font-size-27">
<Link href="/dns/applications">
<a className="govuk-link govuk-link--no-underline">
Applications
</a>
</Link>
<p className="govuk-body-s govuk-!-padding-top-2">
A list of all the Developments of National
Significance that have already been submitted
and those we are expecting to be submitted.
</p>
</h3>
</li>
<li>
<h3 className="govuk-heading-l govuk-!-font-size-27">
<Link href="/dns/help">
<a className="govuk-link govuk-link--no-underline">
Help
</a>
</Link>
<p className="govuk-body-s govuk-!-padding-top-2">
Information about this website.
</p>
</h3>
</li>
</ul>
</div>
<div className="govuk-grid-column-one-half">
<ul className="govuk-list">
<li>
<h3 className="govuk-heading-l govuk-!-font-size-27">
<Link href="/dns/application-process">
<a className="govuk-link govuk-link--no-underline ">
Guidance
</a>
</Link>
<p className="govuk-body-s govuk-!-padding-top-2">
An overview and detailed guidance on the
Developments of National Significance
application process
</p>
</h3>
</li>
<li>
<h3 className="govuk-heading-l govuk-!-font-size-27">
<a
className="govuk-link govuk-link--no-underline"
href="#"
>
Contact us{" "}
</a>
<p className="govuk-body-s govuk-!-padding-top-2">
How to get in touch with The Planning
Inspectorate.
</p>
</h3>
</li>
</ul>
</div>
</div>
);
};
export default DNSLinks;
@@ -0,0 +1,35 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
const LatestApplications = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<div className="govuk-panel govuk-grid-column-one-third govuk-panel--latest">
<h2 className="govuk-heading-m">Latest Applications</h2>
<div className="govuk-panel__body">
<ul className="govuk-list">
<li className="govuk-body-s ">
<a href="">Brynrhyd Solar Farm</a>
</li>
<li className="govuk-body-s ">
<a href="">Brynrhyd Solar Farm</a>
</li>
<li className="govuk-body-s ">
<a href="">Brynrhyd Solar Farm</a>
</li>
<li className="govuk-body-s ">
<a href="">Brynrhyd Solar Farm</a>
</li>
</ul>
</div>
</div>
);
};
export default LatestApplications;
+43
View File
@@ -0,0 +1,43 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
const TitleContent = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<div className="govuk-panel govuk-grid-column-two-thirds govuk-panel--header">
<h1 className="govuk-panel__title">
Developments of National Significance
</h1>
<div className="govuk-panel__body">
<p className="govuk-body-s">
A Development of National Significance (DNS) is a type of
planning application for a large infrastructure project of
national importance in Wales. Here you can find out about
proposed DNS applications. This site is managed by the
Planning Inspectorate.
</p>
</div>
<div className="govuk-form-group govuk-!-margin-bottom-0">
<input
className="govuk-input govuk-!-width-one-half"
id="one-third"
name="one-third"
type="text"
placeholder="Search application name"
/>
<button
className="govuk-button govuk-!-margin-bottom-0"
data-module="govuk-button"
>
Search
</button>
</div>
</div>
);
};
export default TitleContent;
+40
View File
@@ -0,0 +1,40 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";
import TitleContent from "./homepage/titleContent";
import LatestApplications from "./homepage/latestApplications";
import DNSLinks from "./homepage/dnsLinks";
import ApplicationsForComment from "./homepage/applicationsForComment";
export default function Main({ children, pages }) {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<main
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
id="main-content"
role="main"
>
<div className="govuk-grid-row govuk-!-margin-bottom-0">
<div className="govuk-grid-column-full govuk-!-padding-bottom-0">
<div className="flex-container grid-row govuk-body govuk-!-margin-bottom-0 ">
<TitleContent />
<LatestApplications />
</div>
</div>
</div>
<div className="govuk-grid-row govuk-!-margin-top-0">
<div className="govuk-grid-column-full">
<div className="flex-container grid-row govuk-body ">
<DNSLinks />
<ApplicationsForComment />
</div>
</div>
</div>
</main>
);
}
+39 -3
View File
@@ -8,8 +8,23 @@ const Header = (props) => {
const router = useRouter();
const { locale } = router;
const { setLogout } = props;
const noSignoutLink = ["/", "/logout"];
const { setLogout, serviceName } = props;
const noSignoutLink = [
"/",
"/logout",
"/dns",
"/dns/application-process",
"/dns/help",
"/dns/contact-us",
"/dns/applications",
];
const hasContactLink = [
"/dns",
"/dns/application-process",
"/dns/help",
"/dns/contact-us",
"/dns/applications",
];
return (
<header
@@ -72,7 +87,7 @@ const Header = (props) => {
className="govuk-header__link
govuk-header__link--service-name"
>
{t("common:service-name")}
{serviceName || t("common:service-name")}
</a>
</Link>
</div>
@@ -99,6 +114,18 @@ const Header = (props) => {
</div>
<div className="content">
<ul>
{hasContactLink.includes(router.pathname) ==
true ? (
<li>
<Link href="/dns/contact-us">
<a className="govuk-header__link ">
Contact
</a>
</Link>
</li>
) : (
""
)}
{noSignoutLink.includes(router.pathname) ==
true ? (
""
@@ -157,6 +184,15 @@ const Header = (props) => {
</div>
</div>
<div className="fullNav">
{hasContactLink.includes(router.pathname) == true ? (
<Link href="/dns/contact-us">
<a className="govuk-header__link govuk-!-margin-right-3">
Contact
</a>
</Link>
) : (
""
)}
{noSignoutLink.includes(router.pathname) == true ? (
""
) : (