refactor: use the new Grid in the Showcase component; refs #116

packages/docusaurus-playground/src/pages/index.mdx

@@ -17,6 +17,7 @@ import {
   Roadmap,
   SectionHeader,
   TimelineItem,
+  ShowcaseCard,
 } from '../components/mdx'
 
 <Hero size="large">
@@ -253,3 +254,89 @@ import {
     </Grid.Item>
   </Grid>
 </Box>
+
+<Box top={{ xs: 144, lg: 216 }}>
+  <CallToActionSection
+    title="User Endorsements"
+  />
+</Box>
+<Box top={{ xs: 64, lg: 100 }}>
+  <Showcase
+    id="showcase"
+    items={[
+      {
+        name: 'Status',
+        logo: '/showcase/status-mark-black.svg',
+        logoDark: '/showcase/status-mark-white.svg',
+        description:
+          `"Waku v2 has been instrumental in helping us scale the Status application securely while maintaining the decentralised nature of our network. The Waku team has been invaluable in providing practical solutions during the development of the Waku v2 protocol, enabling us to deliver essential Status Communities features.”`,
+      },
+      {
+        name: 'Railgun',
+        logo: '/showcase/railgun-mark-black.svg',
+        logoDark: '/showcase/railgun-mark-white.svg',
+        description:
+          <>"RAILGUN contributors selected Waku to run its relayer network as an early-stage but promising product of the privacy-centric <a href="https://status.im" target="_blank">status.im</a> ecosystem. We have not been disappointed. The developers are extremely professional and responsive, and continue to strive to understand and meet our needs as a communication layer for relaying private transactions."</>,
+      },
+      {
+        name: 'The Graph',
+        logo: '/showcase/the-graph-mark-black.svg',
+        logoDark: '/showcase/the-graph-mark-white.svg',
+        description:
+          `"Our experience with Waku has been transformative, proving to be a valuable tool that reveals the potential of peer-to-peer communication technologies. We are excited to continue using Waku's advanced features and contribute to the growth of Graphcast and the broader Graph ecosystem."`,
+      }
+    ]}
+  />
+
+  <CallToActionButton href="https://docs.waku.org/" variant="outlined">Build on Waku</CallToActionButton>
+</Box>
+
+<Box top={{ xs: 144, lg: 216 }}>
+  <CallToActionSection title="User Endorsements" />
+</Box>
+<Box top={{ xs: 64, lg: 100 }}>
+  <Grid
+    xs={{ cols: 2, wrap: true, gap: '1.5rem 1em' }}
+    lg={{ cols: 3, gap: '1rem' }}
+  >
+    <Grid.Item xs={1}>
+      <ShowcaseCard
+        name="Status"
+        logoSrc="/showcase/status-mark-black.svg"
+        logoSrcDark="/showcase/status-mark-white.svg"
+        description={`"Waku v2 has been instrumental in helping us scale the Status application securely while maintaining the decentralised nature of our network. The Waku team has been invaluable in providing practical solutions during the development of the Waku v2 protocol, enabling us to deliver essential Status Communities features.”`}
+      />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+      <ShowcaseCard
+        name="Railgun"
+        logoSrc="/showcase/railgun-mark-black.svg"
+        logoSrcDark="/showcase/railgun-mark-white.svg"
+        description={
+          <>
+            "RAILGUN contributors selected Waku to run its relayer network as an
+            early-stage but promising product of the privacy-centric{' '}
+            <a href="https://status.im" target="_blank">
+              status.im
+            </a>{' '}
+            ecosystem. We have not been disappointed. The developers are
+            extremely professional and responsive, and continue to strive to
+            understand and meet our needs as a communication layer for relaying
+            private transactions."
+          </>
+        }
+      />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+      <ShowcaseCard
+        name="The Graph"
+        logoSrc="/showcase/the-graph-mark-black.svg"
+        logoSrcDark="/showcase/the-graph-mark-white.svg"
+        description={`"Our experience with Waku has been transformative, proving to be a valuable tool that reveals the potential of peer-to-peer communication technologies. We are excited to continue using Waku's advanced features and contribute to the growth of Graphcast and the broader Graph ecosystem."`}
+      />
+    </Grid.Item>
+  </Grid>
+  <CallToActionButton href="https://docs.waku.org/" variant="outlined">
+    Build on Waku
+  </CallToActionButton>
+</Box>

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

@@ -1,51 +1,2 @@
-@use '../../../css/utils';
-@use '../../../css/lsd';
-
 .mdx-showcase {
-  width: 100%;
-  overflow: hidden;
-  display: grid;
-  grid-template-columns: repeat(var(--columns), 1fr);
-  gap: 1rem;
-}
-
-.mdx-showcase__item {
-  border-top: 1px solid rgb(var(--lsd-border-primary));
-}
-
-.mdx-showcase__item-inner {
-  padding: 24px 8px;
-}
-
-.mdx-showcase__item-logo {
-}
-
-.mdx-showcase__item-name {
-  margin-top: 1rem;
-}
-
-.mdx-showcase__item-description {
-  border-top: 1px solid rgb(var(--lsd-border-primary));
-  margin-top: 24px;
-  padding-top: 16px;
-}
-
-@include utils.responsive('lg', 'down') {
-  .mdx-showcase {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 1.5rem 1rem;
-  }
-
-  .mdx-showcase__item-name {
-    @include lsd.typography('h6');
-  }
-
-  .mdx-showcase__item-description {
-    margin-top: 1rem;
-  }
-
-  .mdx-showcase__item-logo {
-    width: 34px;
-    height: auto;
-  }
 }

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

@@ -1,71 +1,31 @@
-import { Typography } from '@acid-info/lsd-react'
-import ThemedImage from '@theme/ThemedImage'
 import clsx from 'clsx'
 import React from 'react'
-import { makeStyle } from '../../../lib/makeStyle'
+import { Grid, GridProps, ShowcaseCard, ShowcaseCardProps } from '..'
 import './Showcase.scss'
 
-export type ShowcaseItem = {
-  name: React.ReactNode
-  logo?: string
-  logoDark?: string
-  description: React.ReactNode
-}
-
-export type ShowcaseProps = Omit<
-  React.HTMLAttributes<HTMLDivElement>,
-  'title'
-> & {
-  items: ShowcaseItem[]
-  columns?: number
+export type ShowcaseProps = GridProps & {
+  items: ShowcaseCardProps[]
 }
 
 export const Showcase: React.FC<ShowcaseProps> = ({
   items = [],
-  columns = 4,
-  style = {},
   className,
-  children,
   ...props
 }) => {
   return (
-    <div
+    <Grid
       className={clsx(className, 'mdx-showcase')}
-      style={makeStyle({ ...style }, { columns })}
+      xs={{ cols: 2, wrap: true, gap: '1.5rem 1em' }}
+      lg={{ cols: 3, gap: '1rem' }}
       {...props}
     >
       {items.map((item, index) => {
         return (
-          <div key={index} className="mdx-showcase__item">
-            <div key={index} className="mdx-showcase__item-inner">
-              {item?.logo && item?.logoDark && (
-                <ThemedImage
-                  sources={{
-                    dark: item.logoDark,
-                    light: item.logo,
-                  }}
-                  alt={typeof item.name === 'string' ? item.name : 'image'}
-                  className="mdx-showcase__item-logo"
-                />
-              )}
-              <Typography
-                variant="h3"
-                component="h2"
-                className="mdx-showcase__item-name"
-              >
-                {item.name}
-              </Typography>
-              <Typography
-                variant="subtitle1"
-                component="p"
-                className="mdx-showcase__item-description"
-              >
-                {item.description}
-              </Typography>
-            </div>
-          </div>
+          <Grid.Item key={index} className="mdx-showcase__item" xs={1}>
+            <ShowcaseCard {...item} />
+          </Grid.Item>
         )
       })}
-    </div>
+    </Grid>
   )
 }

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

@@ -0,0 +1,43 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-showcase-card {
+  border-top: 1px solid rgb(var(--lsd-border-primary));
+}
+
+.mdx-showcase-card__inner {
+  padding: 24px 8px;
+}
+
+.mdx-showcase-card__logo {
+}
+
+.mdx-showcase-card__name {
+  margin-top: 1rem;
+}
+
+.mdx-showcase-card__description {
+  border-top: 1px solid rgb(var(--lsd-border-primary));
+  margin-top: 24px;
+  padding-top: 16px;
+}
+
+@include utils.responsive('lg', 'down') {
+  .mdx-showcase {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem 1rem;
+  }
+
+  .mdx-showcase-card__name {
+    @include lsd.typography('h6');
+  }
+
+  .mdx-showcase-card__description {
+    margin-top: 1rem;
+  }
+
+  .mdx-showcase-card__logo {
+    width: 34px;
+    height: auto;
+  }
+}

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

@@ -0,0 +1,56 @@
+import { Typography } from '@acid-info/lsd-react'
+import ThemedImage from '@theme/ThemedImage'
+import clsx from 'clsx'
+import React from 'react'
+import './ShowcaseCard.scss'
+
+export type ShowcaseCardProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'title'
+> & {
+  logoSrc?: string
+  logoSrcDark?: string
+  name: React.ReactNode
+  description: React.ReactNode
+}
+
+export const ShowcaseCard: React.FC<ShowcaseCardProps> = ({
+  name,
+  logoSrc,
+  logoSrcDark,
+  description,
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <div className={clsx(className, 'mdx-showcase-card')} {...props}>
+      <div className="mdx-showcase-card__inner">
+        {(logoSrc || logoSrcDark) && (
+          <ThemedImage
+            sources={{
+              dark: logoSrcDark ?? logoSrc ?? '',
+              light: logoSrc ?? logoSrcDark ?? '',
+            }}
+            alt={typeof name === 'string' ? name : ''}
+            className="mdx-showcase-card__logo"
+          />
+        )}
+        <Typography
+          variant="h3"
+          component="h2"
+          className="mdx-showcase-card__name"
+        >
+          {name}
+        </Typography>
+        <Typography
+          variant="subtitle1"
+          component="p"
+          className="mdx-showcase-card__description"
+        >
+          {description}
+        </Typography>
+      </div>
+    </div>
+  )
+}

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

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

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

@@ -18,5 +18,6 @@ export * from './Roadmap'
 export * from './ScrollToBottom'
 export * from './SectionHeader'
 export * from './Showcase'
+export * from './ShowcaseCard'
 export * from './SocialCard'
 export * from './TimelineItem'