> ## Documentation Index
> Fetch the complete documentation index at: https://docs.insforge.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 展示

> 使用 InsForge 构建的生产应用程序

export const ServiceIcons = ({services}) => {
  const iconMap = {
    database: {
      src: '/images/icons/database.svg',
      title: 'Database'
    },
    auth: {
      src: '/images/icons/auth.svg',
      title: 'Authentication'
    },
    storage: {
      src: '/images/icons/storage.svg',
      title: 'Storage'
    },
    ai: {
      src: '/images/icons/ai.svg',
      title: 'AI Services'
    },
    functions: {
      src: '/images/icons/function.svg',
      title: 'Edge Functions'
    }
  };
  return <div className="flex gap-2 mt-3" style={{
    pointerEvents: 'none'
  }}>
      {services.map(service => {
    const icon = iconMap[service.toLowerCase()];
    return icon ? <img key={service} src={icon.src} alt={icon.title} title={icon.title} className="w-5 h-5 opacity-70" style={{
      pointerEvents: 'none'
    }} /> : null;
  })}
    </div>;
};

查看开发者使用 InsForge 构建的内容 - 从 AI 驱动的 SaaS 到社交平台等。

## 社区项目

<CardGroup cols={2}>
  <Card title="国旗排行榜" icon="flag" href="https://national-flags-phi.vercel.app/">
    <div style={{maxHeight: '192px', height: '192px', overflow: 'hidden', borderRadius: '0.5rem', pointerEvents: 'none'}}>
      <img src="https://mintcdn.com/insforge-468ccf39/ASZDAmWg97F3HceI/showcase/national-flags.png?fit=max&auto=format&n=ASZDAmWg97F3HceI&q=85&s=8507df26d9eacb43c43be62e298eb4d2" style={{width: '100%', height: '192px', objectFit: 'cover', pointerEvents: 'none'}} alt="国旗排行榜展示" width="1600" height="900" data-path="showcase/national-flags.png" />
    </div>

    通过交互式数据库学习国旗，并参与真实排行榜排名的挑战。

    <ServiceIcons services={['database', 'auth', 'storage', 'ai', 'functions']} />
  </Card>

  <Card title="Pokemon Vibe" icon="wand-magic-sparkles" href="https://pokemon-vibe.vercel.app/">
    <div style={{maxHeight: '192px', height: '192px', overflow: 'hidden', borderRadius: '0.5rem', pointerEvents: 'none'}}>
      <img src="https://mintcdn.com/insforge-468ccf39/ASZDAmWg97F3HceI/showcase/pokemon-vibe.png?fit=max&auto=format&n=ASZDAmWg97F3HceI&q=85&s=f4400158feb6bdd7d9d69a49348d5e69" style={{width: '100%', height: '192px', objectFit: 'cover', pointerEvents: 'none'}} alt="Pokemon Vibe 展示" width="1600" height="900" data-path="showcase/pokemon-vibe.png" />
    </div>

    组建自己的 Pokemon 团队并与其他玩家竞争。AI 驱动的战斗让两个团队在 AI 生成的图纸上对战。

    <ServiceIcons services={['database', 'auth', 'storage', 'ai', 'functions']} />
  </Card>

  <Card title="2048 Arena" icon="gamepad" href="https://insforge-2048-arena.netlify.app/">
    <div style={{maxHeight: '192px', height: '192px', overflow: 'hidden', borderRadius: '0.5rem', pointerEvents: 'none'}}>
      <img src="https://mintcdn.com/insforge-468ccf39/ASZDAmWg97F3HceI/showcase/2048-arena.png?fit=max&auto=format&n=ASZDAmWg97F3HceI&q=85&s=ba75d66802c050986700db2b5201b26c" style={{width: '100%', height: '192px', objectFit: 'cover', pointerEvents: 'none'}} alt="2048 Arena 展示" width="1600" height="900" data-path="showcase/2048-arena.png" />
    </div>

    经典 2048 益智游戏，配有多人竞技场和竞争排行榜。

    <ServiceIcons services={['database', 'auth']} />
  </Card>

  <Card title="Line Connect Race" icon="route" href="https://line-connect-race.vercel.app/">
    <div style={{maxHeight: '192px', height: '192px', overflow: 'hidden', borderRadius: '0.5rem', pointerEvents: 'none'}}>
      <img src="https://mintcdn.com/insforge-468ccf39/ASZDAmWg97F3HceI/showcase/line-connect-race.png?fit=max&auto=format&n=ASZDAmWg97F3HceI&q=85&s=d22cd12a1a3f87bca9b1f7505d388f94" style={{width: '100%', height: '192px', objectFit: 'cover', pointerEvents: 'none'}} alt="Line Connect Race 展示" width="1600" height="900" data-path="showcase/line-connect-race.png" />
    </div>

    具有实时多人游戏和竞争游戏玩法的交互式划线赛车游戏。

    <ServiceIcons services={['database', 'auth', 'functions']} />
  </Card>
</CardGroup>