Stack.tsx 692 B

123456789101112131415161718192021222324252627282930313233343536
  1. import "./Stack.css";
  2. import React from "react";
  3. type StackProps = {
  4. children: React.ReactNode;
  5. gap?: number;
  6. align?: "start" | "center" | "end" | "baseline";
  7. };
  8. function RowStack({ children, gap, align }: StackProps) {
  9. return (
  10. <div
  11. className="Stack Stack_horizontal"
  12. style={{ "--gap": gap, alignItems: align } as React.CSSProperties}
  13. >
  14. {children}
  15. </div>
  16. );
  17. }
  18. function ColStack({ children, gap, align }: StackProps) {
  19. return (
  20. <div
  21. className="Stack Stack_vertical"
  22. style={{ "--gap": gap, justifyItems: align } as React.CSSProperties}
  23. >
  24. {children}
  25. </div>
  26. );
  27. }
  28. export default {
  29. Row: RowStack,
  30. Col: ColStack
  31. };