Migrate to Next
This commit is contained in:
81
pages/services/[service]/[slug].js
Normal file
81
pages/services/[service]/[slug].js
Normal file
@@ -0,0 +1,81 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
CaseStudy,
|
||||
Content,
|
||||
GalleryOverlay,
|
||||
GalleryThumb,
|
||||
Grid,
|
||||
Header,
|
||||
Heading,
|
||||
Layout,
|
||||
Section,
|
||||
Text,
|
||||
} from "@components/index";
|
||||
import { getAllCaseStudyIds, getCaseStudyData } from "../../../lib/case-study";
|
||||
|
||||
export default function CaseStudyTemplate({ caseStudyData }) {
|
||||
const [openImage, setOpenImage] = useState(-1);
|
||||
const images = Array.from(new Array(caseStudyData.images)).map((_, i) => ({
|
||||
thumb: `/case-studies/${caseStudyData.id}/thumbs/${i}.jpg`,
|
||||
src: `/case-studies/${caseStudyData.id}/${i}.jpg`,
|
||||
}));
|
||||
const handleThumbClick = (i) => setOpenImage(i);
|
||||
const handlePrevClick = () =>
|
||||
setOpenImage(openImage === 0 ? images.length - 1 : openImage - 1);
|
||||
const handleNextClick = () =>
|
||||
setOpenImage(openImage === images.length - 1 ? 0 : openImage + 1);
|
||||
return (
|
||||
<Layout title={caseStudyData.title}>
|
||||
<Header
|
||||
image={`/case-studies/${caseStudyData.id}/${caseStudyData.image}.jpg`}
|
||||
>
|
||||
<Heading>{caseStudyData.title}</Heading>
|
||||
<Text>{caseStudyData.location}</Text>
|
||||
</Header>
|
||||
<CaseStudy data={caseStudyData} />
|
||||
<Section>
|
||||
<Content>
|
||||
<div dangerouslySetInnerHTML={{ __html: caseStudyData.content }} />
|
||||
</Content>
|
||||
</Section>
|
||||
<Section variant="secondary" title="Gallery">
|
||||
<Grid d={2} sm={3} md={4}>
|
||||
{images.map((img, i) => (
|
||||
<GalleryThumb
|
||||
key={img.thumb}
|
||||
image={img.thumb}
|
||||
label={`Show full picture from ${caseStudyData.title}`}
|
||||
onClick={() => handleThumbClick(i)}
|
||||
/>
|
||||
))}
|
||||
</Grid>
|
||||
{openImage > -1 && (
|
||||
<GalleryOverlay
|
||||
onClose={() => setOpenImage(-1)}
|
||||
onNext={handleNextClick}
|
||||
onPrev={handlePrevClick}
|
||||
image={images[openImage].src}
|
||||
desc={`Picture from ${caseStudyData.title}`}
|
||||
/>
|
||||
)}
|
||||
</Section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const paths = getAllCaseStudyIds({});
|
||||
return {
|
||||
paths,
|
||||
fallback: false,
|
||||
};
|
||||
}
|
||||
|
||||
export async function getStaticProps({ params }) {
|
||||
const caseStudyData = getCaseStudyData({ ...params });
|
||||
return {
|
||||
props: {
|
||||
caseStudyData,
|
||||
},
|
||||
};
|
||||
}
|
||||
73
pages/services/bathrooms.js
Normal file
73
pages/services/bathrooms.js
Normal file
@@ -0,0 +1,73 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Card,
|
||||
Grid,
|
||||
Header,
|
||||
Heading,
|
||||
Layout,
|
||||
Section,
|
||||
Text,
|
||||
} from "@components/index";
|
||||
import { getAllCaseStudyIds } from "../../lib/case-study";
|
||||
import bannerImg from "../../images/banner_bathroom.jpg";
|
||||
|
||||
export default function Bathrooms({ caseStudies }) {
|
||||
return (
|
||||
<Layout title="Bathrooms">
|
||||
<Header title="Bathrooms" image={bannerImg} />
|
||||
<Section title="We build bespoke bathrooms">
|
||||
<Text>
|
||||
It's more than likely the most important room in your house and one of
|
||||
the biggest investments you will ever make. We offer a professional
|
||||
design service and an expert installation service. All our tradesman
|
||||
are vetted and handpicked based on their skills within their chosen
|
||||
fields.
|
||||
</Text>
|
||||
<Text>
|
||||
With over 30 years experience in bathroom installation we will help
|
||||
you choose the perfect bathroom for your home. We can complete your
|
||||
whole bathroom installation including electrics, plastering, plumbing
|
||||
and paint and decorating.
|
||||
</Text>
|
||||
<Text>
|
||||
If you want a high quality bathroom you have come to the right place.
|
||||
</Text>
|
||||
<Text>
|
||||
We provide an initial consultation followed by a competitive quote.
|
||||
</Text>
|
||||
<Text>
|
||||
To ensure complete satisfaction we insist on managing the entire
|
||||
installation process. All of our quotations are for a fully inclusive
|
||||
installation service, one price to deliver a fully functioning and
|
||||
completed bathroom.
|
||||
</Text>
|
||||
</Section>
|
||||
<Section variant="secondary" title="Case studies">
|
||||
<Grid sm={2} md={3}>
|
||||
{caseStudies.map((study) => (
|
||||
<Card
|
||||
heading={
|
||||
<Heading el="h3" size="md">
|
||||
{study.params.title}
|
||||
</Heading>
|
||||
}
|
||||
image={`/case-studies/${study.params.id}/thumbs/${study.params.image}.jpg`}
|
||||
href={`/services/bathrooms/${study.params.slug}`}
|
||||
key={study.params.id}
|
||||
>
|
||||
{study.params.location}
|
||||
</Card>
|
||||
))}
|
||||
</Grid>
|
||||
</Section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export const getStaticProps = async () => {
|
||||
const caseStudies = getAllCaseStudyIds({ service: "bathrooms" });
|
||||
|
||||
return {
|
||||
props: { caseStudies },
|
||||
};
|
||||
};
|
||||
38
pages/services/index.js
Normal file
38
pages/services/index.js
Normal file
@@ -0,0 +1,38 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Card,
|
||||
Grid,
|
||||
Header,
|
||||
Heading,
|
||||
Layout,
|
||||
Section,
|
||||
} from "@components/index";
|
||||
import bannerImg from "../../images/banner_bathroom.jpg";
|
||||
import bathroomImg from "../../images/bathroom.jpg";
|
||||
import tilingImg from "../../images/tiling.jpg";
|
||||
|
||||
export default function Services() {
|
||||
return (
|
||||
<Layout title="Services">
|
||||
<Header title="Services" image={bannerImg} />
|
||||
<Section title="Our services">
|
||||
<Grid sm={2}>
|
||||
<Card
|
||||
heading={<Heading el="h3">Bathrooms</Heading>}
|
||||
image={bathroomImg}
|
||||
href="/services/bathrooms"
|
||||
>
|
||||
Fully accredited bathroom refurbishment service
|
||||
</Card>
|
||||
<Card
|
||||
heading={<Heading el="h3">Tiling</Heading>}
|
||||
image={tilingImg}
|
||||
href="/services/tiling"
|
||||
>
|
||||
We can install many different styles
|
||||
</Card>
|
||||
</Grid>
|
||||
</Section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
56
pages/services/tiling.js
Normal file
56
pages/services/tiling.js
Normal file
@@ -0,0 +1,56 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Card,
|
||||
Grid,
|
||||
Header,
|
||||
Heading,
|
||||
Layout,
|
||||
Section,
|
||||
Text,
|
||||
} from "@components/index";
|
||||
import { getAllCaseStudyIds } from "../../lib/case-study";
|
||||
import tilingImg from "../../images/tiling.jpg";
|
||||
|
||||
export default function Tiling({ caseStudies }) {
|
||||
return (
|
||||
<Layout title="Tiling">
|
||||
<Header title="Tiling" image={tilingImg} light />
|
||||
<Section title="We specialise in floor tiling">
|
||||
<Text>
|
||||
We can install both floor and wall tiles, including ceramic, natural
|
||||
stone, marble, quartz, porcelain and mosaic tiles.
|
||||
</Text>
|
||||
<Text>
|
||||
Our elite team of 3 stonemasons and 3 tilers has a combined total of
|
||||
112 years of experience within the industry.
|
||||
</Text>
|
||||
</Section>
|
||||
<Section variant="secondary" title="Case studies">
|
||||
<Grid sm={2} md={3}>
|
||||
{caseStudies.map((study) => (
|
||||
<Card
|
||||
heading={
|
||||
<Heading el="h3" size="md">
|
||||
{study.params.title}
|
||||
</Heading>
|
||||
}
|
||||
image={`/case-studies/${study.params.id}/thumbs/${study.params.image}.jpg`}
|
||||
href={`/services/tiling/${study.params.slug}`}
|
||||
key={study.params.id}
|
||||
>
|
||||
{study.params.location}
|
||||
</Card>
|
||||
))}
|
||||
</Grid>
|
||||
</Section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export const getStaticProps = async () => {
|
||||
const caseStudies = getAllCaseStudyIds({ service: "tiling" });
|
||||
|
||||
return {
|
||||
props: { caseStudies },
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user