website refactor

apps/website/ui/Group.tsx

@@ -0,0 +1,36 @@
+import React, { ReactNode } from 'react';
+import { Box } from './Box';
+
+export interface GroupProps {
+  children: ReactNode;
+  direction?: 'row' | 'col';
+  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+  gap?: number;
+  wrap?: boolean;
+  fullWidth?: boolean;
+}
+
+export const Group = ({
+  children,
+  direction = 'row',
+  align = 'center',
+  justify = 'start',
+  gap = 3,
+  wrap = false,
+  fullWidth = false,
+}: GroupProps) => {
+  return (
+    <Box
+      display="flex"
+      flexDirection={direction}
+      alignItems={align}
+      justifyContent={justify}
+      gap={gap}
+      flexWrap={wrap ? 'wrap' : 'nowrap'}
+      fullWidth={fullWidth}
+    >
+      {children}
+    </Box>
+  );
+};