added dns record view with tabs

This commit is contained in:
2021-08-10 17:17:39 +01:00
parent 259d1e0d88
commit b96aa3acbe
23 changed files with 1497 additions and 115 deletions
+114 -90
View File
@@ -12,31 +12,37 @@ const ApplicationList = (props) => {
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 className="govuk-grid-column-full">
<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>
<div className="govuk-grid-row">
<p className="govuk-body-s">Showing 1 to 10 of 54 entries</p>
<div className="govuk-grid-column-full">
<p className="govuk-body-s">
Showing 1 to 10 of 54 entries
</p>
</div>
</div>
<div className="govuk-grid-row ">
<div className="govuk-grid-column-full govuk-!-padding-left-0 govuk-!-padding-right-0">
<div className="govuk-grid-column-full">
<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">
<dd className="govuk-summary-list__key govuk-!-font-size-14 results_wider ">
Reference
</dd>
<dd className="govuk-summary-list__key govuk-!-font-size-14">
@@ -53,19 +59,21 @@ const ApplicationList = (props) => {
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<dd className="govuk-summary-list__value govuk-!-font-size-14 ">
<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>
<Link href="/dns/application-view">
<a>
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</Link>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
@@ -87,19 +95,21 @@ const ApplicationList = (props) => {
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<dd className="govuk-summary-list__value govuk-!-font-size-14 ">
<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>
<Link href="/dns/application-view">
<a>
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</Link>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
@@ -121,19 +131,21 @@ const ApplicationList = (props) => {
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<dd className="govuk-summary-list__value govuk-!-font-size-14 ">
<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>
<Link href="/dns/application-view">
<a>
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</Link>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
@@ -155,19 +167,21 @@ const ApplicationList = (props) => {
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<dd className="govuk-summary-list__value govuk-!-font-size-14 ">
<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>
<Link href="/dns/application-view">
<a>
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</Link>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
@@ -189,19 +203,21 @@ const ApplicationList = (props) => {
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<dd className="govuk-summary-list__value govuk-!-font-size-14 ">
<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>
<Link href="/dns/application-view">
<a>
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</Link>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
@@ -223,19 +239,21 @@ const ApplicationList = (props) => {
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<dd className="govuk-summary-list__value govuk-!-font-size-14 ">
<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>
<Link href="/dns/application-view">
<a>
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</Link>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
@@ -257,19 +275,21 @@ const ApplicationList = (props) => {
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<dd className="govuk-summary-list__value govuk-!-font-size-14 ">
<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>
<Link href="/dns/application-view">
<a>
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</Link>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
@@ -291,19 +311,21 @@ const ApplicationList = (props) => {
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<dd className="govuk-summary-list__value govuk-!-font-size-14 ">
<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>
<Link href="/dns/application-view">
<a>
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</Link>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
@@ -328,22 +350,24 @@ const ApplicationList = (props) => {
</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 className="govuk-grid-column-full">
<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>
</div>
</>
);