126 lines
3.0 KiB
React
126 lines
3.0 KiB
React
import { Link } from "react-router-dom";
|
|
import { company, whatsappUrl } from "../data";
|
|
import "./Primitives.css";
|
|
|
|
export function Arrow({ diagonal = false }) {
|
|
return (
|
|
<svg
|
|
className="arrow"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d={diagonal ? "M6 18 18 6M6 6h12v12" : "M4 12h15m-6-6 6 6-6 6"}
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function Action({ children, to, variant = "dark" }) {
|
|
return (
|
|
<Link className={`action action--${variant}`} to={to}>
|
|
{children}
|
|
<Arrow />
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export function WhatsAppAction({
|
|
children = "Talk to us on WhatsApp",
|
|
variant = "dark",
|
|
direct = false,
|
|
}) {
|
|
const url = whatsappUrl(company.whatsapp);
|
|
const className = `action action--${variant}`;
|
|
if (url)
|
|
return (
|
|
<a className={className} href={url} target="_blank" rel="noreferrer">
|
|
{children}
|
|
<Arrow diagonal />
|
|
</a>
|
|
);
|
|
if (direct)
|
|
return (
|
|
<button
|
|
className={className}
|
|
type="button"
|
|
disabled
|
|
aria-describedby="whatsapp-status"
|
|
>
|
|
{children}
|
|
<Arrow diagonal />
|
|
</button>
|
|
);
|
|
return (
|
|
<Action to="/contact#whatsapp" variant={variant}>
|
|
{children}
|
|
</Action>
|
|
);
|
|
}
|
|
|
|
export function Eyebrow({ children }) {
|
|
return <p className="eyebrow">{children}</p>;
|
|
}
|
|
|
|
export function SectionHeading({ label, title, children, centered = false }) {
|
|
return (
|
|
<header
|
|
className={`section-heading${centered ? " section-heading--centered" : ""}`}
|
|
>
|
|
<div className="section-heading__title">
|
|
<Eyebrow>{label}</Eyebrow>
|
|
<h2 className="section-heading__heading">{title}</h2>
|
|
</div>
|
|
{children && <div className="section-heading__aside">{children}</div>}
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export function Textile({
|
|
kind = "natural",
|
|
className = "",
|
|
caption = true,
|
|
eager = false,
|
|
}) {
|
|
return (
|
|
<figure className={`textile textile--${kind} ${className}`}>
|
|
<img
|
|
className="textile__image"
|
|
src={`/images/knit-${kind}.jpg`}
|
|
alt="Illustrative knitted texture — not an RRS product photograph"
|
|
width="1600"
|
|
height="1200"
|
|
loading={eager ? "eager" : "lazy"}
|
|
/>
|
|
{caption && (
|
|
<figcaption className="textile__caption">
|
|
Illustrative texture · RRS photography to follow
|
|
</figcaption>
|
|
)}
|
|
</figure>
|
|
);
|
|
}
|
|
|
|
export function PageHero({ label, title, children, texture = "natural" }) {
|
|
return (
|
|
<section className="page-hero">
|
|
<div className="page-hero__copy">
|
|
<Eyebrow>{label}</Eyebrow>
|
|
<h1 className="page-hero__title">{title}</h1>
|
|
<div className="page-hero__description">{children}</div>
|
|
<span className="page-hero__footnote">
|
|
Radhe Radhe Synthetics · Greige knitted fabrics
|
|
</span>
|
|
</div>
|
|
<Textile kind={texture} eager />
|
|
</section>
|
|
);
|
|
}
|