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

21
components/homepage/Hero.tsx
View file

@ -12,17 +12,11 @@ type Company = {
logo: StaticImageData;
}
type CompanyList = Company[][]; // rows, three items per row
const companies: CompanyList = [
[
const companies: Company[] = [
{ name: 'GLAMI', logo: logoGLAMI },
{ name: 'Digitoo', logo: logoDigitoo },
],
// [], // columns for mobile view - 3 items per row
];
export function Hero() {
return (
<>
@ -66,15 +60,9 @@ export function Hero() {
</p>
<ul
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) => (
<li key={groupIndex}>
<ul
role="list"
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"
>
{group.map((company) => (
{companies.map((company) => (
<li key={company.name} className="flex">
<Image
className="h-16 object-scale-down"
@ -87,9 +75,6 @@ export function Hero() {
</li>
))}
</ul>
</li>
))}
</ul>
</div>
</div>
<Image className="pt-10 md:pt-0 mx-auto md:mx-0" priority width={400} height={800} src={avatarVojtechMares} alt="Vojtěch Mareš" />