[Enhancement] Colorize OpenAPI HTTP Status Codes based on Status Code

[Twinki14]

What problem will this feature address?

HTTP Status Codes could use a little bit of color to add some "pop"

Describe the solution you'd like

Add some color to HTTP Status Codes by re-using some of the CSS classes we already have

1xx - text-blue & bg-blue #2563eb
2xx - text-green & bg-green #16a34a
3xx - text-orange & bg-orange #ea580c
4xx - text-red & bg-red #dc2626
5xx - text-red & bg-red #dc2626

Describe alternatives you've considered

None

Additional context

No response

[fuma-nama]

I think now it's great enough to have this on playground's result display:

You can also replace/style the tabs with renderer (make sure to include lib/source.ts in Tailwind CSS config!):

import { createOpenAPI } from 'fumadocs-openapi/server';
import { Tabs, TabsTrigger, TabsList } from 'fumadocs-ui/components/ui/tabs';
import { cn } from '@/lib/cn';

export const openapi = createOpenAPI({
  renderer: {
    Responses: ({ items, ...props }) => (
      <Tabs defaultValue={items[0]} {...props}>
        <TabsList>
          {items.map((item) => (
            <TabsTrigger
              key={item}
              value={item}
              className={cn(
                item.startsWith('2') &&
                  'data-[state=active]:border-green-400 data-[state=active]:text-green-400',
                (item.startsWith('4') || item.startsWith('5')) &&
                  'data-[state=active]:border-red-400 data-[state=active]:text-red-400',
              )}
            >
              {item}
            </TabsTrigger>
          ))}
        </TabsList>
        {props.children}
      </Tabs>
    ),
  },
});