we want to build a sublt beautfiul documentation integraytion guide for our applicatinon ,

we are alerting company which send alerts when events gets triggeed from differetn platforms like stripe , supabase , clerk andmany more and we send alerts to slack and email for now ,

we need comprehensive guide on integration with this platform step by step guiding user to crete webhook and how it can be integrated on all this platforms beaitifully designed scalabel as we are going to add many more in future ,

in dark theme actual integration guide per platforms and in separate routes we have dashboard so design something with can be added in one of the sidebar nav tab

we need nextjs app tailwind css shadcn ui should be used

below are just little configuratio but we need more descriptive configuration and step by step guides and also for slack also we need guide like how to create app and get webhook url which can be used on hookflo like everything detailed but in concise and easy to understand way easy to navigate comprehend
just fore reference ttached current smal summary as well which loks god but not detailed and we are gong to get seperate route per platform per notification channel and will be good if we get security tab separately and must be resposive as well if we can avaoid tabs design and use some other better design approach

import { WebhookPlatformConfig } from './types';
import {
Webhook,
UserCircle,
AlertCircle,
CreditCard,
Github,
} from 'lucide-react';
import { WebhookPlatform } from '../types';
import { SupabaseLogo } from '@/components/Logos';
import { ClerkLogo } from '@/components/Logos';
import StripeLogo from '@/components/Logos/StripeLogo';

export const platformConfigs: Partial<
Record<WebhookPlatform, WebhookPlatformConfig>

= {
supabase: {
id: 'supabase',
name: 'Supabase',
description: 'Configure webhook integration with Supabase',
icon: SupabaseLogo,
fields: [
{
key: 'webhook_id',
label: 'x-webhook-id',
description: 'Set x-webhook-id in HTTP header',
type: 'text',
placeholder: 'webhook id',
required: true,
readOnly: true,
},
{
key: 'webhook_token',
label: 'x-webhook-token',
description: 'Set x-webhook-token in HTTP header',
type: 'secret',
placeholder: 'webhook secret',
required: true,
readOnly: true,
},
],
verificationHeaders: ['x-webhook-id', 'x-webhook-token'],
showSaveButton: false,
},
clerk: {
id: 'clerk',
name: 'Clerk',
description: 'Configure webhook integration with Clerk',
icon: ClerkLogo,
fields: [
{
key: 'signing_secret',
label: 'Signing Secret',
description: 'Clerk webhook signing secret (starts with whsec_)',
type: 'secret',
placeholder: 'whsec_...',
required: true,
readOnly: false,
},
],
verificationHeaders: ['svix-id', 'svix-timestamp', 'svix-signature'],
docs: 'https://clerk.com/docs/integration/webhooks',
exampleCode: {
curl: curl -X POST https://api.SuperHook.dev/webhook \ -H "svix-id: msg_..." \ -H "svix-timestamp: 1234567890" \ -H "svix-signature: v1,..." \ -H "Content-Type: application/json" \ -d '{"type":"user.created"}',
},
showSaveButton: true,
},
stripe: {
id: 'stripe',
name: 'Stripe',
description: 'Configure webhook integration with Stripe',
icon: StripeLogo,
fields: [
{
key: 'signing_secret',
label: 'Webhook Signing Secret',
description: 'Stripe webhook signing secret (starts with whsec_)',
type: 'secret',
placeholder: 'whsec_...',
required: true,
readOnly: false,
},
],
verificationHeaders: ['stripe-signature'],
docs: 'https://stripe.com/docs/webhooks/signatures',
exampleCode: {
curl: curl -X POST https://api.SuperHook.dev/webhook \ -H "stripe-signature: t=1234567890,v1=..." \ -H "Content-Type: application/json" \ -d '{"type":"payment_intent.succeeded"}',
},
showSaveButton: true,
},
github: {
id: 'github',
name: 'GitHub',
description: 'Configure webhook integration with GitHub',
icon: Github,
fields: [
{
key: 'signing_secret',
label: 'Webhook Secret',
description: 'GitHub webhook secret',
type: 'secret',
placeholder: 'your_github_webhook_secret',
required: true,
readOnly: false,
},
],
verificationHeaders: [
'x-hub-signature-256',
'x-github-event',
'x-github-delivery',
],
docs: 'https://docs.github.com/en/developers/webhooks-and-events/webhooks/securing-your-webhooks',
exampleCode: {
curl: curl -X POST https://api.SuperHook.dev/webhook \ -H "x-hub-signature-256: sha256=..." \ -H "x-github-event: push" \ -H "x-github-delivery: 72d3162e-cc78-11e3-81ab-4c9367dc0958" \ -H "Content-Type: application/json" \ -d '{"ref":"refs/heads/main","repository":{"name":"example"}}',
},
showSaveButton: true,
},
};