added api ref and clean up

docs/docs/transformers/system/email.mdx

@@ -5,11 +5,15 @@ hide_title: true
 slug: /transformers/system/email
 ---
 
-import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
+import { TransformerPageHeader } from '@site/src/CustomComponents/TransformerPageHeader.tsx';
 
 import { DocsTable } from '@site/src/CustomComponents/DocsTable.tsx';
 
-<DocPageHeader title="Email" />
+<TransformerPageHeader
+  title="Email"
+  type="string"
+  apiRef="https://github.com/nucleuscloud/neosync/blob/main/worker/internal/benthos/transformers/email.go"
+/>
 
 ## Definition
 

docs/package.json

@@ -24,6 +24,7 @@
     "@mdx-js/react": "^1.6.22",
     "@radix-ui/react-icons": "^1.3.0",
     "autoprefixer": "^10.4.16",
+    "class-variance-authority": "^0.7.0",
     "postcss": "^8.4.31",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",

docs/src/CustomComponents/TransformerPageHeader.tsx

@@ -0,0 +1,22 @@
+import Link from '@docusaurus/Link';
+import React from 'react';
+import { Badge } from '../components/Badge';
+
+interface Props {
+  title: string;
+  type: string;
+  apiRef: string;
+}
+
+export const TransformerPageHeader = (props: Props) => {
+  const { title, type, apiRef } = props;
+  return (
+    <div className="transformer-page-header">
+      <div>{title}</div>
+      <Badge>{type}</Badge>
+      <Link href={apiRef} className="flex items-center">
+        <Badge>API reference</Badge>
+      </Link>
+    </div>
+  );
+};

docs/src/components/Badge.tsx

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '../utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border border-gray-200 bg-gray-100 text-primary-foreground text',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

docs/src/css/custom.css

@@ -84,6 +84,10 @@ this is the class for the sidebar categories that section headers
     @apply flex flex-col text-left font-bold text-3xl;
   }
 
+  .transformer-page-header {
+    @apply flex flex-row gap-4 font-bold text-3xl items-center;
+  }
+
   .heroImage {
     @apply py-10;
   }