feat: implement LogoCarousel component

packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/LogoCarousel.scss

@@ -0,0 +1,33 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-logo-carousel {
+  .mdx-section-header__title {
+    flex-basis: 100%;
+  }
+
+  .mdx-section-header__extra {
+    margin-left: auto;
+  }
+
+  .mdx-logo-carousel__inner {
+    margin-top: 100px;
+  }
+
+  .mdx-logo-carousel__item {
+    flex-shrink: 0;
+  }
+
+  .mdx-logo-carousel__logo {
+    height: 86px;
+    width: auto;
+  }
+}
+
+@include utils.responsive('lg', 'down') {
+  .mdx-logo-carousel {
+    .mdx-logo-carousel__inner {
+      margin-top: 64px;
+    }
+  }
+}

packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/LogoCarousel.tsx

@@ -0,0 +1,64 @@
+import { Typography } from '@acid-info/lsd-react'
+import ThemedImage from '@theme/ThemedImage'
+import clsx from 'clsx'
+import React, { useRef } from 'react'
+import './LogoCarousel.scss'
+import { Grid, SectionHeader } from '..'
+import { ScrollButtons } from '../ScrollButtons'
+import { useHydrated } from '../../../lib/useHydrated'
+
+export type LogoCarouselProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'title'
+> & {
+  title?: React.ReactNode
+  items?: {
+    title?: string
+    logoSrc?: string
+    logoSrcDark?: string
+  }[]
+}
+
+export const LogoCarousel: React.FC<LogoCarouselProps> = ({
+  title,
+  className,
+  items = [],
+  children,
+  ...props
+}) => {
+  const hydrated = useHydrated()
+  const ref = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLElement | null>(null)
+
+  if (typeof window !== 'undefined' && hydrated && !containerRef.current) {
+    containerRef.current =
+      ref.current?.querySelector('.mdx-grid__content') ?? null
+
+    console.log(containerRef.current, ref.current)
+  }
+
+  return (
+    <div ref={ref} className={clsx(className, 'mdx-logo-carousel')} {...props}>
+      <SectionHeader title={title}>
+        <ScrollButtons containerRef={containerRef} />
+      </SectionHeader>
+      <Grid
+        className="mdx-logo-carousel__inner"
+        xs={{ wrap: false, gap: '96px', scrollButtons: false }}
+      >
+        {items.map((item) => (
+          <Grid.Item className="mdx-logo-carousel__item">
+            <ThemedImage
+              className="mdx-logo-carousel__logo"
+              title={item.title}
+              sources={{
+                dark: item.logoSrcDark ?? item.logoSrc ?? '',
+                light: item.logoSrc ?? item.logoSrcDark ?? '',
+              }}
+            />
+          </Grid.Item>
+        ))}
+      </Grid>
+    </div>
+  )
+}

packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/index.ts

@@ -0,0 +1 @@
+export * from './LogoCarousel'

packages/logos-docusaurus-theme/src/client/components/mdx/index.ts

@@ -18,6 +18,7 @@ export * from './HeroModel'
 export * from './HeroTitle'
 export * from './HeroVideo'
 export * from './JobsPerDepartment'
+export * from './LogoCarousel'
 export * from './NewsletterSubscription'
 export * from './PoweredBy'
 export * from './ProfileCard'