tank search ui rebuilt... somewhat

packages/website/src/components/Flex/index.module.css

@@ -4,4 +4,61 @@
   &[data-column="true"] {
     flex-direction: column;
   }
+  &[data-wrap="true"] {
+    flex-wrap: wrap;
+  }
+
+  &[data-justify="start"] {
+    justify-content: flex-start;
+  }
+  &[data-justify="center"] {
+    justify-content: center;
+  }
+  &[data-justify="end"] {
+    justify-content: flex-end;
+  }
+  &[data-justify="between"] {
+    justify-content: space-between;
+  }
+
+  &[data-align="start"] {
+    align-items: flex-start;
+  }
+  &[data-align="center"] {
+    align-items: center;
+  }
+  &[data-align="end"] {
+    align-items: flex-end;
+  }
+
+  &[data-gap="0"] {
+    gap: var(--space-0);
+  }
+  &[data-gap="1"] {
+    gap: var(--space-1);
+  }
+  &[data-gap="2"] {
+    gap: var(--space-2);
+  }
+  &[data-gap="3"] {
+    gap: var(--space-3);
+  }
+  &[data-gap="4"] {
+    gap: var(--space-4);
+  }
+  &[data-gap="5"] {
+    gap: var(--space-5);
+  }
+  &[data-gap="6"] {
+    gap: var(--space-6);
+  }
+  &[data-gap="7"] {
+    gap: var(--space-7);
+  }
+  &[data-gap="8"] {
+    gap: var(--space-8);
+  }
+  &[data-gap="9"] {
+    gap: var(--space-9);
+  }
 }

packages/website/src/components/Flex/index.tsx

@@ -4,17 +4,34 @@ import { classNames } from "../../ui/classNames";
 import styles from "./index.module.css";
 
 interface Props extends ComponentProps<"div"> {
-  gap?: Space;
   column?: boolean;
+  wrap?: boolean;
+
+  align?: "start" | "center" | "end";
+  justify?: "start" | "center" | "end" | "between";
+
+  gap?: Space;
 }
 
-export function Flex({ children, column, className, gap, ...props }: Props) {
+export function Flex({
+  children,
+  column,
+  className,
+  gap,
+  justify,
+  align,
+  wrap,
+  ...props
+}: Props) {
   return (
     <div
       {...props}
       className={classNames(styles.flex, className)}
-      data-gap={gap}
       data-column={column}
+      data-wrap={wrap}
+      data-gap={gap}
+      data-justify={justify}
+      data-align={align}
     >
       {children}
     </div>