import { Cards } from 'nextra/components'

<div className="mb-16 mt-10 text-center">
  # Showcase

  <p className="mt-4 text-lg text-gray-500 dark:text-gray-400">
    {'Open source projects powered by Nextra'}
  </p>
</div>

<Cards>
  <Card title="GraphQL Hive" href="https://the-guild.dev/graphql/hive">
    <>![GraphQL Hive preview](./showcase/graphql-hive.png)</>
  </Card>
  <Card title="Speakeasy" href="https://speakeasyapi.dev/docs">
    <>![Speakeasy preview](./showcase/speakeasy.png)</>
  </Card>
  <Card title="React Flow" href="https://reactflow.dev">
    <>![React Flow preview](./showcase/react-flow.jpg)</>
  </Card>
  <Card title="Svelte Flow" href="https://svelteflow.dev">
    <>![Svelte Flow preview](./showcase/svelte-flow.jpg)</>
  </Card>
  <Card title="The Graph" href="https://thegraph.com/docs/en">
    <>![The Graph preview](./showcase/thegraph.jpeg)</>
  </Card>
  <Card title="GraphQL" href="https://graphql.org">
    <>![GraphQL preview](./showcase/graphql.png)</>
  </Card>
  <Card title="SWR" href="https://swr.vercel.app">
    <>![SWR preview](./showcase/swr.png)</>
  </Card>
  <Card title="COBE" href="https://cobe.vercel.app">
    <>![COBE preview](./showcase/cobe.png)</>
  </Card>
  <Card
    title="JavaScript Patterns"
    href="https://javascriptpatterns.vercel.app"
  >
    <>![JavaScript Patterns preview](./showcase/javascript-patterns.jpg)</>
  </Card>
  <Card
    title="CodeSandbox"
    href="https://codesandbox.io/docs/learn/introduction/overview"
  >
    <>![CodeSandbox preview](./showcase/codesandbox.jpg)</>
  </Card>
  <Card title="DocsGPT" href="https://docs.docsgpt.co.uk">
    <>![DocsGPT preview](./showcase/docsgpt.png)</>
  </Card>
  <Card title="CloudQuery" href="https://cloudquery.io">
    <>![CloudQuery preview](./showcase/cloudquery.svg)</>
  </Card>
  <Card title="Edge Runtime" href="https://edge-runtime.vercel.app">
    <>![Edge Runtime preview](./showcase/edge-runtime.jpeg)</>
  </Card>
  <Card title="Livepeer" href="https://docs.livepeer.org/guides/overview">
    <>![Livepeer preview](./showcase/livepeer.png)</>
  </Card>
  <Card title="Sound.xyz" href="https://docs.sound.xyz">
    <>![Sound.xyz preview](./showcase/sound.xyz.png)</>
  </Card>
  <Card title="Panda" href="https://panda-css.com">
    <>![Panda preview](./showcase/panda.png)</>
  </Card>
  <Card title="Kuma UI" href="https://kuma-ui.com">
    <>![Kuma UI preview](./showcase/kuma-ui.png)</>
  </Card>
  <Card title="Langfuse" href="https://langfuse.com">
    <>
      ![Langfuse Open Source LLM Engineering Platform](./showcase/langfuse.png)
    </>
  </Card>
  <Card title="The Guild Blog" href="https://the-guild.dev">
    <>![The Guild Blog preview](./showcase/the-guild.png)</>
  </Card>
  <Card title="GraphQL Yoga" href="https://the-guild.dev/graphql/yoga-server">
    <>![GraphQL Yoga preview](./showcase/graphql-yoga.png)</>
  </Card>
  <Card title="GraphQL Envelop" href="https://the-guild.dev/graphql/envelop">
    <>![GraphQL Envelop preview](./showcase/graphql-envelop.png)</>
  </Card>
  <Card
    title="GraphQL Inspector"
    href="https://the-guild.dev/graphql/inspector"
  >
    <>![GraphQL Inspector preview](./showcase/graphql-inspector.png)</>
  </Card>
  <Card
    title="GraphQL Code Generator"
    href="https://the-guild.dev/graphql/codegen"
  >
    <>![GraphQL Code Generator preview](./showcase/graphql-codegen.png)</>
  </Card>
  <Card title="GraphQL Mesh" href="https://the-guild.dev/graphql/mesh">
    <>![GraphQL Mesh preview](./showcase/graphql-mesh.png)</>
  </Card>
  <Card title="GraphQL Tools" href="https://the-guild.dev/graphql/tools">
    <>![GraphQL Tools preview](./showcase/graphql-tools.png)</>
  </Card>
  <Card title="GraphQL Modules" href="https://the-guild.dev/graphql/modules">
    <>![GraphQL Modules preview](./showcase/graphql-modules.png)</>
  </Card>
  <Card title="GraphQL ESLint" href="https://the-guild.dev/graphql/eslint">
    <>![GraphQL ESLint preview](./showcase/graphql-eslint.png)</>
  </Card>
  <Card title="GraphQL Config" href="https://the-guild.dev/graphql/config">
    <>![GraphQL Config preview](./showcase/graphql-config.png)</>
  </Card>
  <Card title="GraphQL Scalars" href="https://the-guild.dev/graphql/scalars">
    <>![GraphQL Scalars preview](./showcase/graphql-scalars.png)</>
  </Card>
  <Card title="GraphQL Shield" href="https://the-guild.dev/graphql/shield">
    <>![GraphQL Shield preview](./showcase/graphql-shield.png)</>
  </Card>
  <Card title="GraphQL SOFA" href="https://the-guild.dev/graphql/sofa-api">
    <>![GraphQL SOFA preview](./showcase/graphql-sofa.png)</>
  </Card>
  <Card
    title="Apollo Angular"
    href="https://the-guild.dev/graphql/apollo-angular"
  >
    <>![Apollo Angular preview](./showcase/apollo-angular.png)</>
  </Card>
  <Card title="KitQL" href="https://kitql.dev">
    <>![KitQL preview](./showcase/kitql.png)</>
  </Card>
  <Card title="GraphQL SSE" href="https://the-guild.dev/graphql/sse">
    <>![GraphQL SSE preview](./showcase/graphql-sse.png)</>
  </Card>
  <Card title="GraphQL WS" href="https://the-guild.dev/graphql/ws">
    <>![GraphQL WS preview](./showcase/graphql-ws.png)</>
  </Card>
  <Card title="feTS" href="https://the-guild.dev/openapi/fets">
    <>![feTS preview](./showcase/fets.png)</>
  </Card>
  <Card
    title="JavaScript Code Challenges"
    href="https://jscodechallenges.vercel.app"
  >
    <>![JavaScript Code Challenges preview](./showcase/jscodechallenges.png)</>
  </Card>
  <Card title="React Cosmos" href="https://reactcosmos.org">
    <>![React Cosmos preview](./showcase/react-cosmos.png)</>
  </Card>
  <Card title="Typia" href="https://typia.io">
    <>![Typia preview](./showcase/typia.png)</>
  </Card>
  <Card title="Nestia" href="https://nestia.io">
    <>![Nestia preview](./showcase/nestia.png)</>
  </Card>
  <Card title="Safe" href="https://docs.safe.global">
    <>![Safe preview](./showcase/safe-core.png)</>
  </Card>
  <Card title="Auth.js" href="https://authjs.dev">
    <>![Auth.js preview](./showcase/authjs.png)</>
  </Card>
  <Card title="imgix" href="https://docs.imgix.com">
    <>![imgix preview](./showcase/imgix.png)</>
  </Card>
  <Card title="AnythingLLM" href="https://anythingllm.com/">
    <>![AnythingLLM preview](./showcase/anythingllm.png)</>
  </Card>
</Cards>

export const Card = Object.assign(
  // Copy card component and add default props
  Cards.Card.bind(),
  {
    displayName: 'Card',
    defaultProps: {
      arrow: true,
      target: '_blank',
      rel: 'noreferrer'
    }
  }
)

<style global jsx>{`
  img {
    aspect-ratio: 12/6.3;
    object-fit: cover;
  }
`}</style>
