From 3048d842dedad3163e308515fb2e77892d92a49b Mon Sep 17 00:00:00 2001
From: Max Leiter <max.leiter@vercel.com>
Date: Sat, 28 Jan 2023 23:51:22 -0800
Subject: [PATCH] Add stack component

---
 src/app/components/stack/index.tsx | 48 ++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/app/components/stack/index.tsx

diff --git a/src/app/components/stack/index.tsx b/src/app/components/stack/index.tsx
new file mode 100644
index 00000000..282e7195
--- /dev/null
+++ b/src/app/components/stack/index.tsx
@@ -0,0 +1,48 @@
+import React, { CSSProperties } from "react"
+
+interface StackProps {
+	children: React.ReactNode
+	className?: string
+	gap?: string | number
+	style?: CSSProperties
+	direction?: "row" | "column"
+	alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline"
+	justifyContent?:
+		| "center"
+		| "flex-start"
+		| "flex-end"
+		| "space-between"
+		| "space-around"
+		| "space-evenly"
+	width?: string
+}
+
+export const Stack: React.FC<StackProps> = ({
+	children,
+	className = "",
+	gap = "var(--gap)",
+	direction = "column",
+	alignItems = "flex-start",
+	justifyContent = "flex-start",
+	width = "100%",
+	style
+}) => {
+	return (
+		<div
+			className={className}
+			style={{
+				display: "flex",
+				flexWrap: "wrap",
+				flex: 1,
+				gap: gap,
+				flexDirection: direction,
+				alignItems,
+				justifyContent,
+				width,
+				...style
+			}}
+		>
+			{children}
+		</div>
+	)
+}