Added search and results mocks

This commit is contained in:
2021-06-29 16:35:11 +01:00
parent c712d41599
commit b488caa013
35 changed files with 1581 additions and 108 deletions
+39
View File
@@ -0,0 +1,39 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";
import SearchForCase from "./search/searchforcase";
import AdvancedSearch from "./search/advancedsearch";
export default function Search({ 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">
<div className="govuk-grid-column-full">
<SearchForCase />
</div>
</div>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<AdvancedSearch />
</div>
</div>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<Link href="/searchresults">
<a className="govuk-button ">Search</a>
</Link>
</div>
</div>
</main>
);
}
+42 -41
View File
@@ -3,47 +3,48 @@ import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
export default function CaseSearch() {
let { t } = useTranslation();
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<div className="card" id="casesearch-card">
<div className="card-body">
<h3 className="heading-small card-heading">{t("home:casesearch-card-title")}</h3>
<div class="govuk-form-group">
<div id="event-name-hint" classNAme="govuk-hint ">
{t("home:casesearch-card-search-hint")}:
<br />
<span className="govuk-body-s">
{" "}
<span className="govuk-!-font-weight-bold">{t("home:casesearch-card-search-example-label")}:</span>{" "}
APP/A1234/A/99/1234567
</span>
</div>
<input
className="govuk-input"
id="event-name"
name="event-name"
type="text"
aria-describedby="event-name-hint"
/>
const router = useRouter();
const { locale } = router;
return (
<div className="card" id="casesearch-card">
<div className="card-body">
<h3 className="heading-small card-heading">
{t("home:casesearch-card-title")}
</h3>
<div class="govuk-form-group">
<div id="event-name-hint" classNAme="govuk-hint ">
{t("home:casesearch-card-search-hint")}:
<br />
<span className="govuk-body-s">
{" "}
<span className="govuk-!-font-weight-bold">
{t("home:casesearch-card-search-example-label")}
:
</span>{" "}
APP/A1234/A/99/1234567
</span>
</div>
<input
className="govuk-input"
id="event-name"
name="event-name"
type="text"
aria-describedby="event-name-hint"
/>
</div>
<div class="govuk-form-group">
<Link href="/searchresults">
<a className="govuk-button">
{t("home:casesearch-card-button")}
</a>
</Link>
</div>
<Link href="/advancedsearch">
<a>{t("home:casesearch-card-advanced-link")}</a>
</Link>
</div>
</div>
<div class="govuk-form-group">
<button
type="submit"
class="govuk-button"
data-module="govuk-button"
id="submit-search"
formnovalidate=""
>
{t("home:casesearch-card-button")}
</button>
</div>
<Link href="/">
<a>{t("home:casesearch-card-advanced-link")}</a>
</Link>
</div>
</div>
);
);
}
+44 -45
View File
@@ -3,51 +3,50 @@ import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
export default function SearchCases() {
let { t } = useTranslation();
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<div className="card card-3" id="casescomment-card">
<div className="card-body">
<h3 className="heading-small card-heading">
{t("myportal:searchcases-card-title")}
</h3>
<div class="govuk-form-group">
<div id="event-name-hint" classNAme="govuk-hint ">
{t("myportal:searchcases-card-search-hint")}:
<br />
<span className="govuk-body-s">
{" "}
<span className="govuk-!-font-weight-bold">
{t("myportal:searchcases-card-search-example-label")}:
</span>{" "}
APP/A1234/A/99/1234567
</span>
</div>
<input
className="govuk-input"
id="event-name"
name="event-name"
type="text"
aria-describedby="event-name-hint"
/>
const router = useRouter();
const { locale } = router;
return (
<div className="card card-3" id="casescomment-card">
<div className="card-body">
<h3 className="heading-small card-heading">
{t("myportal:searchcases-card-title")}
</h3>
<div class="govuk-form-group">
<div id="event-name-hint" classNAme="govuk-hint ">
{t("myportal:searchcases-card-search-hint")}:
<br />
<span className="govuk-body-s">
{" "}
<span className="govuk-!-font-weight-bold">
{t(
"myportal:searchcases-card-search-example-label"
)}
:
</span>{" "}
APP/A1234/A/99/1234567
</span>
</div>
<input
className="govuk-input"
id="event-name"
name="event-name"
type="text"
aria-describedby="event-name-hint"
/>
</div>
<div class="govuk-form-group">
<Link href="/searchresults">
<a className="govuk-button">
{t("myportal:searchcases-card-button")}
</a>
</Link>
</div>
<Link href="/advancedsearch">
<a>{t("myportal:searchcases-card-advanced-link")}</a>
</Link>
</div>
</div>
<div class="govuk-form-group">
<button
type="submit"
class="govuk-button"
data-module="govuk-button"
id="submit-search"
formnovalidate=""
>
{t("myportal:searchcases-card-button")}
</button>
</div>
<Link href="/">
<a>{t("myportal:searchcases-card-advanced-link")}</a>
</Link>
</div>
</div>
);
);
}
+719
View File
@@ -0,0 +1,719 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
export default function AdvancedSearch() {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<div className="card" id="advancedsearch-card">
<div className="card-body">
<div class="govuk-body-m ">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h3 class="govuk-heading-m">Advanced Search</h3>
</legend>
<div class="govuk-form-group">
<label class="govuk-label" for="address-line-1">
Appellant/Applicant{" "}
</label>
<input
class="govuk-input"
id="address-line-1"
name="address-line-1"
type="text"
autocomplete="address-line1"
/>
</div>
<div class="govuk-form-group">
<label class="govuk-label" for="address-town">
Other Party{" "}
</label>
<input
class="govuk-input govuk-!-width-two-thirds"
id="address-town"
name="address-town"
type="text"
autocomplete="address-level2"
/>
</div>
<div class="govuk-form-group form-inline-label">
<fieldset
class="govuk-fieldset"
role="group"
aria-describedby="passport-issued-hint"
>
<div className="inlineFieldset">
<legend class="govuk-fieldset__legend govuk-!-width-one-third">
Hearing/Inquiry Date Calendar View{" "}
</legend>
<div
class="govuk-date-input"
id="passport-issued"
>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-day"
>
Day
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-2"
id="passport-issued-day"
name="passport-issued-day"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-month"
>
Month
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-2"
id="passport-issued-month"
name="passport-issued-month"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-year"
>
Year
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-4"
id="passport-issued-year"
name="passport-issued-year"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group"></div>
<div class="govuk-checkboxes__item">
<input
class="govuk-checkboxes__input"
id="waste-3"
name="waste"
type="checkbox"
value="farm"
/>
<label
class="govuk-label govuk-checkboxes__label no__right_padding"
for="waste-3"
>
+/- 30 days
</label>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div class="govuk-form-group form-inline-label">
<fieldset
class="govuk-fieldset"
role="group"
aria-describedby="passport-issued-hint"
>
{" "}
<div className="inlineFieldset">
<legend class="govuk-fieldset__legend govuk-!-width-one-third">
Hearing/Inquiry Date{" "}
</legend>
<div
class="govuk-date-input"
id="passport-issued"
>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-day"
>
Day
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-2"
id="passport-issued-day"
name="passport-issued-day"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-month"
>
Month
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-2"
id="passport-issued-month"
name="passport-issued-month"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-year"
>
Year
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-4"
id="passport-issued-year"
name="passport-issued-year"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group"></div>
<div class="govuk-checkboxes__item">
<input
class="govuk-checkboxes__input"
id="waste-3"
name="waste"
type="checkbox"
value="farm"
/>
<label
class="govuk-label govuk-checkboxes__label no__right_padding"
for="waste-3"
>
+/- 30 days
</label>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div class="govuk-form-group form-inline-label">
<fieldset
class="govuk-fieldset"
role="group"
aria-describedby="passport-issued-hint"
>
{" "}
<div className="inlineFieldset">
<legend class="govuk-fieldset__legend govuk-!-width-one-third">
Site Visit Date{" "}
</legend>
<div
class="govuk-date-input"
id="passport-issued"
>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-day"
>
Day
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-2"
id="passport-issued-day"
name="passport-issued-day"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-month"
>
Month
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-2"
id="passport-issued-month"
name="passport-issued-month"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-year"
>
Year
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-4"
id="passport-issued-year"
name="passport-issued-year"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group"></div>
<div class="govuk-checkboxes__item">
<input
class="govuk-checkboxes__input"
id="waste-3"
name="waste"
type="checkbox"
value="farm"
/>
<label
class="govuk-label govuk-checkboxes__label no__right_padding"
for="waste-3"
>
+/- 30 days
</label>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div class="govuk-form-group form-inline-label">
<fieldset
class="govuk-fieldset"
role="group"
aria-describedby="passport-issued-hint"
>
{" "}
<div className="inlineFieldset">
<legend class="govuk-fieldset__legend govuk-!-width-one-third">
Call-In Date{" "}
</legend>
<div
class="govuk-date-input"
id="passport-issued"
>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-day"
>
Day
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-2"
id="passport-issued-day"
name="passport-issued-day"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-month"
>
Month
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-2"
id="passport-issued-month"
name="passport-issued-month"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-year"
>
Year
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-4"
id="passport-issued-year"
name="passport-issued-year"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group"></div>
<div class="govuk-checkboxes__item">
<input
class="govuk-checkboxes__input"
id="waste-3"
name="waste"
type="checkbox"
value="farm"
/>
<label
class="govuk-label govuk-checkboxes__label no__right_padding"
for="waste-3"
>
+/- 30 days
</label>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div class="govuk-form-group form-inline-label">
<fieldset
class="govuk-fieldset"
role="group"
aria-describedby="passport-issued-hint"
>
{" "}
<div className="inlineFieldset">
<legend class="govuk-fieldset__legend govuk-!-width-one-third">
Date Received{" "}
</legend>
<div
class="govuk-date-input"
id="passport-issued"
>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-day"
>
Day
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-2"
id="passport-issued-day"
name="passport-issued-day"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-month"
>
Month
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-2"
id="passport-issued-month"
name="passport-issued-month"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-year"
>
Year
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-4"
id="passport-issued-year"
name="passport-issued-year"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group"></div>
<div class="govuk-checkboxes__item">
<input
class="govuk-checkboxes__input"
id="waste-3"
name="waste"
type="checkbox"
value="farm"
/>
<label
class="govuk-label govuk-checkboxes__label no__right_padding"
for="waste-3"
>
+/- 30 days
</label>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div class="govuk-form-group form-inline-label">
<fieldset
class="govuk-fieldset"
role="group"
aria-describedby="passport-issued-hint"
>
{" "}
<div className="inlineFieldset">
<legend class="govuk-fieldset__legend govuk-!-width-one-third">
Start Date{" "}
</legend>
<div
class="govuk-date-input"
id="passport-issued"
>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-day"
>
Day
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-2"
id="passport-issued-day"
name="passport-issued-day"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-month"
>
Month
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-2"
id="passport-issued-month"
name="passport-issued-month"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-year"
>
Year
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-4"
id="passport-issued-year"
name="passport-issued-year"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group"></div>
<div class="govuk-checkboxes__item">
<input
class="govuk-checkboxes__input"
id="waste-3"
name="waste"
type="checkbox"
value="farm"
/>
<label
class="govuk-label govuk-checkboxes__label no__right_padding"
for="waste-3"
>
+/- 30 days
</label>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div class="govuk-form-group form-inline-label">
<fieldset
class="govuk-fieldset"
role="group"
aria-describedby="passport-issued-hint"
>
{" "}
<div className="inlineFieldset">
<legend class="govuk-fieldset__legend govuk-!-width-one-third">
Decision Date{" "}
</legend>
<div
class="govuk-date-input"
id="passport-issued"
>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-day"
>
Day
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-2"
id="passport-issued-day"
name="passport-issued-day"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-month"
>
Month
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-2"
id="passport-issued-month"
name="passport-issued-month"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
for="passport-issued-year"
>
Year
</label>
<input
class="govuk-input govuk-date-input__input govuk-input--width-4"
id="passport-issued-year"
name="passport-issued-year"
type="text"
pattern="[0-9]*"
inputMode="numeric"
/>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group"></div>
<div class="govuk-checkboxes__item">
<input
class="govuk-checkboxes__input"
id="waste-3"
name="waste"
type="checkbox"
value="farm"
/>
<label
class="govuk-label govuk-checkboxes__label no__right_padding"
for="waste-3"
>
+/- 30 days
</label>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div class="govuk-form-group ">
<label class="govuk-label" for="sort">
Procedure Type
</label>
<select class="govuk-select" id="sort" name="sort">
<option value="">-- Select --</option>
<option value="Hearing">Hearing</option>
<option value="Inquiry">Inquiry</option>
<option value="Written representations">
Written representations
</option>
</select>
</div>
<div class="govuk-form-group">
<label class="govuk-label" for="sort">
Status Type
</label>
<select class="govuk-select" id="sort" name="sort">
<option value="">-- Select --</option>
<option value="Any">Any</option>
<option value="In progress">In progress</option>
<option value="Complete">Complete</option>
</select>
</div>
</div>
</div>
</div>
);
}
+157
View File
@@ -0,0 +1,157 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
export default function SearchForCase() {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<div className="card" id="searchforcase-card">
<div className="card-body">
<div class="govuk-body-m ">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading govuk-heading-m">
Search for a case
</h1>
</legend>
<div class="govuk-form-group">
<label class="govuk-label" for="address-county">
Case Reference (last 7 digits)
</label>
<input
class="govuk-input govuk-!-width-two-thirds"
id="address-county"
name="address-county"
type="text"
/>
</div>
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h3 class="govuk-heading-m">Site Location</h3>
</legend>
<div class="govuk-form-group">
<label class="govuk-label" for="address-line-1">
First Line of Address{" "}
<span class="govuk-visually-hidden">
line 1 of 2
</span>
</label>
<input
class="govuk-input"
id="address-line-1"
name="address-line-1"
type="text"
autocomplete="address-line1"
/>
</div>
<div class="govuk-form-group">
<label class="govuk-label" for="address-town">
Town/City (nearest)
</label>
<input
class="govuk-input govuk-!-width-two-thirds"
id="address-town"
name="address-town"
type="text"
autocomplete="address-level2"
/>
</div>
<div class="govuk-form-group">
<label class="govuk-label" for="address-county">
County
</label>
<input
class="govuk-input govuk-!-width-two-thirds"
id="address-county"
name="address-county"
type="text"
/>
</div>
<div class="govuk-form-group">
<label class="govuk-label" for="address-postcode">
Postcode
</label>
<input
class="govuk-input govuk-input--width-10"
id="address-postcode"
name="address-postcode"
type="text"
autocomplete="postal-code"
/>
</div>
</fieldset>
<div class="govuk-form-group">
<label class="govuk-label" for="address-postcode">
Local Planning Authority
</label>
<input
class="govuk-input govuk-input--width-10"
id="address-postcode"
name="address-postcode"
type="text"
autocomplete="postal-code"
/>
</div>
<div class="govuk-form-group">
<label class="govuk-label" for="address-postcode">
LPA Reference Number
</label>
<input
class="govuk-input govuk-input--width-10"
id="address-postcode"
name="address-postcode"
type="text"
autocomplete="postal-code"
/>
</div>
<div class="govuk-form-group">
<label class="govuk-label" for="sort">
Case Type
</label>
<select class="govuk-select" id="sort" name="sort">
<option value="">-- Select --</option>
<option value="Any/All">Any/All</option>
<option value="Advertisement Appeals">
Advertisement Appeals
</option>
<option value="Called in Planning Applications">
Called in Planning Applications
</option>
<option value="Discontinuance Notice Appeals">
Discontinuance Notice Appeals
</option>
<option value="Enforcement Listed Building and Conservation Area Appeals">
Enforcement Listed Building and Conservation
Area Appeals
</option>
<option value="Enforcement Appeals">
Enforcement Appeals
</option>
<option value="Householder Appeals">
Householder Appeals
</option>
<option value="Lawful Development Certificate Appeals">
Lawful Development Certificate Appeals
</option>
<option value="Planning Appeals">
Planning Appeals
</option>
<option value="Planning Obligation Appeals">
Planning Obligation Appeals
</option>
<option value="Planning Listed Building and Conservation Area Appeals">
Planning Listed Building and Conservation Area
Appeals
</option>
</select>
</div>
</div>
</div>
</div>
);
}
+267
View File
@@ -0,0 +1,267 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
export default function SearchResults() {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h1 class="govuk-heading-xl govuk-!-margin-bottom-7">
Search for a case
</h1>
<p className="govuk-body">Your search returned 99 results.</p>
<dl class="govuk-summary-list govuk-!-margin-bottom-9">
<div class="govuk-summary-list__row results-headings">
<dd class="govuk-summary-list__key govuk-!-font-size-14 results_wider govuk-!-padding-left-2">
Case Reference
</dd>
<dd class="govuk-summary-list__key govuk-!-font-size-14">
Site Address
</dd>
<dd class="govuk-summary-list__key govuk-!-font-size-14">
Appellant/Applicant
</dd>
<dd class="govuk-summary-list__key govuk-!-font-size-14">
Authority
</dd>
<dd class="govuk-summary-list__key govuk-!-font-size-14">
Case Type
</dd>
<dd class="govuk-summary-list__key govuk-!-font-size-14">
Status
</dd>
</div>
<div class="govuk-summary-list__row">
<dd class="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<Link href="/">
<a>
<span className="results-visually-hidden">
Case Reference:
</span>
APP/Z2830/D/21/3272770
</a>
</Link>
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Site Address:{" "}
</span>
23 Martineau Lane
<br /> HASTINGS
<br />
TN35 5DS
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Appellant/Applicant:
</span>
Mr J Pocknell
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Authority:
</span>
Hastings Borough Council{" "}
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Case Type:
</span>
Planning (W){" "}
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Status:
</span>
In Progress
</dd>
</div>
<div class="govuk-summary-list__row">
<dd class="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<Link href="/">
<a>
<span className="results-visually-hidden">
Case Reference:
</span>
APP/Z2830/D/21/3272770
</a>
</Link>
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Site Address:{" "}
</span>
23 Martineau Lane
<br /> HASTINGS
<br />
TN35 5DS
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Appellant/Applicant:
</span>
Mr J Pocknell
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Authority:
</span>
Hastings Borough Council{" "}
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Case Type:
</span>
Planning (W){" "}
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Status:
</span>
In Progress
</dd>
</div>
<div class="govuk-summary-list__row">
<dd class="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<Link href="/">
<a>
<span className="results-visually-hidden">
Case Reference:
</span>
APP/Z2830/D/21/3272770
</a>
</Link>
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Site Address:{" "}
</span>
23 Martineau Lane
<br /> HASTINGS
<br />
TN35 5DS
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Appellant/Applicant:
</span>
Mr J Pocknell
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Authority:
</span>
Hastings Borough Council{" "}
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Case Type:
</span>
Planning (W){" "}
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Status:
</span>
In Progress
</dd>
</div>
<div class="govuk-summary-list__row">
<dd class="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<Link href="/">
<a>
<span className="results-visually-hidden">
Case Reference:
</span>
APP/Z2830/D/21/3272770
</a>
</Link>
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Site Address:{" "}
</span>
23 Martineau Lane
<br /> HASTINGS
<br />
TN35 5DS
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Appellant/Applicant:
</span>
Mr J Pocknell
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Authority:
</span>
Hastings Borough Council{" "}
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Case Type:
</span>
Planning (W){" "}
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Status:
</span>
In Progress
</dd>
</div>
<div class="govuk-summary-list__row">
<dd class="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<Link href="/">
<a>
<span className="results-visually-hidden">
Case Reference:
</span>
APP/Z2830/D/21/3272770
</a>
</Link>
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Site Address:{" "}
</span>
23 Martineau Lane
<br /> HASTINGS
<br />
TN35 5DS
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Appellant/Applicant:
</span>
Mr J Pocknell
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Authority:
</span>
Hastings Borough Council{" "}
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Case Type:
</span>
Planning (W){" "}
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Status:
</span>
In Progress
</dd>
</div>
</dl>
</div>
</div>
);
}
+41
View File
@@ -0,0 +1,41 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";
import SearchForCase from "./search/searchforcase";
import SearchResults from "./search/searchresults";
export default function Search({ 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">
<div className="govuk-grid-column-full">
<SearchResults />
</div>
</div>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<div class="govuk-button-group">
<Link href="/advancedsearch">
<a className="govuk-button">Refine Search</a>
</Link>
<Link href="/advancedsearch">
<a className="govuk-button govuk-button--secondary">
New Search
</a>
</Link>
</div>
</div>
</div>
</main>
);
}