1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
import "./Stack.scss";
import React, { forwardRef } from "react";
import clsx from "clsx";
type StackProps = {
children: React.ReactNode;
gap?: number;
align?: "start" | "center" | "end" | "baseline";
justifyContent?: "center" | "space-around" | "space-between";
className?: string | boolean;
style?: React.CSSProperties;
};
const RowStack = forwardRef(
(
{ children, gap, align, justifyContent, className, style }: StackProps,
ref: React.ForwardedRef<HTMLDivElement>,
) => {
return (
<div
className={clsx("Stack Stack_horizontal", className)}
style={{
"--gap": gap,
alignItems: align,
justifyContent,
...style,
}}
ref={ref}
>
{children}
</div>
);
},
);
const ColStack = forwardRef(
(
{ children, gap, align, justifyContent, className, style }: StackProps,
ref: React.ForwardedRef<HTMLDivElement>,
) => {
return (
<div
className={clsx("Stack Stack_vertical", className)}
style={{
"--gap": gap,
justifyItems: align,
justifyContent,
...style,
}}
ref={ref}
>
{children}
</div>
);
},
);
export default {
Row: RowStack,
Col: ColStack,
};
|
