robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added dns record view with tabs

Browse Source
This commit is contained in:
robbond
2021-08-10 17:17:39 +01:00
parent 259d1e0d88
commit b96aa3acbe
23 changed files with 1497 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dns/applications/applicationTabs.js
+151
View File
@@ -0,0 +1,151 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import { useState } from "react";
import useTranslation from "next-translate/useTranslation";
import ApplicationTabsTimeLine from "./applicationTabsTimeline";
import ApplicationSideBar from "./applicationSideBar";
import ApplicationTabsDocuments from "./applicationTabsDocuments";
import ApplicationTabsComments from "./applicationTabsComments";
import ApplicationTabsRegistrationForm from "./applicationTabsRegistrationForm";
const ApplicationTabs = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const [showTab, setShowTab] = useState(1);
let selectTab = (tabID) => {
setShowTab(tabID);
console.log(showTab);
};
return (
<>
<div className="govuk-tabs" data-module="govuk-tabs">
<h2 className="govuk-tabs__title">Contents</h2>
<ul className="govuk-tabs__list">
<li
className={
showTab == 1
? "govuk-tabs__list-item govuk-tabs__list-item--selected"
: "govuk-tabs__list-item"
}
>
<a
onClick={() => {
selectTab(1);
}}
className="govuk-tabs__tab"
href="#past-day"
>
Overview
</a>
</li>
<li
className={
showTab == 2
? "govuk-tabs__list-item govuk-tabs__list-item--selected"
: "govuk-tabs__list-item"
}
>
<a
onClick={() => {
selectTab(2);
}}
className="govuk-tabs__tab"
href="#past-week"
>
Documents{" "}
</a>
</li>
<li
className={
showTab == 3
? "govuk-tabs__list-item govuk-tabs__list-item--selected"
: "govuk-tabs__list-item"
}
>
<a
onClick={() => {
selectTab(3);
}}
className="govuk-tabs__tab"
href="#past-week"
>
Registration form
</a>
</li>
<li
className={
showTab == 4
? "govuk-tabs__list-item govuk-tabs__list-item--selected"
: "govuk-tabs__list-item"
}
>
<a
onClick={() => {
selectTab(4);
}}
className="govuk-tabs__tab"
href="#past-week"
>
Comments Received
</a>
</li>
</ul>
<div
className={
showTab == 1
? "govuk-tabs__panel "
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
id="past-day"
>
<div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds">
<ApplicationTabsTimeLine />
</div>
<div className="govuk-grid-column-one-third">
<ApplicationSideBar />
</div>
</div>
</div>
<div
className={
showTab == 2
? "govuk-tabs__panel "
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
id="past-week"
>
<ApplicationTabsDocuments />
</div>
<div
className={
showTab == 3
? "govuk-tabs__panel "
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
id="past-week"
>
<ApplicationTabsRegistrationForm />
</div>
<div
className={
showTab == 4
? "govuk-tabs__panel "
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
id="past-week"
>
<ApplicationTabsComments />
</div>
</div>
</>
);
};
export default ApplicationTabs;