annual-reports.js
3.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import React from "react";
import PageBanner from "@/components/reuseables/PageBanner";
import { cleanImage } from "@/layout/imageHandling";
import axios from "axios";
import qs from "qs";
import Seo from "@/components/reuseables/Seo/Seo";
import Heading from "@/components/reuseables/Heading";
export default function Contact({ Contactpage, conversionData }) {
console.log("conatct", Contactpage);
console.log({Contactpage});
const banners = [
{
imageSrc: cleanImage(Contactpage?.Banner?.Image?.url),
pageTitle: Contactpage?.Banner?.Heading,
homePageUrl: "/",
homePageText: "Home",
activePageText: Contactpage?.Banner?.Heading,
},
];
const seo = Contactpage?.seo;
const Listing = Contactpage.Listing;
console.log({ Listing });
return (
<>
<Seo seo={seo} />
<PageBanner banners={banners} />
<div className="container py-5">
{Listing.map((item, index) => (
<div
key={item.id}
className={`card mb-3 border-0 ${
index !== Listing.length - 1 ? "border-bottom pb-2" : ""
}`}
style={{
borderBottomColor: "#dee2e6", // Bootstrap default border color
borderBottomWidth: index !== Listing.length - 1 ? "1px" : "0",
borderBottomStyle: "solid",
}}
>
<div className="card-body">
<div className="mb-4">
<Heading el="h2" heading={item.Title} />
</div>
{/* GRID layout */}
<div className="row">
{item.category.map((cat) => (
<div key={cat.id} className="col-12 col-md-4 mb-3">
<a
href={cleanImage(cat?.img?.url)}
download
target="_blank"
rel="noopener noreferrer"
className="text-decoration-underline d-flex gap-2 text-dark"
style={{ cursor: "pointer" }}
>
<p>{cat.name}</p> <span className="text-danger">(PDF)</span>
</a>
</div>
))}
</div>
</div>
</div>
))}
</div>
</>
);
}
export async function getServerSideProps() {
try {
const query1 = {
populate: [
"Banner.Image",
"seo",
"seo.metaImage",
"seo.schema",
"Listing",
"Listing.category",
"Listing.category.img",
],
};
const query2 = {
populate: ["conversion"],
};
const query1String = qs.stringify(query1, {
encodeValuesOnly: true,
});
const query12String = qs.stringify(query2, {
encodeValuesOnly: true,
});
const endpoint1 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/annual-reports?${query1String}`;
const endpoint2 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/google-manger?${query12String}`;
// console.log(`Final url: ${endpoint1}`);
const [response1, response2] = await Promise.all([
axios.get(endpoint1),
axios.get(endpoint2),
]);
const Contactpage = response1.data.data;
const conversionData = response2.data.data;
return {
props: { Contactpage, conversionData },
};
} catch (error) {
console.log("Error", error);
}
}