47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import type SectionType from './../types/section';
|
|
|
|
type Props = {
|
|
sections: SectionType[];
|
|
};
|
|
|
|
const Grid = ({ sections }: Props) => (
|
|
<div className="grid xlg:grid-cols-5 lg:grid-cols-4 sm:grid-cols-2 grid-cols-1 gap-4">
|
|
{sections.map((section) => (
|
|
<section key={section.name} className="mt-2">
|
|
<h2 className="font-sans font-semibold text-2xl mb-4">
|
|
{section.name}
|
|
</h2>
|
|
<ul>
|
|
{section.items.map((item) => (
|
|
<li key={item.name} className="my-2">
|
|
<a
|
|
href={item.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="
|
|
block
|
|
w-full
|
|
text-center
|
|
py-2
|
|
border-2
|
|
border-gray-400
|
|
rounded
|
|
hover:bg-gray-900
|
|
hover:border-gray-900
|
|
hover:text-white
|
|
transition
|
|
focus:ring-2
|
|
focus:ring-gray-600 text-gray-800
|
|
"
|
|
>
|
|
{item.name}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
export default Grid;
|