55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import clsx from "clsx";
|
|
import { useState } from "react";
|
|
|
|
const PARTNERS = [
|
|
{ label: "Aotearoa", partners: [] },
|
|
{ label: "International", partners: [] },
|
|
];
|
|
|
|
export default function Partners() {
|
|
const [partner, setPartner] = useState(PARTNERS[0].label);
|
|
|
|
return (
|
|
<section className="bg-gray-100">
|
|
<div className="container px-4 lg:px-24 py-8 lg:py-48 mx-auto lg:space-y-20">
|
|
<h2 className="text-3xl lg:text-5xl leading-tight text-black">
|
|
We've worked with …
|
|
</h2>
|
|
|
|
<div className="flex gap-6 lg:gap-20 flex-col lg:flex-row text-black">
|
|
<ul className="lg:border-t border-gray-500 lg:pr-8 pt-8 lg:space-y-4 flex lg:flex-col items-center lg:items-start gap-x-4">
|
|
{PARTNERS.map((group) => (
|
|
<li
|
|
key={group.label}
|
|
className={clsx(
|
|
"lg:space-y-4 text-xl lg:text-3xl flex items-center lg:gap-4 font-medium cursor-pointer",
|
|
group.label === partner && "text-accent-500"
|
|
)}
|
|
onClick={() => setPartner(group.label)}
|
|
>
|
|
{group.label}
|
|
<div
|
|
className={clsx(
|
|
"size-3 bg-accent-500 rounded-full hidden lg:block",
|
|
group.label !== partner && "opacity-0"
|
|
)}
|
|
></div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="pt-8 border-t border-gray-500 grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-12 flex-1 justify-items-stretch">
|
|
{Array.from({ length: 12 }).map((_, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-gray-400/50 h-auto aspect-video rounded shadow"
|
|
></div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|