Files
supabase/apps/docs/components/Navigation/NavigationMenu/MenuIconPicker.tsx
Francesco Sansalvadore dc957ffc1b chore(studio/www/docs): uniform changelog icon across apps (#45624)
Use same `changelog` icon on all apps.

## What is the current behavior?

Each app shows a different icon.

| app | preview |
|---|---|
| www | <img width="1166" height="403" alt="Screenshot 2026-05-06 at 10
52 25"
src="https://github.com/user-attachments/assets/fac62c31-d76b-4f59-907e-824cdd840b1c"
/> |
| docs | <img width="524" height="231" alt="Screenshot 2026-05-06 at 10
52 39"
src="https://github.com/user-attachments/assets/749a2726-eb7e-47b3-84fe-24d191b56b72"
/> |
| studio | <img width="367" height="423" alt="Screenshot 2026-05-06 at
10 51 20"
src="https://github.com/user-attachments/assets/eec1a489-8544-4bb4-8408-37e1e0a9345e"
/> |

## What is the new behavior?

| app | preview |
|---|---|
| www | <img width="1114" height="393" alt="Screenshot 2026-05-06 at 10
49 15"
src="https://github.com/user-attachments/assets/1d0e9cff-6390-4005-9656-98f8f45a4657"
/>|
| docs | <img width="498" height="227" alt="Screenshot 2026-05-06 at 10
49 22"
src="https://github.com/user-attachments/assets/3d41f219-f179-4fc7-b87b-fdb92626e0f7"
/> |
| studio | <img width="367" height="423" alt="Screenshot 2026-05-06 at
10 51 20"
src="https://github.com/user-attachments/assets/eec1a489-8544-4bb4-8408-37e1e0a9345e"
/> |

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Updated navigation menu icons and developer documentation icons for
improved visual consistency across the interface.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-06 12:16:04 +02:00

133 lines
5.0 KiB
TypeScript

import { Clock, Heart, ScrollText, Server, SquareStack, Telescope } from 'lucide-react'
import {
IconBranching,
IconGitBranch,
IconGitHub,
IconMenuAI,
IconMenuApi,
IconMenuAuth,
IconMenuCli,
IconMenuCsharp,
IconMenuDatabase,
IconMenuDevCli,
IconMenuEdgeFunctions,
IconMenuFlutter,
IconMenuGettingStarted,
IconMenuGraphQL,
IconMenuHome,
IconMenuIntegrations,
IconMenuJavascript,
IconMenuKotlin,
IconMenuPlatform,
IconMenuPython,
IconMenuRealtime,
IconMenuResources,
IconMenuRestApis,
IconMenuSelfHosting,
IconMenuStatus,
IconMenuStorage,
IconMenuSwift,
IconSecurity,
IconSupport,
IconTroubleshooting,
IconUI,
} from './MenuIcons'
function getMenuIcon(menuKey: string, width: number = 16, height: number = 16, className?: string) {
switch (menuKey) {
case 'home':
return <IconMenuHome width={width} height={height} className={className} />
case 'branching':
return <IconBranching width={width} height={height} className={className} />
case 'getting-started':
return <IconMenuGettingStarted width={width} height={height} className={className} />
case 'database':
return <IconMenuDatabase width={width} height={height} className={className} />
case 'rest':
return <IconMenuRestApis width={width} height={height} className={className} />
case 'graphql':
return <IconMenuGraphQL width={width} height={height} className={className} />
case 'auth':
return <IconMenuAuth width={width} height={height} className={className} />
case 'edge-functions':
return <IconMenuEdgeFunctions width={width} height={height} className={className} />
case 'realtime':
return <IconMenuRealtime width={width} height={height} className={className} />
case 'storage':
return <IconMenuStorage width={width} height={height} className={className} />
case 'ai':
return <IconMenuAI width={width} height={height} className={className} />
case 'platform':
return <IconMenuPlatform width={width} height={height} className={className} />
case 'resources':
return <IconMenuResources width={width} height={height} className={className} />
case 'self-hosting':
return <IconMenuSelfHosting width={width} height={height} className={className} />
case 'integrations':
return <IconMenuIntegrations width={width} height={height} className={className} />
case 'reference-javascript':
return <IconMenuJavascript width={width} height={height} className={className} />
case 'reference-dart':
return <IconMenuFlutter width={width} height={height} className={className} />
case 'reference-python':
return <IconMenuPython width={width} height={height} className={className} />
case 'reference-csharp':
return <IconMenuCsharp width={width} height={height} className={className} />
case 'reference-swift':
return <IconMenuSwift width={width} height={height} className={className} />
case 'reference-kotlin':
return <IconMenuKotlin width={width} height={height} className={className} />
case 'reference-api':
return <IconMenuApi width={width} height={height} className={className} />
case 'dev-cli':
return <IconMenuDevCli width={width} height={height} className={className} />
case 'reference-cli':
return <IconMenuCli width={width} height={height} className={className} />
case 'status':
return <IconMenuStatus width={width} height={height} className={className} />
case 'git-branch':
return <IconGitBranch width={width} height={height} className={className} />
case 'github':
return <IconGitHub width={width} height={height} className={className} />
case 'support':
return <IconSupport width={width} height={height} className={className} />
case 'security':
return <IconSecurity width={width} height={height} className={className} />
case 'telemetry':
return <Telescope width={width} height={height} className={className} />
case 'troubleshooting':
return <IconTroubleshooting width={width} height={height} className={className} />
case 'changelog':
return <ScrollText width={width} height={height} className={className} />
case 'contributing':
return <Heart width={width} height={height} className={className} />
case 'deployment':
return <Server width={width} height={height} className={className} />
case 'cron':
return <Clock width={width} height={height} className={className} />
case 'queues':
return <SquareStack width={width} height={height} className={className} />
case 'ui':
return <IconUI width={width} height={height} className={className} />
default:
return <IconMenuPlatform width={width} height={height} className={className} />
}
}
type MenuIconPickerProps = {
icon: string
width?: number
height?: number
className?: string
}
export default function MenuIconPicker({
icon,
width = 16,
height = 16,
className,
}: MenuIconPickerProps) {
return getMenuIcon(icon, width, height, className)
}