💄 style: Update form footer

.dumirc.ts

@@ -26,6 +26,7 @@ const nav: INavItem[] = [
   { link: '/components/awesome/features', title: 'Awesome' },
   { link: '/components/brand/lobe-hub', title: 'Brand' },
   { link: '/components/mdx/callout', title: 'Mdx' },
+  { link: '/components/icons/auth0', title: 'Icons' },
   { link: '/components/color/color-scales', title: 'Color' },
   { link: '/changelog', title: 'Changelog' },
 ];

src/Form/components/FormFooter.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -7,9 +8,26 @@ import { type DivProps } from '@/types';
 
 export type FormFooterProps = DivProps;
 
-const FormFooter = memo<FormFooterProps>(({ children, ...rest }) => {
+const useStyles = createStyles(({ css, responsive }) => {
+  return {
+    container: css`
+      ${responsive.mobile} {
+        padding: 16px;
+      }
+    `,
+  };
+});
+
+const FormFooter = memo<FormFooterProps>(({ className, children, ...rest }) => {
+  const { cx, styles } = useStyles();
   return (
-    <Flexbox gap={8} horizontal justify={'flex-end'} {...rest}>
+    <Flexbox
+      className={cx(styles.container, className)}
+      gap={8}
+      horizontal
+      justify={'flex-end'}
+      {...rest}
+    >
       {children}
     </Flexbox>
   );