vojtech.mares/backup-websites-2024-01
Archived
1
0
Fork 0
Code Activity

refactor(homepage/Hero): simplify company logos rendering

Browse source
This commit is contained in:
Vojtěch Mareš 2023-01-12 16:31:25 +01:00
parent dc34b678d1
commit 52d4282df4
Signed by: vojtech.mares
GPG key ID: C6827B976F17240D
1 changed files with 14 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

43
components/homepage/Hero.tsx
View file

@ -12,17 +12,11 @@ type Company = {
logo: StaticImageData; logo: StaticImageData;
} }
type CompanyList = Company[][]; // rows, three items per row const companies: Company[] = [
{ name: 'GLAMI', logo: logoGLAMI },
const companies: CompanyList = [ { name: 'Digitoo', logo: logoDigitoo },
[
{ name: 'GLAMI', logo: logoGLAMI },
{ name: 'Digitoo', logo: logoDigitoo },
],
// [], // columns for mobile view - 3 items per row
]; ];
export function Hero() { export function Hero() {
return ( return (
<> <>
@ -66,27 +60,18 @@ export function Hero() {
</p> </p>
<ul <ul
role="list" role="list"
className="mt-4 flex items-center justify-center gap-x-8 sm:justify-start sm:flex-col sm:gap-x-0 sm:gap-y-10 xl:flex-row xl:gap-x-12 xl:gap-y-0" className="mt-4 flex flex-wrap items-center justify-center gap-x-6 sm:justify-start"
> >
{companies.map((group, groupIndex) => ( {companies.map((company) => (
<li key={groupIndex}> <li key={company.name} className="flex">
<ul <Image
role="list" className="h-16 object-scale-down"
className="flex flex-col items-center justify-center gap-y-8 sm:justify-start sm:flex-row sm:gap-x-12 sm:gap-y-0" src={company.logo}
> alt={company.name}
{group.map((company) => ( width={128}
<li key={company.name} className="flex"> height={64}
<Image priority
className="h-16 object-scale-down" />
src={company.logo}
alt={company.name}
width={128}
height={64}
priority
/>
</li>
))}
</ul>
</li> </li>
))} ))}
</ul> </ul>