feat: add poweredby mdx component

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

@@ -0,0 +1,52 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-powered-by {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0 1rem;
+}
+
+.mdx-powered-by__card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 1.5rem 0;
+}
+
+.mdx-powered-by__logo {
+  height: 40px;
+  width: auto;
+}
+
+.mdx-powered-by__name {
+  margin-top: 1rem;
+}
+
+.mdx-powered-by__description {
+  margin-top: 1.5rem;
+}
+
+.mdx-powered-by__link {
+  margin-top: 1.5rem;
+  width: 100%;
+
+  button {
+    width: 100%;
+
+    & > span {
+      display: block;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+}
+
+@include utils.responsive('lg', 'down') {
+  .mdx-powered-by {
+    grid-template-columns: 1fr;
+  }
+}

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

@@ -0,0 +1,76 @@
+import { Button, PickIcon, Typography } from '@acid-info/lsd-react'
+import { useColorMode } from '@docusaurus/theme-common'
+import React from 'react'
+import './PoweredBy.scss'
+
+export type PoweredByItem = {
+  logoSrc?: string
+  logoSrcDark?: string
+  name?: React.ReactNode
+  description?: React.ReactNode
+  link?: string
+  linkLabel?: string
+}
+
+export type PoweredByProps = React.HTMLProps<HTMLDivElement> & {
+  items?: PoweredByItem[]
+}
+
+export const PoweredBy: React.FC<PoweredByProps> = ({
+  items = [],
+  ...props
+}) => {
+  const { colorMode } = useColorMode()
+
+  return (
+    <div className="mdx-powered-by">
+      {items.map((item, index) => {
+        const logoSrc = item.logoSrc ?? item.logoSrcDark
+
+        return (
+          <div key={index} className="mdx-powered-by__card">
+            {logoSrc && (
+              <img
+                alt={typeof item.name === 'string' ? item.name : ''}
+                className="mdx-powered-by__logo"
+                src={
+                  (colorMode === 'dark' ? item.logoSrcDark : item.logoSrc) ??
+                  logoSrc
+                }
+              />
+            )}
+            <Typography
+              component="span"
+              variant="h5"
+              className="mdx-powered-by__name"
+            >
+              {item.name}
+            </Typography>
+            <Typography
+              variant="subtitle1"
+              className="mdx-powered-by__description"
+            >
+              {item.description}
+            </Typography>
+            {item.link && (
+              <a
+                href={item.link}
+                target="_blank"
+                className="mdx-powered-by__link"
+              >
+                <Button size="large" variant="outlined">
+                  <Typography variant="label1" component="span">
+                    {item.linkLabel ?? <>Visit {item.name}</>}
+                  </Typography>
+                  <span>
+                    <PickIcon color="primary" />
+                  </span>
+                </Button>
+              </a>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

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

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

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

@@ -9,5 +9,6 @@ export * from './HeroDescription'
 export * from './HeroInfo'
 export * from './HeroModel'
 export * from './HeroTitle'
+export * from './PoweredBy'
 export * from './ScrollToBottom'
 export * from './Showcase'