34 lines
1.2 KiB
JavaScript
34 lines
1.2 KiB
JavaScript
import React from "react";
|
|
import workData from "../data/work.json";
|
|
|
|
export default function ExpertArea() {
|
|
return (
|
|
<section
|
|
className="bg-[var(--card)] border border-[var(--border)] text-[var(--text)] flex-1 px-5 rounded-xl shadow py-3 flex flex-col gap-5"
|
|
aria-labelledby="expert-area-heading"
|
|
>
|
|
<h2 id="expert-area-heading" className="text-2xl font-semibold py-2">
|
|
My Expert Area
|
|
</h2>
|
|
|
|
<ul className="grid grid-cols-2 lg:grid-cols-3 gap-3" role="list">
|
|
{workData.map((work) => (
|
|
<li key={work.id} className="mt-2 list-none">
|
|
<figure className="bg-gray-200 rounded-xl flex items-center justify-center p-4">
|
|
<img
|
|
src={work.image}
|
|
alt={`${work.company} logo`}
|
|
className="h-8 w-20 object-contain"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
<figcaption className="sr-only">{work.company}</figcaption>
|
|
</figure>
|
|
<p className="text-center font-semibold">{work.company}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
);
|
|
}
|