implement logo strip

pages/about/[keyword].tsx

@@ -22,7 +22,14 @@ export default function CustomPage({
   return (
     // TODO: make theme adjustable
     <ThemeProvider theme={styledTheme}>
-      {components.map((component) => renderComponent(component?.item))}
+      {components.map((component, index) => (
+        <div
+          className="contents"
+          key={index}
+        >
+          {renderComponent(component?.item)}
+        </div>
+      ))}
     </ThemeProvider>
   )
 }

src/components/CompanyLogos.tsx

@@ -1,99 +1,76 @@
-import { type ComponentProps, type ReactNode } from 'react'
-
-import { WrapWithIf } from '@pluralsh/design-system'
+import { type ComponentProps } from 'react'
 
 import styled, { useTheme } from 'styled-components'
 import { type Merge } from 'type-fest'
 
-import { TextLabel } from '@src/components/Typography'
-import { type PartnerLogos } from '@src/data/getSiteSettings'
-
-import { StandardPageWidth } from './layout/LayoutHelpers'
-
-const CompanyLogosSectionSC = styled.div(({ theme: _ }) => ({
-  ul: {},
-  img: {
-    width: 100,
-  },
-}))
+import { getImageUrl } from '@src/consts/routes'
+import { type LogoListFragment } from '@src/generated/graphqlDirectus'
 
-// Using old inline-block layout technique so we can use 'text-wrap: balance'
-// to keep things looking nice when it breaks to multiple lines
-const LogosListSC = styled.ul(({ theme }) => ({
-  textAlign: 'center',
-  textWrap: 'balance',
-  margin: -theme.spacing.xxlarge / 2,
+const LogosListSC = styled.div(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: theme.spacing.xxlarge,
+  paddingRight: theme.spacing.xxlarge,
+  paddingLeft: theme.spacing.xxlarge,
 }))
-const LogoSC = styled.li(({ theme }) => ({
-  display: 'inline-block',
-  padding: 0,
-  margin: theme.spacing.xxlarge / 2,
-  verticalAlign: 'middle',
+const LogoSC = styled.a(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  padding: theme.spacing.medium,
+  width: 175,
+  height: 80,
+  borderRadius: theme.borderRadiuses.medium,
+  transition: 'background 0.2s ease-in-out',
+  '&:hover': {
+    background: theme.colors['fill-zero-hover'],
+  },
 }))
 
 export function CompanyLogosSection({
   logos,
-  heading,
   ...props
 }: Merge<
-  ComponentProps<typeof CompanyLogosSectionSC>,
-  {
-    logos?: PartnerLogos['items']
-    heading?: ReactNode
-  }
+  ComponentProps<typeof LogosListSC>,
+  { logos?: LogoListFragment['logos'] }
 >) {
   const theme = useTheme()
 
   return (
-    <StandardPageWidth>
-      <CompanyLogosSectionSC {...props}>
-        <TextLabel
-          className="mb-large text-center md:mb-xxlarge"
-          color={theme.mode === 'light' ? 'text-light' : 'text-xlight'}
-        >
-          {heading || 'Used by fast-moving teams at'}
-        </TextLabel>
-        <LogosListSC>
-          {logos?.map((logo) => {
-            if (!logo?.item) {
-              return null
-            }
-            const {
-              slug,
-              logo_dark: logoDark,
-              logo_light: logoLight,
-              name,
-              url,
-              width,
-            } = logo.item
-            const imgUrl = theme.mode === 'light' ? logoLight : logoDark
+    <LogosListSC {...props}>
+      {logos?.map((logo) => {
+        if (!logo?.company_logos_id) {
+          return null
+        }
+        const {
+          slug,
+          logo_dark: logoDark,
+          logo_light: logoLight,
+          name,
+          url,
+        } = logo.company_logos_id
+        const imgUrl = getImageUrl(
+          theme.mode === 'light' ? logoLight : logoDark
+        )
 
-            return (
-              imgUrl && (
-                <LogoSC key={slug}>
-                  <WrapWithIf
-                    condition={!!url}
-                    wrapper={
-                      // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
-                      <a
-                        href={url || ''}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      />
-                    }
-                  >
-                    <img
-                      src={imgUrl}
-                      alt={name}
-                      style={{ width: `${width ?? 50}px` }}
-                    />
-                  </WrapWithIf>
-                </LogoSC>
-              )
-            )
-          })}
-        </LogosListSC>
-      </CompanyLogosSectionSC>
-    </StandardPageWidth>
+        return (
+          imgUrl && (
+            <LogoSC
+              key={slug}
+              {...(url && {
+                href: url,
+                target: '_blank',
+                rel: 'noopener noreferrer',
+              })}
+            >
+              <img
+                src={imgUrl}
+                alt={name}
+              />
+            </LogoSC>
+          )
+        )
+      })}
+    </LogosListSC>
   )
 }

src/components/custom-page/Hero.tsx

@@ -9,7 +9,7 @@ import { ImageAspectRatio } from '../AspectRatio'
 import Embed from '../Embed'
 import { Body1, Hero1 } from '../Typography'
 
-import { spacingToClassName } from './common'
+import { getSpacingClassName } from './common'
 
 export function Hero({
   spacing,
@@ -22,11 +22,10 @@ export function Hero({
   video_url: videoUrl,
   form,
 }: HeroComponentFragment) {
-  const spacingClassName = spacingToClassName[spacing ?? 'normal'] ?? ''
   const imageUrl = getImageUrl(image)
 
   return (
-    <section className={cn(spacingClassName, 'mx-xxxxxxlarge')}>
+    <section className={cn(getSpacingClassName(spacing), 'mx-xxxxxxlarge')}>
       <Flex gap="xxxlarge">
         <Flex
           flex={1}

src/components/custom-page/LogoStrip.tsx

@@ -1,5 +1,16 @@
 import { type LogoStripComponentFragment } from '@src/generated/graphqlDirectus'
 
-export function LogoStrip({ spacing }: LogoStripComponentFragment) {
-  return <div>LogoStrip</div>
+import { CompanyLogosSection } from '../CompanyLogos'
+
+import { getSpacingClassName } from './common'
+
+export function LogoStrip({
+  spacing,
+  logo_list: logoList,
+}: LogoStripComponentFragment) {
+  return (
+    <section className={getSpacingClassName(spacing)}>
+      <CompanyLogosSection logos={logoList?.logos} />
+    </section>
+  )
 }

src/components/custom-page/common.tsx

@@ -10,12 +10,15 @@ import { LogoStrip } from './LogoStrip'
 import { RichTextColumns } from './RichTextColumns'
 import { SectionHeader } from './SectionHeader'
 
-export const spacingToClassName = {
+const spacingToClassName = {
   relaxed: 'my-[192px]',
   normal: 'my-[96px]',
   compact: 'my-[48px]',
 }
 
+export const getSpacingClassName = (spacing: Nullable<string>) =>
+  spacingToClassName[spacing ?? 'normal'] ?? ''
+
 export function renderComponent(
   component: NonNullable<
     NonNullable<CustomPageFragment['components']>[number]