77 lines
2.4 KiB
React
77 lines
2.4 KiB
React
import { developments } from "../data";
|
|
import { Action, SectionHeading } from "./Primitives";
|
|
import "./Gallery.css";
|
|
|
|
const textures = [
|
|
"/images/refined/gallery/Gemini_Generated_Image_gwchf4gwchf4gwch.jpeg",
|
|
"/images/refined/gallery/Gemini_Generated_Image_n36uden36uden36u.jpeg",
|
|
"/images/refined/gallery/Gemini_Generated_Image_v9lfrwv9lfrwv9lf.jpeg",
|
|
"/images/library/gallery-01.jpeg",
|
|
"/images/library/gallery-02.jpeg",
|
|
"/images/library/gallery-03.jpeg",
|
|
"/images/library/gallery-04.jpeg",
|
|
];
|
|
|
|
export default function Gallery({ preview = false }) {
|
|
const items = preview ? developments.slice(0, 3) : developments;
|
|
return (
|
|
<section
|
|
className={`gallery${preview ? " gallery--preview" : ""}`}
|
|
id="developments"
|
|
tabIndex={-1}
|
|
>
|
|
<SectionHeading
|
|
centered
|
|
label={
|
|
preview ? "Featured fabric developments" : "Selected developments"
|
|
}
|
|
title={
|
|
preview ? (
|
|
<>
|
|
What we make.
|
|
<br />
|
|
<em>What we can develop.</em>
|
|
</>
|
|
) : (
|
|
<>
|
|
From grey
|
|
<br />
|
|
<em>to possibility.</em>
|
|
</>
|
|
)
|
|
}
|
|
>
|
|
<p className="gallery__intro">
|
|
{preview
|
|
? "A selection of knitted structures showing how yarn, composition and machine setup shape the final fabric character."
|
|
: "Selected developments are processed separately as samples to explore how a construction can translate after dyeing and finishing. RRS commercially manufactures grey fabric only."}
|
|
</p>
|
|
{preview && (
|
|
<Action to="/fabrics#developments" variant="outline">
|
|
Explore all fabrics
|
|
</Action>
|
|
)}
|
|
</SectionHeading>
|
|
<div className="gallery__grid">
|
|
{items.map((name, index) => (
|
|
<article className="sample" key={name}>
|
|
<div className="sample__visual">
|
|
<img
|
|
className="sample__image"
|
|
src={textures[index]}
|
|
alt={`${name} fabric sample`}
|
|
width="1600"
|
|
height="1200"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
<div className="sample__heading">
|
|
<h3 className="sample__name">{name}</h3>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|