InnerDetailsCatalogue.js
3.42 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
120
121
122
123
124
import Image from "next/image";
import Link from "next/link";
import React, { useState } from "react";
import { Col, Row } from "react-bootstrap";
import { cleanImage } from "../services/imageHandling";
// const CatalogueData = [
// {
// productSlug: "ecosophia",
// title: "Ecosophia",
// image: "/image/Catalogue/01.png",
// },
// {
// productSlug: "architectural-scenarios",
// title: "Architectural Scenarios",
// image: "/image/Catalogue/02.png",
// },
// {
// productSlug: "vitrum-arte",
// title: "Vitrum Arte",
// image: "/image/Catalogue/03.png",
// },
// {
// productSlug: "genius-loci",
// title: "Genius Loci",
// image: "/image/Catalogue/04.png",
// },
// {
// productSlug: "essenza",
// title: "Essenza",
// image: "/image/Catalogue/05.png",
// },
// {
// productSlug: "domus-anthology",
// title: "Domus Anthology",
// image: "/image/Catalogue/06.png",
// },
// {
// productSlug: "vitrum-arte",
// title: "Vitrum Arte",
// image: "/image/Catalogue/07.png",
// },
// {
// productSlug: "ecosophia",
// title: "Ecosophia",
// image: "/image/Catalogue/08.png",
// },
// {
// productSlug: "architectural-scenarios",
// title: "Architectural Scenarios",
// image: "/image/Catalogue/09.png",
// },
// ];
const InnerDetailsCatalogue = ({ subCategory = "All Catalogue", cataloguesData }) => {
const [sort, setSort] = useState("");
const handleChange = (e) => {
setSort(e.target.value);
};
const sortedProducts = [...cataloguesData].sort((a, b) => {
if (sort === "name-asc") return a.title.localeCompare(b.title);
if (sort === "name-desc") return b.title.localeCompare(a.title);
return 0;
});
return (
<section className="collection-m-section sec_padd">
<div className="custom_container container">
<Row>
<Col xs={6}>
<h3>
{subCategory
.split("-")
.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
.join(" ")}
</h3>
</Col>
<Col xs={6} className="d-flex justify-content-end">
<select
className="sortby-select"
value={sort}
onChange={handleChange}
>
<option value="">Sort By</option>
<option value="name-asc">Name: A–Z</option>
<option value="name-desc">Name: Z–A</option>
</select>
</Col>
</Row>
<Row>
{sortedProducts.map((product, index) => (
<Col xs={12} md={4} key={`${product.productSlug}-${index}`}>
<div className="collections-item">
<Link href={cleanImage(product?.pdfLink?.url || "#")} target="_blank">
<Image
width={868}
height={560}
src={cleanImage(product.image?.url)}
alt={product.title}
/>
<div className="title">{product.title}</div>
</Link>
</div>
</Col>
))}
</Row>
{/* <Row>
<Col>
<div className="text-center">
<button className="btn3">View More <i className="fa-solid fa-arrow-right"></i></button>
</div>
</Col>
</Row> */}
</div>
</section>
);
};
export default InnerDetailsCatalogue;