wehub-resource-sync
73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
type Agent = {
|
|
name: string;
|
|
/** asset file stem; if no theme variants, `variants: false` */
|
|
file: string;
|
|
variants: boolean;
|
|
};
|
|
|
|
const agents: Agent[] = [
|
|
{ name: 'Claude', file: 'claude', variants: false },
|
|
{ name: 'Codex', file: 'codex', variants: true },
|
|
{ name: 'Cursor', file: 'cursor', variants: true },
|
|
{ name: 'Gemini CLI', file: 'gemini', variants: false },
|
|
{ name: 'OpenCode', file: 'opencode', variants: true },
|
|
{ name: 'Windsurf', file: 'windsurf', variants: true },
|
|
{ name: 'Zed', file: 'zed', variants: true },
|
|
];
|
|
|
|
export function Agents() {
|
|
// double the list so the marquee loops seamlessly
|
|
const track = [...agents, ...agents];
|
|
|
|
return (
|
|
<section id="agents" className="relative overflow-hidden">
|
|
<div className="border-y border-[color:var(--color-rule)] bg-[color:var(--color-panel)]">
|
|
<div className="mx-auto max-w-[1360px] px-5 sm:px-8 lg:px-12 py-10 sm:py-12">
|
|
<h2 className="font-[family-name:var(--font-sans)] text-[18px] sm:text-[20px] text-[color:var(--color-text-soft)] font-normal">
|
|
Bring your own agent. Anything that edits React works.
|
|
</h2>
|
|
</div>
|
|
|
|
<div
|
|
className="relative"
|
|
style={{
|
|
WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
|
|
maskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
|
|
}}
|
|
>
|
|
<div className="marquee-track py-10 will-change-transform">
|
|
{track.map((agent, i) => (
|
|
<span key={`${agent.file}-${i}`} className="inline-flex items-center gap-4">
|
|
<AgentLogo agent={agent} />
|
|
<span className="font-[family-name:var(--font-sans)] text-[color:var(--color-text)] text-[22px] sm:text-[28px] lg:text-[36px] tracking-[-0.02em]">
|
|
{agent.name}
|
|
</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function AgentLogo({ agent }: { agent: Agent }) {
|
|
const alt = agent.name;
|
|
const cls = 'h-[28px] md:h-[34px] lg:h-[40px] w-auto object-contain shrink-0';
|
|
|
|
if (!agent.variants) {
|
|
return <img src={`/assets/${agent.file}.svg`} alt={alt} className={cls} />;
|
|
}
|
|
return (
|
|
<>
|
|
<img src={`/assets/${agent.file}-dark.svg`} alt={alt} className={`${cls} logo-dark`} />
|
|
<img
|
|
src={`/assets/${agent.file}-light.svg`}
|
|
alt=""
|
|
aria-hidden
|
|
className={`${cls} logo-light`}
|
|
/>
|
|
</>
|
|
);
|
|
}
|