supabase/apps/docs/pages/guides/integrations.mdx

import Layout from '~/layouts/DefaultLayout'
import Link from 'next/link'
import Image from 'next/image'
import { GlassPanel } from 'ui'
import { integrations } from '~/components/Navigation/NavigationMenu/NavigationMenu.constants'

export const meta = {
  title: 'Integrations',
}

Explore a variety of integrations from Supabase partners. Need a different integration? Find a [Supabase expert](https://supabase.com/partners/experts) to help build your next idea.

<div>
  {integrations.items.map((item) => (
  <div key={item.name}>
    <h2>{item.name}</h2>
    <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 not-prose">
      {item.items?.map((integration) => (
        <Link href={`${integration.url}`} key={integration.name} >
          <a>
            <GlassPanel
              title={integration.name}
              background={false}
              icon={<Image height={40} width={40} className="rounded" alt="" src={`/docs/img/integrations/logos/${integration.name.toLowerCase().replace(/ /g,"_")}_logo.png`}/>}
            >
              {integration.description}

            </GlassPanel>
          </a>
        </Link>
      ))}

    </div>

  </div>
  ))}
</div>

export const Page = ({ children }) => <Layout meta={meta} children={children} />

export default Page