website refactor

apps/website/ui/IconButton.tsx

@@ -1,18 +1,20 @@
-import React, { MouseEventHandler } from 'react';
+import React, { forwardRef } from 'react';
 import { Button, ButtonProps } from './Button';
 import { Icon } from './Icon';
 
 export interface IconButtonProps extends Omit<ButtonProps, 'children' | 'icon'> {
   icon: any;
   title?: string;
+  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'low' | 'high';
 }
 
-export const IconButton = ({ 
+export const IconButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, IconButtonProps>(({ 
   icon, 
   title,
   size = 'md',
+  intent,
   ...props 
-}: IconButtonProps) => {
+}, ref) => {
   const iconSizeMap = {
     sm: 3,
     md: 4,
@@ -21,11 +23,14 @@ export const IconButton = ({
 
   return (
     <Button 
+      ref={ref}
       size={size}
       {...props}
     >
-      <Icon icon={icon} size={iconSizeMap[size]} />
+      <Icon icon={icon} size={iconSizeMap[size]} intent={intent} />
       {title && <span className="sr-only">{title}</span>}
     </Button>
   );
-};
+});
+
+IconButton.displayName = 'IconButton';