multisite/src/blocks/ToolStack/Component.tsx
2026-06-03 15:48:31 +08:00

30 lines
964 B
TypeScript

import React from 'react'
type ToolStackBlockProps = {
heading?: string
tools?: { name: string }[]
}
export function ToolStackBlock({ heading, tools }: ToolStackBlockProps) {
if (!Array.isArray(tools) || tools.length === 0) return null
return (
<section className="w-full max-w-5xl mx-auto px-6 py-16">
<div className="bg-muted/50 border border-foreground/8 rounded-xl p-6">
{heading && (
<p className="text-xs tracking-widest uppercase text-foreground/30 mb-4">{heading}</p>
)}
<div className="flex flex-wrap gap-2">
{tools.map((tool, i) => (
<span
key={i}
className="text-xs text-foreground/50 bg-background/50 border border-foreground/8 rounded-full px-3 py-1.5 hover:text-foreground/70 hover:border-foreground/15 transition-colors"
>
{tool.name}
</span>
))}
</div>
</div>
</section>
)
}